JavaScript中的原型鏈和繼承

理解原型鏈

在 JavaScript 的世界中，函數是一等公民。

上面這句話在很多地方都看到過。用我自己的話來理解就是：函數既當爹又當媽。“當爹”是因為我們用函數去處理各種“粗活累活”（各種工具函數、頁面交互、業務邏輯等）；“當媽”是因為函數還會“生孩子”（創建對象）。

在 JavaScript 的世界中，每一個對象都有一個隱藏的__proto__屬性。這個屬性指向生成這個對象的構造函數的原型(prototype)。事實上，所有函數都有一個原型。考慮如下例子：

function Human() {}
var h1 = new Human()
var h2 = new Human()

// h1和h2都是是由Human函數創建出來的對象（稱為Human的實例對象），所以：
h1.__proto__ = Human.prototype
h2.__proto__ = Human.prototype

// Human.prototype是一個對象（且稱為原型對象吧），因此可以給它添加一些屬性或者方法，比如：
Human.prototype.legs = 2
Human.prototype.sleep = function() {
  console.log('sleeping....')
}

這邊又規定了：

所有實例對象都可以訪問到相應原型對象裡面的屬性和方法。（理解原型鏈的關鍵）

// 不難得出結論：
h1.legs === 2 // true
h2.legs === 2 // true

h1.sleep() // sleeping....
h2.sleep() // sleeping....

不要問我為什麼能訪問，我也不知道，因為下麵這個人就是這麼規定的。

實現繼承

再看另外一個構造函數：

function Coder() {}

// 如果在這裡把Human的原型賦給Coder的原型
Coder.prototype = Human.prototype

// 接著再添加一些Coder自己的原型方法和屬性
Coder.prototype.age = 24
Coder.prototype.work = function() {
  console.log('write code')
}

// 新建一個Coder對象
var c1 = new Coder()

// 不難得出
c1.age === Coder.prototype.age // true 24
c1.work === Code.prototype.work // true

c1.legs === Human.prototype.legs // true 2
c1.sleep === Human.prototype.sleep // true

jsfiddle

雖然把 Human 的原型直接賦給 Coder 的原型可以讓 Coder 的實例訪問到 Human 原型上的屬性和方法，但是如果想單獨修改 Coder 原型的話會影響到 Human 原型上的值，這顯然不是我們所期望的。

Coder.prototype.sleep = function() {
  console.log('still write code....')
}
// 修改了Coder的原型，但同時也會影響Human的原型
// 因此需要修改Coder.prototype的指向從而避免這個問題
Coder.prototype = h1 // h1是Human的一個實例

所以應該這樣寫：

Coder.prototype = new Human()
// 或者
Coder.prototype = Object.create(Human.prototype)
// 實際上這兩種寫法還是有一定的區別

從而實現了 JavaScript 最簡單的原型鏈式繼承。

不過這麼寫還是會有以下兩個缺陷：

• 父類構造函數中的引用類型的屬性（方法）是所有子類實例共用的，所以會出現改動一個實例的屬性（或方法）會影響所有實例的屬性（或方法）。

• 創建子類實例時，無法向父類構造函數傳參。

所以需要在子類構造函數內調用一下父類構造函數，並把子類的this綁定上去：

function Coder(arg) {
  Human.call(this, arg)
  // 接著再寫自身的屬性（方法）
}

這就相當於把父類構造函數在子類構造函數中重寫了一遍，也就不會出現【引用】問題了。上面就是構造函數繼承。

參考

重新理解 JS 的 6 種繼承方式