徹底弄懂JS原型與繼承

本文由淺到深，循序漸進的將原型與繼承的抽象概念形象化，且每個知識點都搭配相應的例子，儘可能的將其通俗化，而且本文最大的優點就是：長（爲了更詳細嘛）。

一、原型

首先，我們先說說原型，但說到原型就得從函數說起，因爲原型對象就是指函數所擁有的prototype屬性(所以下文有時說原型，有時說prototype，它們都是指原型)。

1.1 函數

說到函數，我們得先有個概念：函數也是對象，和對象一樣擁有屬性，例如：

function F(a, b) {
    return a * b;
}

F.length   // 2  指函數參數的個數
F.constructor   // function Function() { [native code] }
typeof F.prototype  // "object"

從上面我們可以看出函數和對象一樣擁有屬性，我們重點說的就是prototype這個原型屬性。

prototype也是一個對象，爲了更形象的理解，我個人是把上述理解爲這樣的：

// F這個函數對象裏有個prototype對象屬性
F = {
    prototype: {}
}

下面我們就說說這個prototype對象屬性。

1.2 prototype對象的屬性

prototype是一個對象，裏面有個默認屬性constructor，默認指向當前函數，我們依舊使用F這個函數來說明：

F = {
    prototype: {
        constructor: F    // 指向當前函數
    }
}

既然prototype是個對象，那我們也同樣可以給它添加屬性，例如：

F.prototype.name = 'BetterMan';

// 那F就變成如下：
F = {
    prototype: {
        constructor: F,
        name: 'BetterMan'
    }
}

prototype就先鋪墊到這，下面我們來說說對象，然後再把它們串起來。

1.3 創建對象

創建對象有很多種方式，本文針對的是原型，所以就說說使用構造函數創建對象這種方式。上面的F函數其實就是一個構造函數（構造函數默認名稱首字母大寫便於區分），所以我們用它來創建對象。

let f = new F();
console.log(f)  // {}

這時得到了一個“空”對象，下面我們過一遍構造函數創建對象的過程：

1. 創建一個新對象；
2. 將構造函數的作用域賦給新對象，即把this指向新對象（同時還有一個過程，新對象的proto屬性指向構造函數的ptototype屬性，後面會解釋這塊）。
3. 執行函數內代碼，即爲新對象添加屬性。
4. 返回新對象（不需要寫，默認返回this，this就是指新對象）。

下面我們修改一下F構造函數：

function F(age) {
    this.age = age;
}

再用F來創建一個實例對象：

let f1 = new F(18);  // 18歲，別來無恙
console.log(f1); // {age: 18}

其實我們就得到了一個f1對象，裏面有一個age屬性，但真的只有age屬性嗎？上面我們講到構造函數創建對象的過程，這裏的新建對象，然後給對象添加屬性，然後返回新對象，我們都是看得到的，還有一個過程，就是新對象的__proto__屬性指向構造函數的ptototype屬性。

我們打印一下看看：

console.log(f1.__proto__);  // {constructor: F}

這不就是F構造函數的prototype對象嗎？這個指向過程也就相當於f1.__proto__ === F.prototype，理解這個很重要！

__proto__我們可稱爲隱式原型（不是所有瀏覽器都支持這個屬性，所以谷歌搞起），這個就厲害了，既然它指向了構造函數的原型，那我們獲取到它也就能獲取到構造函數的原型了（但一般我們不用這個方法獲取原型，後面會介紹其他方法）。

前面我們說了構造函數的prototype對象中的constructor屬性是指向自身函數的，那我們用__proto__來驗證一下：

console.log(f1.__proto__.constructor);  // F(age) {this.age = age;}
// 因爲f1.__proto__ === F.prototype，所以上述就是指F.prototype.constructor

嗯，不錯不錯，看來沒毛病！

目前來說應該還是比較好理解的，那我們再看看：

console.log(f1.constructor);  // F(age) {this.age = age;}

額，這什麼鬼？難道實例對象f1還有個constructor屬性和構造函數原型的constructor一樣都是指向構造函數？這就有點意思了。

其實不是，應該是說f1的神祕屬性__proto__指向了F.prototype，這相當於一個指向引用，如果要形象點的話可以把它理解爲把F.prototype的屬性"共享"到了f1身上，但這是動態的"共享"，如果後面F.prototype改變的話，f1所"共享"到的屬性也會跟着改變。理解這個很重要！重要的事情說三遍！重要的事情說三遍！重要的事情說三遍！

那我們再把代碼"形象化"：

