JS 核心語言基礎語法 之 面向對象第二講

hello，大家好，在上一講里，我們簡單理解了一下什么是對象，然后呢，在文檔末尾引導讀者到我博客園里去看了看面向對象的三個特征，都是啥，不知道有沒有同學看啊，理解面向對象的特征，對理解面向對象的思路是非常有幫助的，這一講呢，我們主要來了解一下這三個特征（封裝、繼承、多態）中，繼承的方式有哪些，還是老套路，看圖說話~

從上圖，我們可以清晰的看到，繼承的方式有7中方式，下面我們逐一了解一下。

第一種：原型鏈繼承

實現方式，在圖中我們可以看到哈，就一句話，b.prototype = new A()，通過這一句話，我們就可以讓A把b對象原型鏈上的屬性方法都繼承了，該方法的優缺點分別是：

優點：1.簡單；2.給b增加原型方法不會影響到A；

缺點：1.給子類添加新方法時，必須書寫在b.prototype = new A()后面；2.無法實現多繼承；3.所有的屬性都是共享的；4.沒有辦法傳遞參數

第二種：借用構造函數模式

我們先看下示例：

//示例： function?A(name){ ????this.name?=?name }; function?B(){ ????A.call(this,?'張三');??//或者?A.apply(this,?['張三']); ????this.age?=?29; }; var?C?=?new?B(); alert(C.name);?//張三 alert(C.age);?//29

優點：1.可以實現多繼承；2.解決了共享的問題；3可以傳參；

缺點：1.創建的實例只是子類的實例不是父類的實例；2.只能繼承構造函數中的屬性和方法，不能繼承原型的屬性和方法；3.占用多余內存，無法復用

第三種：組合繼承（偽經典繼承）

//示例： function?A(name){ ????this.name?=?name; ????this.color?=?['red',?'green']; }; A.prototype.sayName?=?function(){ ????alert(this.name); }; function?B(name,?age){ ????//繼承屬性 ????A.call(this,?name); ????this.age?=?age; }; //繼承方法 B.prototype?=?new?A(); B.prototype.constructor?=?B; B.prototype.sayAge?=?function(){ ????alert(this.age); }; var?C1?=?new?B('張三'，?29)； C1.color.push('black'); alert(C1.color);?//'red,?green,?black' C1.sayName();?//張三 C1.sayAge();?//29

優點：集合上面兩種的優點；

缺點：父類構造函數被調用兩次，存在同名覆蓋的問題，并且會占用多余的內存

第四種：原型式繼承

使用原型式繼承的前提是對象和對象直接的繼承。

實現該種繼承的方式有兩種，分別是ES3和ES5的方法，具體如下：

ES3:

//示例： function?object(o){ ??function?F(){}; ??F.prototype?=?o; ??return?new?F(); }; var?person?=?{ ??name:?'張三', ??friends:?['李四'] }; var?B?=?object(person); B.name?=?'王五'; B.friends.push('趙六'); console.log(B);?//F?{name:?"王五"} console.log(person);//{name:?"張三",?friends:?["李四",?"趙六"]}

ES5:

//示例： var?person?=?{ ??name:?'張三', ??friends:?['李四'] }; var?B?=?Object.create(person); B.name?=?'王五'; B.friends.push('趙六'); console.log(B);?//F?{name:?"王五"} console.log(person);//{name:?"張三",?friends:?["李四",?"趙六"]}

第五種：寄生式繼承

//示例： function?object(o){ ??function?F(){}; ??F.prototype?=?o; ??return?new?F(); }; function?createAnother(original){ ??var?clone?=?object(original); ??clone.sayHi?=?function(){ ????alert('Hi'); ??}; ??return?clone; }; var?person?=?{ ??name:?'張三', ??friends:?['李四'] }; var?B?=?createAnother(person); B.sayHi();?//Hi

第六種：寄生組合式繼承（完美繼承或經典繼承）

//示例： function?inheritPrototype(B,?A){ ??var?p?=?Object(A.prototype);??//var?p?=?Object.create(A.prototype);??ES5 ??p.constructor?=?B; ??B.prototype?=?p; }; function?A(name){ ??this.name?=?name; ??this.colors?=?['red',?'green'] }; A.prototype.sayName?=?function(){ ??alert(this.name); }; function?B(name,?age){ ??A.call(this,?name); ??this.age?=?age; }; inheritPrototype(B,?A); B.prototype.sayAge?=?function(){ ??alert(this.age); }; var?C?=?new?B('張三',29); C.colors.push('black'); console.log(C.colors);?//["red",?"green",?"black"] C.sayName();?//張三

優點：解決了偽經典繼承的缺點

第七種：克隆

克隆分為深克隆和淺克隆兩種，網上介紹的文章很多，大家可以自己找找看看哦~

以上就是繼承的方式總結，需要自己反復練習揣摩哈，主要是思路~

寄語共勉：有種力量叫放大目標，有種智慧叫把問題縮小，我們的終極目標是學好JavaScript，小目標是盡量掌握好每個小知識點~

Elasticsearch

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。