javascript面向?qū)ο笾畬ο蟮纳钊肜斫?/h1>
更新時(shí)間:2023年05月01日 20:42:17 投稿:shichen2014
這篇文章主要介紹了javascript面向?qū)ο笾畬ο蟮纳钊肜斫?將javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中一切都視為對象,并以實(shí)例形式進(jìn)一步分析了面向?qū)ο蟮奶匦?需要的朋友可以參考下
本文進(jìn)一步分析講述了javascript面向?qū)ο笾畬ο蟮纳钊肜斫?。分享給大家供大家參考。
1.面向?qū)ο笈c面向編程的比較
1.1 面向?qū)ο螅╫op)
- 面向?qū)ο笫前咽挛锓纸夥Q為一個(gè)個(gè)對象,然后由對象之間分工與合作,是以對象功能劃分問題,而不是步驟
- 特征: 封裝性、繼承性、多態(tài)性
- 優(yōu)點(diǎn): 優(yōu)點(diǎn):易維護(hù)、易復(fù)用、易擴(kuò)展,由于面向?qū)ο笥蟹庋b、繼承、多態(tài)性的特性,可以設(shè)計(jì)出低耦合的系統(tǒng),使系統(tǒng) 更加靈活、更加易于維護(hù)
- 缺點(diǎn): 性能比面向過程低
面向?qū)ο蟮乃季S特點(diǎn):
- 抽?。ǔ橄螅ο蠊灿玫膶傩院托袨榻M織(封裝)成一個(gè)類(模板)
- 對類進(jìn)行實(shí)例化, 獲取類的對象
1.2 面向過程(pop)
- 面向過程就是分析出解決問題所需要的步驟,然后用函數(shù)把這些步驟一步一步實(shí)現(xiàn),使用的時(shí)候再一個(gè)一個(gè)的依次調(diào)用就可以了,面向過程就是分析出解決問題所需要的步驟,然后用函數(shù)把這些步驟一步一步實(shí)現(xiàn),使用的時(shí)候再一個(gè)一個(gè)的依次調(diào)用就可以了
- 優(yōu)點(diǎn):性能比面向?qū)ο蟾?,適合跟硬件聯(lián)系很緊密的東西,例如單片機(jī)就采用的面向過程編程。
- 缺點(diǎn):沒有面向?qū)ο笠拙S護(hù)、易復(fù)用、易擴(kuò)展
2. ES6中的類和對象
在js中,對象是一組無序的相關(guān)屬性和方法的集合,萬物皆對象
對象是由屬性和方法組成的:
- 屬性: 事物的特征,在對象中用屬性來表示
- 方法: 事物的行為,在對象中用方法來表示
在 ES6 中新增加了類的概念,可以使用 class 關(guān)鍵字聲明一個(gè)類,之后以這個(gè)類來實(shí)例化對象
類與對象的區(qū)別:
- 類抽象了對象的公共部分,它泛指某一大類(class)
- 對象特指某一個(gè),通過類實(shí)例化一個(gè)具體的對象
2.1 類的創(chuàng)建
語法:
class name {
// 添加屬性和方法,也可以再嵌入一個(gè)類
class age {},
}
創(chuàng)建實(shí)例
let a = new name();
// 類必須使用new實(shí)例化對象
2.2 類 constructor 構(gòu)造函數(shù)
constructor() 方法是類的構(gòu)造函數(shù)(默認(rèn)方法),用于傳遞參數(shù),返回實(shí)例對象,通過 new 命令生成對象實(shí)例時(shí),自動調(diào)用該方法。如果沒有顯示定義, 類內(nèi)部會自動給我們創(chuàng)建一個(gè)constructor()
語法:
class Person {
constructor(name,age) { // constructor 構(gòu)造方法或者構(gòu)造函數(shù)
this.name = name;
this.age = age;
}
sayHi() {
console.log('我會唱歌');
}
// 注意,方法之間不需要加逗號。同時(shí)函數(shù)不需要加function關(guān)鍵字
}
創(chuàng)建實(shí)例:
var ldh = new Person('劉德華', 18);
console.log(ldh.name);
ldh.sayHi();
2.3 類的繼承
實(shí)例:
class Father {
constructor(surname) {
this.surname= surname;
}
say() {
console.log('你的姓是' + this.surname);
}
}
class Son extends Father{ // 這樣子類就繼承了父類的屬性和方法
}
var damao= new Son('劉');
damao.say();
super關(guān)鍵字用于訪問和調(diào)用對象父類上的函數(shù),可以調(diào)用父類的構(gòu)造函數(shù),也可以調(diào)用父類的普通函數(shù)
語法:
class Father {
constructor(x,y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
say() {
return '我是爸爸';
}
}
class Son extends Father{
constructor(x,y) {
// this.x = x;
// this.y = y;
super(x,y); // 調(diào)用了父類中的構(gòu)造函數(shù) ,super必須寫在子類this之前調(diào)用
// 子類在構(gòu)造函數(shù)中使用super, 必須放到 this 前面 (必須先調(diào)用父類的構(gòu)造方法,在使用子類構(gòu)造方法)
this.x = x;
this.y = y;
}
say() {
console.log(super.say() + '的兒子'); // 利用super調(diào)用父類的函數(shù)
}
substract() {
console.log(this.x - this.y);
}
}
var son = new Son(11,2);
console.log(son);
son.say();
son.substract();
son.sum();
2.4 注意點(diǎn)
- 在 ES6 中類沒有變量提升,所以必須先定義類,才能通過類實(shí)例化對象.
- 類里面的共有屬性和方法一定要加this使用.
- 類里面的this指向問題.
- constructor 里面的this指向?qū)嵗龑ο? 方法里面的this 指向這個(gè)方法的調(diào)用者
補(bǔ)充
具體分析如下:
javacript面向?qū)ο蟪绦蛟O(shè)計(jì)中,可以理解為一切都是對象。
實(shí)例代碼如下:
<script language="javascript" type="text/javascript">
function Cat(){
}
var cat1 = new Cat();//創(chuàng)建類實(shí)例
cat1.name = "小狗";
cat1.age = 4;
cat1.color="白色";
document.write(cat1.name);
document.writeln(cat1.constructor);//實(shí)例化后對象,是對象
document.writeln(typeof(cat1)+"<hr />");
document.writeln(Cat.constructor);//原型對象本身也是對象
document.writeln(typeof Cat+"<hr />");
var b="hello";//字符串也是對象
document.writeln(b.constructor);//輸出它的構(gòu)造函數(shù)
document.writeln(typeof b+"<hr />");
var c=123;//數(shù)值也是對象
document.writeln(c.constructor);
document.writeln(typeof c+"<hr />");
</script>
判斷一個(gè)實(shí)例化對象是不是某個(gè)原型對象類型
if(cat1 instanceof Cat){//與php的判斷方法相同
?window.alert("ok");
}
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
-
身份證號碼前六位所代表的省,市,區(qū), 以及地區(qū)編碼下載
身份證號碼前六位所代表的省,市,區(qū), 以及地區(qū)編碼下載... 2007-04-04
-
一行JavaScript代碼如何實(shí)現(xiàn)瀑布流布局
這篇文章主要給大家介紹了如何通過一行JavaScript代碼實(shí)現(xiàn)瀑布流布局的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧 2020-12-12
-
JS去除重復(fù)并統(tǒng)計(jì)數(shù)量的實(shí)現(xiàn)方法
js去除重復(fù)并統(tǒng)計(jì)數(shù)量方法,首先點(diǎn)擊按鈕觸發(fā)事件,然后用class選擇器,迭代要獲取的文本(這里最好用text()方法)加入到Array()集合里。具體操作方法,大家通過本文學(xué)習(xí)下吧 2016-12-12
-
詳解微信小程序-canvas繪制文字實(shí)現(xiàn)自動換行
這篇文章主要介紹了微信小程序canvas繪制文字實(shí)現(xiàn)自動換行,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
-
JavaScript使用promise處理多重復(fù)請求
處理重復(fù)請求的文章想必大家也看過了很多,大多數(shù)都是分為在response返回之前發(fā)現(xiàn)重復(fù)請求就return掉的和使用節(jié)流/防抖來間接規(guī)避用戶頻繁操作兩種版本的。本文主要介紹了JavaScript使用promise處理多重復(fù)請求,感興趣的可以了解一下 2021-05-05
-
JavaScript輕松創(chuàng)建級聯(lián)函數(shù)的方法示例
級聯(lián)函數(shù)也叫鏈?zhǔn)胶瘮?shù),方法鏈一般適合對一個(gè)對象進(jìn)行連續(xù)操作
(集中在一句代碼)。一定程度上可以減少代碼量,缺點(diǎn)是它占用了
函數(shù)的返回值。下面這篇文章主要給大家介紹了利用JavaScript如何輕松創(chuàng)建級聯(lián)函數(shù)的方法示例,需要的朋友可以參考借鑒。 2017-02-02
最新評論
本文進(jìn)一步分析講述了javascript面向?qū)ο笾畬ο蟮纳钊肜斫?。分享給大家供大家參考。
1.面向?qū)ο笈c面向編程的比較
1.1 面向?qū)ο螅╫op)
- 面向?qū)ο笫前咽挛锓纸夥Q為一個(gè)個(gè)對象,然后由對象之間分工與合作,是以對象功能劃分問題,而不是步驟
- 特征: 封裝性、繼承性、多態(tài)性
- 優(yōu)點(diǎn): 優(yōu)點(diǎn):易維護(hù)、易復(fù)用、易擴(kuò)展,由于面向?qū)ο笥蟹庋b、繼承、多態(tài)性的特性,可以設(shè)計(jì)出低耦合的系統(tǒng),使系統(tǒng) 更加靈活、更加易于維護(hù)
- 缺點(diǎn): 性能比面向過程低
面向?qū)ο蟮乃季S特點(diǎn):
- 抽?。ǔ橄螅ο蠊灿玫膶傩院托袨榻M織(封裝)成一個(gè)類(模板)
- 對類進(jìn)行實(shí)例化, 獲取類的對象
1.2 面向過程(pop)
- 面向過程就是分析出解決問題所需要的步驟,然后用函數(shù)把這些步驟一步一步實(shí)現(xiàn),使用的時(shí)候再一個(gè)一個(gè)的依次調(diào)用就可以了,面向過程就是分析出解決問題所需要的步驟,然后用函數(shù)把這些步驟一步一步實(shí)現(xiàn),使用的時(shí)候再一個(gè)一個(gè)的依次調(diào)用就可以了
- 優(yōu)點(diǎn):性能比面向?qū)ο蟾?,適合跟硬件聯(lián)系很緊密的東西,例如單片機(jī)就采用的面向過程編程。
- 缺點(diǎn):沒有面向?qū)ο笠拙S護(hù)、易復(fù)用、易擴(kuò)展
2. ES6中的類和對象
在js中,對象是一組無序的相關(guān)屬性和方法的集合,萬物皆對象
對象是由屬性和方法組成的:
- 屬性: 事物的特征,在對象中用屬性來表示
- 方法: 事物的行為,在對象中用方法來表示
在 ES6 中新增加了類的概念,可以使用 class 關(guān)鍵字聲明一個(gè)類,之后以這個(gè)類來實(shí)例化對象
類與對象的區(qū)別:
- 類抽象了對象的公共部分,它泛指某一大類(class)
- 對象特指某一個(gè),通過類實(shí)例化一個(gè)具體的對象
2.1 類的創(chuàng)建
語法:
class name { // 添加屬性和方法,也可以再嵌入一個(gè)類 class age {}, }
創(chuàng)建實(shí)例
let a = new name(); // 類必須使用new實(shí)例化對象
2.2 類 constructor 構(gòu)造函數(shù)
constructor() 方法是類的構(gòu)造函數(shù)(默認(rèn)方法),用于傳遞參數(shù),返回實(shí)例對象,通過 new 命令生成對象實(shí)例時(shí),自動調(diào)用該方法。如果沒有顯示定義, 類內(nèi)部會自動給我們創(chuàng)建一個(gè)constructor()
語法:
class Person { constructor(name,age) { // constructor 構(gòu)造方法或者構(gòu)造函數(shù) this.name = name; this.age = age; } sayHi() { console.log('我會唱歌'); } // 注意,方法之間不需要加逗號。同時(shí)函數(shù)不需要加function關(guān)鍵字 }
創(chuàng)建實(shí)例:
var ldh = new Person('劉德華', 18); console.log(ldh.name); ldh.sayHi();
2.3 類的繼承
實(shí)例:
class Father { constructor(surname) { this.surname= surname; } say() { console.log('你的姓是' + this.surname); } } class Son extends Father{ // 這樣子類就繼承了父類的屬性和方法 } var damao= new Son('劉'); damao.say();
super關(guān)鍵字用于訪問和調(diào)用對象父類上的函數(shù),可以調(diào)用父類的構(gòu)造函數(shù),也可以調(diào)用父類的普通函數(shù)
語法:
class Father { constructor(x,y) { this.x = x; this.y = y; } sum() { console.log(this.x + this.y); } say() { return '我是爸爸'; } } class Son extends Father{ constructor(x,y) { // this.x = x; // this.y = y; super(x,y); // 調(diào)用了父類中的構(gòu)造函數(shù) ,super必須寫在子類this之前調(diào)用 // 子類在構(gòu)造函數(shù)中使用super, 必須放到 this 前面 (必須先調(diào)用父類的構(gòu)造方法,在使用子類構(gòu)造方法) this.x = x; this.y = y; } say() { console.log(super.say() + '的兒子'); // 利用super調(diào)用父類的函數(shù) } substract() { console.log(this.x - this.y); } } var son = new Son(11,2); console.log(son); son.say(); son.substract(); son.sum();
2.4 注意點(diǎn)
- 在 ES6 中類沒有變量提升,所以必須先定義類,才能通過類實(shí)例化對象.
- 類里面的共有屬性和方法一定要加this使用.
- 類里面的this指向問題.
- constructor 里面的this指向?qū)嵗龑ο? 方法里面的this 指向這個(gè)方法的調(diào)用者
補(bǔ)充
具體分析如下:
javacript面向?qū)ο蟪绦蛟O(shè)計(jì)中,可以理解為一切都是對象。
實(shí)例代碼如下:
<script language="javascript" type="text/javascript"> function Cat(){ } var cat1 = new Cat();//創(chuàng)建類實(shí)例 cat1.name = "小狗"; cat1.age = 4; cat1.color="白色"; document.write(cat1.name); document.writeln(cat1.constructor);//實(shí)例化后對象,是對象 document.writeln(typeof(cat1)+"<hr />"); document.writeln(Cat.constructor);//原型對象本身也是對象 document.writeln(typeof Cat+"<hr />"); var b="hello";//字符串也是對象 document.writeln(b.constructor);//輸出它的構(gòu)造函數(shù) document.writeln(typeof b+"<hr />"); var c=123;//數(shù)值也是對象 document.writeln(c.constructor); document.writeln(typeof c+"<hr />"); </script>
判斷一個(gè)實(shí)例化對象是不是某個(gè)原型對象類型
if(cat1 instanceof Cat){//與php的判斷方法相同 ?window.alert("ok"); }
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
身份證號碼前六位所代表的省,市,區(qū), 以及地區(qū)編碼下載
身份證號碼前六位所代表的省,市,區(qū), 以及地區(qū)編碼下載...2007-04-04一行JavaScript代碼如何實(shí)現(xiàn)瀑布流布局
這篇文章主要給大家介紹了如何通過一行JavaScript代碼實(shí)現(xiàn)瀑布流布局的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12JS去除重復(fù)并統(tǒng)計(jì)數(shù)量的實(shí)現(xiàn)方法
js去除重復(fù)并統(tǒng)計(jì)數(shù)量方法,首先點(diǎn)擊按鈕觸發(fā)事件,然后用class選擇器,迭代要獲取的文本(這里最好用text()方法)加入到Array()集合里。具體操作方法,大家通過本文學(xué)習(xí)下吧2016-12-12詳解微信小程序-canvas繪制文字實(shí)現(xiàn)自動換行
這篇文章主要介紹了微信小程序canvas繪制文字實(shí)現(xiàn)自動換行,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JavaScript使用promise處理多重復(fù)請求
處理重復(fù)請求的文章想必大家也看過了很多,大多數(shù)都是分為在response返回之前發(fā)現(xiàn)重復(fù)請求就return掉的和使用節(jié)流/防抖來間接規(guī)避用戶頻繁操作兩種版本的。本文主要介紹了JavaScript使用promise處理多重復(fù)請求,感興趣的可以了解一下2021-05-05JavaScript輕松創(chuàng)建級聯(lián)函數(shù)的方法示例
級聯(lián)函數(shù)也叫鏈?zhǔn)胶瘮?shù),方法鏈一般適合對一個(gè)對象進(jìn)行連續(xù)操作 (集中在一句代碼)。一定程度上可以減少代碼量,缺點(diǎn)是它占用了 函數(shù)的返回值。下面這篇文章主要給大家介紹了利用JavaScript如何輕松創(chuàng)建級聯(lián)函數(shù)的方法示例,需要的朋友可以參考借鑒。2017-02-02