JS原型鏈

這篇文章是「深入ECMA-262-3」系列的一個概覽和摘要。每個部分都包含了對應章節的鏈接，所以你可以閱讀它們以便對其有更深的理解。

對象

ECMAScript做為一個高度抽象的面向對象語言，是通過對象來交互的。即使ECMAScript里邊也有基本類型，但是，當需要的時候，它們也會被轉換成對象。

一個對象就是一個屬性集合，并擁有一個獨立的prototype（原型）對象。這個prototype可以是一個對象或者null。*

讓我們看一個關于對象的基本例子。一個對象的prototype是以內部的[[Prototype]]屬性來引用的。但是，在示意圖里邊我們將會使用__<internal-property>__下劃線標記來替代兩個括號，對于prototype對象來說是：__proto__\。

對于以下代碼：

?

basic-object.png

這些prototype有什么用？讓我們以原型鏈（prototype chain）的概念來回答這個問題。

?

原型鏈

原型對象也是簡單的對象并且可以擁有它們自己的原型。如果一個原型對象的原型是一個非null的引用，那么以此類推，這就叫作原型鏈。

原型鏈是一個用來實現繼承和共享屬性的有限對象鏈。

考慮這么一個情況，我們擁有兩個對象，它們之間只有一小部分不同，其他部分都相同。顯然，對于一個設計良好的系統，我們將會重用相似的功能/代碼，而不是在每個單獨的對象中重復它。在基于類的系統中，這個代碼重用風格叫作類繼承－你把相似的功能放入類A中，然后類B和類C繼承類A，并且擁有它們自己的一些小的額外變動。

ECMAScript中沒有類的概念。但是，代碼重用的風格并沒有太多不同（盡管從某些方面來說比基于類（class-based）的方式要更加靈活）并且通過原型鏈來實現。這種繼承方式叫作委托繼承(delegation based inheritance)（或者，更貼近ECMAScript一些，叫作原型繼承(prototype based inheritance)）。

跟例子中的類A，B，C相似，在ECMAScript中你創建對象：a，b，c。于是，對象a中存儲對象b和c中通用的部分。然后b和c只存儲它們自身的額外屬性或者方法。

?

var a = { x: 10, calculate: function (z) {return this.x + this.y + z }}; var b = { y: 20, __proto__: a }; var c = { y: 30, __proto__: a }; // call the inherited method b.calculate(30); // 60 c.calculate(40); // 80

規則很簡單：如果一個屬性或者一個方法在對象自身中無法找到（也就是對象自身沒有一個那樣的屬性），然后它會嘗試在原型鏈中尋找這個屬性/方法。如果這個屬性在原型中沒有查找到，那么將會查找這個原型的原型，以此類推，遍歷整個原型鏈（當然這在類繼承中也是一樣的，當解析一個繼承的方法的時候－我們遍歷class鏈（ class chain））。第一個被查找到的同名屬性/方法會被使用。因此，一個被查找到的屬性叫作繼承屬性。如果在遍歷了整個原型鏈之后還是沒有查找到這個屬性的話，返回undefined值。

?

注意，繼承方法中所使用的this的值被設置為原始對象，而并不是在其中查找到這個方法的（原型）對象。也就是，在上面的例子中this.y取的是b和c中的值，而不是a中的值。但是，this.x是取的是a中的值，并且又一次通過原型鏈機制完成。

如果沒有明確為一個對象指定原型，那么它將會使用__proto__的默認值－Object.prototype。Object.prototype對象自身也有一個__proto__屬性，這是原型鏈的終點并且值為null。

下一張圖展示了對象a，b，c之間的繼承層級：

prototype-chain.png

注意： ES5標準化了一個實現原型繼承的可選方法，即使用Object.create函數：

var b = Object.create(a, {y: {value: 20}}); var c = Object.create(a, {y: {value: 30}});

你可以在對應的章節獲取到更多關于ES5新API的信息。 ES6標準化了 __proto__屬性，并且可以在對象初始化的時候使用它。

通常情況下需要對象擁有相同或者相似的狀態結構（也就是相同的屬性集合），賦以不同的狀態值。在這個情況下我們可能需要使用構造函數(constructorfunction)，其以指定的模式來創造對象。

構造函數

除了以指定模式創建對象之外，構造函數也做了另一個有用的事情－它自動地為新創建的對象設置一個原型對象。這個原型對象存儲在ConstructorFunction.prototype屬性中。

換句話說，我們可以使用構造函數來重寫上一個擁有對象b和對象c的例子。因此，對象a（一個原型對象）的角色由Foo.prototype來扮演：

// a constructor function function Foo(y) { this.y = y; } Foo.prototype.x = 10; Foo.prototype.calculate = function (z) {return this.x + this.y + z; };var b = new Foo(20); var c = new Foo(30); // 調用繼承方法 b.calculate(30); // 60 c.calculate(40); // 80 console.log( b.__proto__ === Foo.prototype) // true console.log(c.__proto__ === Foo.prototype) // true//同時 Foo.prototype 同時會創建一個特殊的屬性 constructor, b.constructor === Foo // true c.constructor === Foo, // true Foo.prototype.constructor === Foo // true b.calculate === b.__proto__.calculate // true b.__proto__.calculate === Foo.prototype.calculate // true

?

這個代碼可以表示為如下關系：

?

這張圖又一次說明了每個對象都有一個原型。構造函數Foo也有自己的__proto__，值為Function.prototype，Function.prototype也通過其__proto__屬性關聯到Object.prototype。因此，重申一下，Foo.prototype就是Foo的一個明確的屬性，指向對象b和對象c的原型。

?

正式來說，如果思考一下分類的概念（并且我們已經對Foo進行了分類），那么構造函數和原型對象合在一起可以叫作「類」。實際上，舉個例子，Python的第一級（first-class）動態類（dynamic classes）顯然是以同樣的屬性/方法處理方案來實現的。從這個角度來說，Python中的類就是ECMAScript使用的委托繼承的一個語法糖。

注意: 在ES6中「類」的概念被標準化了，并且實際上以一種構建在構造函數上面的語法糖來實現，就像上面描述的一樣。從這個角度來看原型鏈成為了類繼承的一種具體實現方式：

// ES6 class Foo {constructor(name) {this._name = name;}getName {return this._name;} } class Bar extends Foo {getName {return super.getName + ' Doe';} } var bar = newBar('John'); console.log(bar.getName); // John Doe

?

轉自JavaScript. The core.
http://www.yidianzixun.com/n/0CjThYEE?s=9&appid=xiaomi&ver=3.5.5&utk=03smxf0g

轉載于:https://www.cnblogs.com/jiuyi/p/5331592.html

總結

以上是生活随笔為你收集整理的JS 原型链图形详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。