F = {
    prototype: {
        constructor: F
    }
};

f1 = {
    age: 18,
    __proto__: {    // 既然我們已經把這個形象化爲"共享"屬性了，那就再形象一點
        constructor: F
    }
}

// 更形象化：
f1 = {
    age: 18,  // 這個是f1對象自身屬性
    constructor: F  // 這個是從原型上"共享"的屬性
}

既然我們說的是動態"共享"屬性，那我們改一改構造函數的prototype屬性看看f1會不會跟着改變：

// 沒改之前
console.log(f1.name);  // undefined

// 修改之後
F.prototype.name = 'BetterMan';
console.log(f1);   // {age: 18}
console.log(f1.name);  // 'BetterMan'

A(讀A第二調)……，看來和想的一毛一樣啊，但是f1上面沒看到name屬性，那就是說我們只是可以從構造函數的原型上拿到name屬性，而不是把name變爲實例對象的自身屬性。說到這裏就得提提對象自身屬性和原型屬性（從原型上得來的屬性）了。

1.4 對象自身屬性和原型屬性

我們所創建的實例對象f1，有自身屬性age，還有從原型上找到的屬性name，我們可以使用hasOwnProperty方法檢測一下：

console.log(f1.hasOwnProperty('age'));  // true 說明是自身屬性
console.log(f1.hasOwnProperty('name')); // false 說明不是自身屬性

那既然是對象屬性，應該就可以添加和刪除吧？我們試試：

delete f1.age;
console.log(f1.age); // undefined

delete f1.name;
console.log(f1.name); // 'BetterMan'

額，age屬性刪除成功了，但好像name沒什麼反應，比較堅挺，這就說明了f1對象可以掌控自身的屬性，愛刪刪愛加加，但name屬性是從原型上得到的，是別人的屬性，你可沒有權利去修改。

其實我們在訪問對象的name屬性時，js引擎會依次查詢f1對象上的所有屬性，但是找不到這個屬性，然後就會去創建f1實例對象的構造函數的原型上找（這就歸功於神祕屬性proto了，是它把實例對象和構造函數的原型聯繫了起來），然後找到了（如果再找不到的話，還會往上找，這就涉及到原型鏈了，後面我們會說到）。而找age屬性時直接就在f1上找到了，就不用再去其他地方找了。

到現在大家應該對原型有了個大概的理解了吧，但它有什麼用呢？
用處大大的，可以說我們無時無刻都在使用它，下面我們繼續。

二、繼承

講了原型，那肯定是離不開繼承這個話題的，說到繼承就很熱鬧了，什麼原型模式繼承、構造函數模式繼承、對象模式繼承、屬性拷貝模式繼承、多重繼承、寄生式繼承、組合繼承、寄生組合式繼承……這什麼鬼？這麼多，看着是不是很頭疼？

我個人就把它們分爲原型方式、構造函數方式、對象方式這三個方式，然後其他的繼承方式都是基於這三個方式的組合，當然這只是我個人的理解哈，下面我們開始。

2.1 原型鏈

說到繼承，肯定得說原型鏈，因爲原型鏈是繼承的主要方法。

我們先來簡單的回顧一下構造函數、原型和實例的關係：每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針（constructor），而實例偶讀包含一個指向原型對象的內部指針（__proto__）。那麼，假如我們讓原型對象等於另一個實例對象，結果會怎麼樣呢？顯然，此時的原型對象將包含一個指向另一個原型的指針（__proto__），相應的，另一個原型中也包含着一個指向另一個構造函數的指針（constructor）。那假如另一個原型又是另一個對象實例，那麼上述關係依然成立，如此層層遞進，就構成了實例與原型的鏈條。這就是所謂的原型鏈，如圖：

到這裏千萬不要亂，一定要理解了這段話再往下看，其實就是把別人的實例對象賦值給了我們的構造函數的原型，這就是第一層，然後如果別人的實例對象的構造函數的原型又是另一個人的實例對象的話，那不是一樣的道理嗎？這就是第二層，那如果再出現個第三者，那又是一層了，這就構成了一個層層連起來的原型鏈。

好了，如果你看到了這裏，說明已經理解了上述"鏈情"，那我們就開始搞搞繼承。

2.2 繼承方式

繼承有多重形式，我們一個個來，分別對比一下其中的優缺點。

注：因爲多數繼承都依賴於原型及原型鏈，所以當再依賴於其他方式時，我就以這個方式來命名這個繼承方式，這樣看起來就不會那麼複雜。

1. 基於構造函數方式

