JavaScript中的原型鏈和繼承

標籤：方式   net   www.   影響   頁面   kkk   http   隱藏   寫法   

理解原型鏈

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

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

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

function Human() {}var h1 = new Human()var h2 = new Human()// h1和h2都是是由Human函數建立出來的對象（稱為Human的執行個體對象），所以：h1.__proto__ = Human.prototypeh2.__proto__ = Human.prototype// Human.prototype是一個對象（且稱為原型對象吧），因此可以給它添加一些屬性或者方法，比如：Human.prototype.legs = 2Human.prototype.sleep = function() {  console.log(‘sleeping....‘)}

這邊又規定了：

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

// 不難得出結論：h1.legs === 2 // trueh2.legs === 2 // trueh1.sleep() // sleeping....h2.sleep() // sleeping....

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

實現繼承

再看另外一個建構函式：

function Coder() {}// 如果在這裡把Human的原型賦給Coder的原型Coder.prototype = Human.prototype// 接著再添加一些Coder自己的原型方法和屬性Coder.prototype.age = 24Coder.prototype.work = function() {  console.log(‘write code‘)}// 建立一個Coder對象var c1 = new Coder()// 不難得出c1.age === Coder.prototype.age // true 24c1.work === Code.prototype.work // truec1.legs === Human.prototype.legs // true 2c1.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 種繼承方式

JavaScript中的原型鏈和繼承