資訊專欄INFORMATION COLUMN
摘要：組合方式實現(xiàn)繼承原型鏈構造函數(shù)喵喵喵汪汪汪與的唯一區(qū)別是多了這一句組合方式實現(xiàn)了對構造函數(shù)內(nèi)和原型上所有屬性和方法的繼承，并且的實例對象之間也不會相互干擾。
前言
關于JavaScript繼承相關的定義和方法網(wǎng)上已經(jīng)有很多解釋啦，本菜鳥就不抄抄寫寫惹人嫌了，本文主要探討三種基本的繼承方式并且給出優(yōu)化方案。
正文
借助構造函數(shù)實現(xiàn)繼承
function Parent1() {
this.name = "喵喵喵";
this.arr = [1];
}
Parent1.prototype.say = function () {
alert("我肯定沒被繼承，所以彈不出來");
};
function Child1() {
Parent1.call(this); // 這里是借助構造函數(shù)實現(xiàn)繼承的關鍵
}
var t1 = new Child1();
好的，我們來通過控制臺看看結果：
可以發(fā)現(xiàn)，Child1已經(jīng)成功繼承了Parent1構造函數(shù)中個屬性，那么問題來了，Parent1原型的屬性Child1繼承了嗎？
答案是并沒有！這就是借助構造函數(shù)實現(xiàn)繼承的缺點，被繼承對象原型上的屬性不能被繼承。
2.借助原型鏈實現(xiàn)繼承
Tips:所有實例對象共享的屬性和方法都放在prototype中
function Parent2() {
this.arr = [1];
this.a = "1";
}
Parent2.prototype.say = function () {
alert("終于被繼承了");
};
function Child2() {
this.type = "汪汪汪";
}
Child2.prototype = new Parent2(); // 這里是借助原型鏈實現(xiàn)繼承的關鍵
var s1 = new Child2();
var s2 = new Child2();
我們再次打開控制臺看看：
ok！到這里，我們已經(jīng)成功實現(xiàn)讓Parent2中的屬性以及它原型鏈上的屬性都被繼承。但是這里要注意包含引用類型屬性的原型會被所有的實例共享。啥意思呢？Child2.prototype = new Parent2(); 這行代碼把Parent2的實例賦給了Child2的原型，而Parent2中存在引用類型this.arr。
s1和s2本是Child2的兩個不同實例，但修改s2.arr同樣映射到s1.arr這個問題體現(xiàn)出了借助原型鏈實現(xiàn)繼承的缺點： Parent2中的引用屬性被Child2的實例共享了。
3.組合方式實現(xiàn)繼承（原型鏈 + 構造函數(shù)）
function Parent3() {
this.type = "喵喵喵";
this.arr = [1]
}
function Child3() {
this.type = "汪汪汪";
Parent3.call(this); // 與2的唯一區(qū)別是多了這一句
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
組合方式實現(xiàn)了Child3對Parent3構造函數(shù)內(nèi)和原型上所有屬性和方法的繼承，并且Child3的實例對象之間也不會相互干擾。當然啦，厲害的看官已經(jīng)發(fā)現(xiàn)了組合方式的問題：Parent3.call(this)、new Parent3();
在實現(xiàn)組合繼承的過程中Parent3執(zhí)行了兩次，這其實是沒有必要的。
組合方式實現(xiàn)繼承-優(yōu)化
function Parent4() {
this.type = "喵喵喵";
this.arr = [1]
}
Parent4.prototype.cide = [1,2,3];
function Child4() {
this.type = "汪汪汪";
Parent4.call(this);
}
Child4.prototype = Parent4.prototype;// 優(yōu)化重點
var s5 = new Child4();
var s6 = new Child4();
這種組合方式的優(yōu)化方案其實可以分兩步來看：
1） Parent4.call(this) 實現(xiàn)對構造函數(shù)中的屬性和方法的繼承
2）Child4.prototype = Parent4.prototype; 實現(xiàn)對構造函數(shù)的原型的屬性和方法的繼承
觀察3中的代碼我們可以發(fā)現(xiàn)，通過Parent3.call(this)我們規(guī)避了Parent構造函數(shù)中引用屬性對child實例的影響，但如果Parent的原型中存在引用類型（Parent4.prototype.cide），那么在child的實例中修改該屬性，同樣會映射到其它實例。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88903.html
摘要：構造函數(shù)通過原型繼承了構造函數(shù)和原型，這就形成了一個鏈條，通俗的講就是原型鏈繼承。而且方法只能冒充構造函數(shù)里面的屬性和方法而無法冒充原型對象里面的屬性和方法還有最大的問題就是重復使用。 前言： 寫到這里，差不多就把OOP完結了，寫了幾篇OOP的文章，但是只是略懂皮毛，可能深入的OOP還有很多，但是我感覺寫到這里也算是差不多完結了。 繼承 繼承是面向?qū)ο蟊容^核心的概念，其他語言可能實現(xiàn)...
摘要：面向?qū)ο竺嫦驅(qū)ο缶幊痰娜Q是，簡稱，面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實世界模型的一種編程模式。面向?qū)ο缶幊痰娜齻€主要特征是封裝繼承多態(tài)。 面向?qū)ο?面向?qū)ο缶幊痰娜Q是Object Oriented Programming，簡稱OOP，面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實世界模型的一種編程模式。面向?qū)ο缶幊炭梢钥醋鍪鞘褂靡幌盗袑ο笙嗷f(xié)作的軟件設計，面向?qū)ο蟪绦蛟O計的目的是在編程中促...
摘要：注意這里跟原型鏈繼承有個比較明顯的區(qū)別是并沒有使用繼承而是在子類里面執(zhí)行父類的構造函數(shù)相當于把父類的代碼復制到子類里面執(zhí)行一遍這樣做的另一個好處就是可以給父類傳參。 Javascript繼承 學過后端語言的同學對繼承并不陌生，但是對JS繼承少許還是有些困惑，不要試圖問我是如果知道的，其實javascript繼承主要是基于原型prototype實現(xiàn)的。 其實當你真正了解了原型鏈時候，再看...
摘要：在這其中我們就逃不開要討論繼承原型對象構造函數(shù)實例了。想要獲得某一類型的構造函數(shù)可以用來獲得，也可以對該屬性進行賦值操作。三上面就提到一點是指構造函數(shù)的原型對象，它是一個對象，它是構造函數(shù)的屬性。 原型鏈這一個話題，需要和很多概念一起講，才能串成一個比較系統(tǒng)的知識點。在這其中我們就逃不開要討論繼承、原型對象、構造函數(shù)、實例了。 一、構造函數(shù) 構造函數(shù)是一類特殊的函數(shù)，它的作用是用來生成...
摘要：中的和是一門很靈活的語言，尤其是。即然是面向?qū)ο蟮木幊陶Z言，那也是不可或缺的。在中，永遠指向的是他的調(diào)用者。定義是存在于實例化后對象的一個屬性，并且指向原對象的屬性。我們在擴展的時候，同時父類也會有對應的方法，這很顯然是一個很嚴重的問題。 javascript中的this和new javascript是一門很靈活的語言，尤其是function。他即可以以面向過程的方式來用，比如： f...
閱讀 2410·2021-11-12 10:34
閱讀 1479·2019-08-29 16:15
閱讀 2691·2019-08-29 15:17
閱讀 1352·2019-08-23 17:09
閱讀 396·2019-08-23 11:37
閱讀 2457·2019-08-23 10:39
閱讀 476·2019-08-22 16:43
閱讀 3119·2019-08-22 14:53