我們先定義三個構造函數：

// 構造函數A
function A() {
    this.name = 'A';
    this.say = function() {
        return this.name;
    };
};
// 構造函數B
function B() {
    this.name = 'B';
};
// 構造函數C
function C(width, height) {
    this.name = 'C';
    this.width = width;
    this.height = height;
    this.getArea = function() {
        return this.width * this.height;
    };
};

下面我們試試繼承：

B.prototype = new A();
C.prototype = new B();

上述是不是有點熟悉，是不是就是前面所提的原型鏈的概念：B構造函數的原型被賦上A構造函數的實例對象，然後C的原型又被賦上B構造函數的實例對象。

然後我們用C構造函數來創建一個實例對象：

let c1 = new C(2, 6);
console.log(c1);   // {name: "C", width: 2, height: 6, getArea: ƒ}
console.log(c1.name);  // 'C'
console.log(c1.getArea()); // 12
console.log(c1.say());  // 'C'

c1居然有say方法了，可喜可賀，它是怎麼做到的？讓我們來捋捋這個過程：

• ①首先C新建了一個"空"對象；
• ②然後this指向這個"空"對象；
• ③c1.proto指向C.prototype;
• ④給this對象賦值，這樣就有了name、width、height、getArea這四個自身屬性；
• ⑤返回this對象，此時我們就得到了c1實例對象；
• ⑥然後打印console.log(c1)和console.log(c1.name)，console.log(c1.getArea())都好理解；
• ⑦接着console.log(c1.say())，這就得去找say方法了，js引擎先在c1身上找，沒找到，然後c1.__proto__這個神祕鏈接是指向C構造函數的原型的，然後就去C.prototype上找，然後我們是寫有C.prototype = new B()的，也就是說是去B構造函數的實例對象上找，還是沒有，那繼續，又通過new B().__proto__去B的原型上找，然後我們是寫有B.prototype = new A();，那就是去A所創建的實例對象上找，沒有，那就又跑去A構造函數的原型上找，OK！找到！

這個過程就相當於這樣：
c1 —→ C.prototype —→ new B() —→ B.prototype —→ new A() —→ A.prototype

這就是上述的一個基於構造函數方式的繼承過程，其實就是一個查找過程，但是大家有沒有發現什麼？

上述方式存在兩個問題：第一個問題就是constructor的指向。

本來B.prototype中的constructor指向好好的，是指向B的，但現在B.prototype完全被new A()給替換了，那現在的B.prototype.constructor是指向誰的？我們看看：

console.log(B.prototype.constructor);  // ƒ A() {}
let b1 = new B();
console.log(b1.constructor);   // ƒ A() {}

此時我們發現不僅是B.prototype.constructor指向A，連b1也是如此，別忘了b1中的constructor屬性也是由B.prototype所共享的，所以老大（B）改變了，小弟(b1)當然也會跟着動態改變。

但現在它們爲什麼是指向A的呢？因爲B.prototype被替換爲了new A()，那new A()裏有什麼？我們再把B.prototype和new A()形象化來表示一下：

A = {
    prototype：{
        constructor: A
    }
};

new A() = {
    name: 'A',
    say: function() {
        return this.name;
    },
    constructor: A       // 由__proto__的指向所共享得到的
}

B = {
    prototype：{
        constructor: B
    }
};

// 這時把B.prototype換爲new A()，那就變成了這樣：
B = {
    prototype：{
        name: 'A',
        say: function() {
            return this.name;
        },
        constructor: A   // 所以指向就變成了A
    }
};

所以我們要手動修正B.prototype.constructor的指向，同理C.prototype.constructor的指向也是如此：

B.prototype = new A();
B.prototype.constructor = B;
C.prototype = new B();
C.prototype.constructor = C;

第一個問題解決了，到第二個問題：效率的問題。

當我們用某一個構造函數創建對象時，其屬性就會被添加到this中去。並且當別添加的屬性實際上是不會隨着實例改變時，這種做法會顯得沒有效率。例如在上面的實例中，A構造函數是這樣定義的：

function A() {
    this.name = 'A';
    this.say = function() {
        return this.name;
    };
};

這種實現意味着我們用new A()創建的每個實例都會擁有一個全新的name屬性和say屬性，並在內存中擁有獨立的存儲空間。所以我們應該考慮把這些屬性放到原型上，讓它們實現共享：

// 構造函數A
function A() {};
A.prototype.name = 'A';
A.prototype.say = function() {
    return this.name;
};

