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 種繼承方式