js面向?qū)ο鬁\談（三）

awkj 發(fā)布于2019-08-20 17:20 / 2572人閱讀

摘要：還有一個(gè)問題，就是不能在創(chuàng)建子類性時(shí)，像父類型的構(gòu)造函數(shù)傳遞參數(shù)。組合繼承將原型鏈和借用構(gòu)造函數(shù)組合到一起，發(fā)揮兩者之長(zhǎng)的一張繼承模式，下面來(lái)看個(gè)例子。組合繼承最大的問題是無(wú)論在什么情況下，都會(huì)調(diào)用兩次父類型構(gòu)造函數(shù)。

繼承

繼承是面向?qū)ο笳Z(yǔ)言中特別重要的概念，js的繼承主要是靠原型鏈實(shí)現(xiàn)的。

原型鏈！！！

看到我給標(biāo)題打了三個(gè)嘆號(hào)嗎，這里真的很重要！這里真的很重要！這里真的很重要！js描述了原型鏈的概念，并將原型鏈做為實(shí)現(xiàn)繼承的主要方法，其基本思想是讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。看代碼

function SuperType() {
    this.property = true;
}

SuperType.prototype.getSuperValue = function () {
    return this.property;
}

function SubType () {
    this.Subproperty = false;
}

SubType.prototype = new SuperType();

SuperType.prototype.getSubValue = function () {
    return this.subproperty;
}

var instance = new SubType();
console.log(instance.getSuperValue())

下面繼續(xù)上我的靈魂畫作：

話不多說，原理都在圖里，相信聰明的你們?cè)缇投恕Ｔ谏厦娴拇a中，我們沒有使用SubType默認(rèn)提供的原型，而是給它換了一個(gè)新原型。這個(gè)原型是父類的實(shí)例，新原型具有全部屬性和方法，現(xiàn)在也存在于子類的原型中了。

通過原型鏈，本質(zhì)上擴(kuò)展了原型搜索機(jī)制。在instance.getSuperValue()調(diào)用會(huì)經(jīng)歷三個(gè)搜索步驟

搜索實(shí)例

搜索原型對(duì)象

搜索父類原型對(duì)象

一環(huán)一環(huán)向上搜索直到原型鏈末端才會(huì)停下來(lái)。但是我們子類上的valueOf這些方法是哪里來(lái)的呢？父類并沒有顯示聲明這些方法啊下面繼續(xù)上圖。

SubType繼承了SuperType,SuperType繼承了Object，當(dāng)調(diào)用instance.valueOf()方法時(shí)，實(shí)際上調(diào)用的是保存在Object.prototype中的方法。

原型鏈的問題

原型鏈這么強(qiáng)大，同樣也會(huì)造成問題。最主要的問題來(lái)自于包含引用類型的原型。引用類型的原型屬性會(huì)被雖有實(shí)例共享，在通過原型來(lái)實(shí)現(xiàn)繼承時(shí)，原型會(huì)變成另一個(gè)類型的實(shí)例，原先的實(shí)例屬性也就順理成章變成來(lái)現(xiàn)在的原型屬性。

function SuperType () {
    this.colors = ["red", "blue", "green"];
}

function SubType () {
    
}


SubType.prototype = new SuperType();

var instance1 = new SubType();

instance1.colors.push("black");

console.log(instance1.colors)

var instance2 = new SubType();

console.log(instance2.colors)

還有一個(gè)問題，就是不能在創(chuàng)建子類性時(shí)，像父類型的構(gòu)造函數(shù)傳遞參數(shù)。所以我們一般很少多帶帶使用原型鏈。

借用構(gòu)造函數(shù)

function SuperType () {
    this.colors = ["red", "blue", "green"];
}

function SubType () {
    // 繼承了 SuperType
    SuperType.call(this);
}

var instance1 = new SubType();

instance1.colors.push("black");

console.log(instance1.colors);


var instance2 = new SubType();
console.log(instance2.colors);

也可以傳遞參數(shù)

 function SuperType (name) {
    this.name = name;
}

function SubType () {
    // 繼承了 SuperType
    SuperType.call(this, "李小花");
}

var instance1 = new SubType();
console.log(instance1.name)
但是這樣問題也很明顯，方法只能定義在構(gòu)造函數(shù)中定義，定義在原型上的方法無(wú)法繼承。借用構(gòu)造函數(shù)的技術(shù)也很少使用。

組合繼承

將原型鏈和借用構(gòu)造函數(shù)組合到一起，發(fā)揮兩者之長(zhǎng)的一張繼承模式，下面來(lái)看個(gè)例子。

   function SuperType (name) {
    this.name = name;
}

SuperType.prototype.sayName = function() {
    console.log(this.name)
};

function SubType (name, age) {
    // 繼承了 SuperType
    SuperType.call(this, name);

    this.age = age;
}
SubType.prototype = new SuperType();

var instance1 = new SubType();
console.log(instance1.name)

組合繼承是 js最常用的繼承模式。

寄生組合式繼承

組合繼承是最常用的繼承模式，但也不是沒有缺點(diǎn)。組合繼承最大的問題是無(wú)論在什么情況下，都會(huì)調(diào)用兩次父類型構(gòu)造函數(shù)。

 function SuperType (name) {
    this.name = name;
}

SuperType.prototype.sayName = function() {
    console.log(this.name)
};

function SubType (name, age) {
    // 繼承了 SuperType
    SuperType.call(this, name);  //第二次調(diào)用

    this.age = age;
}
SubType.prototype = new SuperType();  // 第一次調(diào)用

var instance1 = new SubType();
console.log(instance1.name)

我們不必為了指定子類型的原型調(diào)用超類型的構(gòu)造函數(shù)，我們所需要的不過是超類型原型的一個(gè)副本而已。

function SuperType (name) {
    this.name = name;
    this.color = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function() {
    console.log(this.name);
};

function SubType (name, age) {
    SuperType.call(this, name);
    this.age = age;
}

SubType.prototype = Object.create(SuperType.prototype);

SubType.prototype.constructor = SubType