原文出處 原創作者: abruzzi
原文圖文并茂，很好的說明了原型鏈的原理，在這里感謝原文作者把文章寫的那么通俗易懂。

原型對象

　　每個javascript對象都有一個原型對象，這個對象在不同的解釋器下的實現不同。比如在firefox下，每個對象都有一個隱藏的__proto__屬性，這個屬性就是“原型對象”的引用。

原型鏈

　　由于原型對象本身也是對象，根據上邊的定義，它也有自己的原型，而它自己的原型對象又可以有自己的原型，這樣就組成了一條鏈，這個就是原型鏈，JavaScritp引擎在訪問對象的屬性時，如果在對象本身中沒有找到，則會去原型鏈中查找，如果找到，直接返回值，如果整個鏈都遍歷且沒有找到屬性，則返回undefined.原型鏈一般實現為一個鏈表，這樣就可以按照一定的順序來查找。

示例1

var base = { name : "base", getInfo : function(){ return this.name; } } var ext1 = { id : 0, __proto__ : base } var ext2 = { id : 9, __proto__ : base } print(ext1.id); print(ext1.getInfo()); print(ext2.id); print(ext2.getInfo());

?結果

0 base 9 base

?圖1

　　可以看到，當執行ext1.id時，引擎在ext1對象本身中就找到了id屬性，因此返回其值0，當執行ext1.getInfo時，ext1對象中沒有找到，因此在其原型對象base中查找，找到之后，執行這個函數，得到輸出”base”。

我們將上例中的ext1對象稍加修改，為ext1對象加上name屬性：

示例2

var base = { name : "base", getInfo : function(){ return this.name; } } var ext1 = { id : 0, name : "ext1", __proto__ : base } print(ext1.id); print(ext1.getInfo());

?結果

0 ext1

　　這個運行效果同樣驗證了原型鏈的運行機制：從對象本身出發，沿著__proto__查找，直到找到屬性名稱相同的值(沒有找到，則返回undefined)。

我們對上例再做一點修改，來更好的演示原型鏈的工作方式：

示例3

var base = { name : "base", getInfo : function(){ return this.id + ":" + this.name; } } var ext1 = { id : 0, __proto__ : base } print(ext1.getInfo());

?結果

0:base

?　　應該注意的是，getInfo函數中的this表示原始的對象，而并非原型對象。上例中的id屬性來自于ext1對象，而name來自于base對象。這個特性的機制在10.3小節再做討論。如果對象沒有顯式的聲明自己的”__proto__”屬性，這個值默認的設置為Object.prototype,而Object.prototype的”__proto__”屬性的值為”null”，標志著原型鏈的終結。

構造器

　　我們在來討論一下構造器，除了上邊提到的直接操作對象的__proto__屬性的指向以外，JavaScript還支持構造器形式的對象創建。構造器會自動的為新創建的對象設置原型對象，此時的原型對象通過構造器的prototype屬性來引用。

我們以例子來說明，將Task函數作為構造器，然后創建兩個實例task1, task2：

示例4

function Task(id){ this.id = id; } Task.prototype.status = "STOPPED"; Task.prototype.execute = function(args){ return "execute task_"+this.id+"["+this.status+"]:"+args; } var task1 = new Task(1); var task2 = new Task(2); task1.status = "ACTIVE"; task2.status = "STARTING"; print(task1.execute("task1")); print(task2.execute("task2"));

?結果

execute task_1[ACTIVE]:task1 execute task_2[STARTING]:task2

?　　構造器會自動為task1,task2兩個對象設置原型對象Task.prototype，這個對象被Task(在此最為構造器)的prototype屬性引用，參看下圖中的箭頭指向。

圖2

　　由于Task本身仍舊是函數，因此其”__proto__”屬性為Function.prototype, 而內建的函數原型對象的”__proto__”屬性則為Object.prototype對象。最后Obejct.prototype的”__proto__”值為null。

轉載于:https://www.cnblogs.com/xqhppt/archive/2012/02/01/2334355.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Js 原型对象与原型链(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

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