// 構造函數B
function B() {};
B.prototype.name = 'B';

// 構造函數C
function C(width, height) {  // 此處的width和height屬性是隨參數變化的，所以就不需要改爲共享屬性
    this.width = width;
    this.height = height;
};
C.prototype.name = 'C';
C.prototype.getArea = function() {
    return this.width * this.height;
};

這樣一來，構造函數所創建的實例中一些屬性就不再是私有屬性了，而是在原型中能共享的屬性，現在我們來試試：

let test1 = new A();
let test2 = new A();
console.log(test1.say === test2.say);  // true 沒改爲共享屬性前，它們是不相等的

雖然這樣做通常更有效率，但也只是針對實例中不可變屬性而言的，所以在定義構造函數時我們也要考慮哪些屬性適合共享，哪些適合私有。

2. 基於原型的方式

正如上面所做的，處於效率考慮，我們應當儘可能的將一些可重用的屬性和方法添加到原型中去，這樣的話我們僅僅依靠原型就可以完成繼承關係的構建了，由於原型上的屬性都是可重用的，這也意味着從原型上繼承比在實例上繼承要好得多，而且既然需要繼承的屬性都放在了原型上，又何必生成實例降低效率，然後又從所生成的實例中繼承不需要的私有屬性呢？所以我們直接拋棄實例，從原型上繼承：

B.prototype = A.prototype;
B.prototype.constructor = B;
C.prototype = B.prototype;
C.prototype.constructor = C;

嗯，這樣感覺效率高多了，也比較養眼，然後我們試試效果：

let c2 = new C();
console.log(c2.say());  // 'A'

(⊙o⊙)…不是應該打印出C的嗎？怎麼和我內心的小完美不太一樣？

想必大家應該都看出來了，上面的繼承方式其實就相當於A、B、C全都共享了A的原型，那就造成了引用問題，要是C的原型屬性修改了，那A和B的原型屬性豈不是都被修改了？想想就委屈，小弟居然管起大哥來了。

有沒有兩全其美的辦法，我又要效率，又不想委屈，啪！把這兩個方法結合起來不就行了嗎？！

3. 結合構造函數方式和原型的方式

我既想快，又不想被小弟管，搞個第三者來解決怎麼樣？（怎麼感覺聽起來怪怪的）。我們在它們中間使用一個臨時構造函數（所以也可稱爲臨時構造法）來做個橋樑，把小弟管大哥的關係斷掉（腿打斷），然後大家又可以高效率的合作：

let X = function() {};   // 新建一個"空"屬性的構造函數
X.prototype = A.prototype;  // 將X的原型指向A的原型
B.prototype = new X();  // B的原型指向X創建的實例對象
B.prototype.constructor = B;  // 記得修正指向

// 同上
let Y = function() {};  
Y.prototype = B.prototype;
C.prototype = new Y();
C.prototype.constructor = C;

現在試試效果怎麼樣：

let c3 = new C;
console.log(c3.say());  // A

穩！這樣我們既不是直接繼承實例上的屬性，而是繼承原型所共享的屬性，而且還能通過X和Y這兩個"空"屬性構造函數來把A和B上的非共享屬性過濾掉（因爲new X()比起new A()所生成的實例，因爲X是空的，所以不會生成的對象不會存在私有屬性，但是new A()可能會存在私有屬性，既然是私有屬性，所以也就是不需要被繼承，所以new A()會存在效率問題和多出不需要的繼承屬性）。

4. 基於對象的方式

這種基於對象的方式其實包括幾種方式，因爲都和對象相關，所以我就統稱爲對象方式了，下面一一介紹：

①以接收對象的方式

function create(o) {  // o是所要繼承的父對象
    function F() {};
    F.prototype = o;
    return new F();  // 返回一個實例對象
};
let a = {
    name: 'better'
};
console.log(create(a).name);  // 'better'

這種方式是接受一個父對象後返回一個實例，進而達到繼承的效果，有沒有點似曾相識的感覺？這不就是低配版的Object.create()嗎？有興趣的可以多去了解了解。所以這個方式其實也應該稱爲"原型繼承法"，因爲也是以修改原型爲基礎的，但又和對象相關，所以我就把它歸爲對象方式了，這樣比較好分類。

②以拷貝對象屬性的方式

// 直接將父原型的屬性拷貝過來，好處是Child.prototype.constructor沒被重置，但這種方式僅適用於只包含基本數據類型的對象，且父對象會覆蓋子對象的同名屬性
function extend(Child, Parent) {   // Child, Parent都爲構造函數
    let c = Child.prototype;
    let p = Parent.prototype;
    for (let i in p) {
        c[i] = p[i];
    }
};

// 這種直接拷貝屬性的方式簡單粗暴，直接複製傳入的對象屬性，但還是存在引用類型的問題
function extendCopy(p) {   // p是被繼承的對象
    let c = {};
    for (let i in p) {
        c[i] = p[i];
    }
    return c;
};

// 上面的extendCopy可稱爲淺拷貝，沒有解決引用類型的問題，現在我們使用深拷貝，這樣就解決了引用類型屬性的問題，因爲不管你有多少引用類型，全都一個個拷過來
function deepCopy(p, c) {  // c和p都是對象
    c = c || {};
    for (let i in p) {
        if (p.hasOwnProperty[i]) {   // 排除繼承屬性
            if (typeof p[i] === 'object') {  // 解決引用類型
                c[i] = Array.isArray(p[i]) ? [] : {};
                deepCopy[p[i], c[i]];
            } else {
                c[i] = p[i];
            }
        }
    }
    return c;
}

③拷貝多對象屬性的方式

// 這種方式就可以一次拷貝多個對象屬性，也稱爲多重繼承
function multi() {
    let n = {},
    stuff,
    j = 0,
    len = arguments.length;
    for (j = 0; j < len; j++) {
        stuff = arguments[j];
        for (let i in stuff) {
            if (stuff.hasOwnProperty(i)) {
                n[i] = stuff[i];
            }
        }
    }
    return n
};

④吸收對象屬性並擴展的方式

這種方式其實應該叫做"寄生式繼承"，這名字乍看很抽象，其實也就那麼回事，所以也把它分到對象方式裏：

// 其實也就是在創建對象的函數中吸收了其它對象的屬性（寄生獸把別人的xx吸走），然後對其擴展並返回
let parent = {
    name: 'parent',
    toString: function() {
        return this.name;
    }
};
function raise() {
    let that = create(parent);  // 使用前面我們寫過的create函數
    that.other = 'Once in a blue moon!'; // 今天學的，醜顯唄一下
    return that;
}

和對象相關的方式是不是有點多？但其實也都是圍繞着對象屬性的，理解這點就好理解了，下面繼續。

5. 構造函數借用法

這個方式其實也可歸爲構造函數方式，但比較溜，所以單獨拎出來溜溜（這是最後一個了，我保證）。

我們再把之前定義的老函數A拿出來炒炒：

// 構造函數A
function A() {
    this.name = 'A';
};
A.prototype.say = function() {
    return this.name;
};

// 構造函數D
function D() {
    A.apply(this, arguments);  // 這裏就相當於借用A構造函數把A中屬性創建給了D，即name和say屬性
};
D.prototype = new A();  // 這裏負責拿到A原型上的屬性

這樣兩個步驟是不是就把A的自身屬性和原型屬性都搞定了？簡單完美！

等等，看起來好像有點不對，A.apply(this, arguments)已經完美的把A自身屬性變爲了D的自身屬性，但是D.prototype = new A()又把A的自身屬性繼承了一次，真是多此一舉，既然我們只是單純的想要原型上的屬性，那直接拷貝不就完事了嗎？

// 構造函數A
function A() {
    this.name = 'A';
};
A.prototype.say = function() {
    return this.name;
};

// 之前定義的屬性拷貝函數
function extend2(Child, Parent) {
    let c = Child.prototype;
    let p = Parent.prototype;
    for (let i in p) {
        c[i] = p[i];
    }
};

// 構造函數D
function D() {
    A.apply(this, arguments);  // 這裏就相當於借用A構造函數把A中屬性創建給了D，即name和say屬性
};
extend2(D, A);  // 這裏就直接把A原型的屬性拷貝給了D原型

let d1 = new D();
console.log(d1.name);  // 'A'
console.log(d1.__proto__.name)  // undefined 這就說明了name屬性是新建的，而不是繼承得到的

(⊙o⊙)…，其實還有其它的繼承方法，還是不寫了，怕被打，但其實來來去去就是基於原型、構造函數、對象這幾種方式搞來搞去，我個人就是這麼給它們分類的，畢竟七秒記憶放不下，囧。

最後

寫到這裏，終於嚥下了最後一口氣，呸，鬆了一口氣。也感謝你看到了最後，希望對你有所幫助，有寫得不對的地方還請多多指教，順口廣告來一波：大家好！我是BetterMan, to be better, to be man, better關注BetterMan!

github源碼
掘金
博客園