Javascript重溫OOP之原型與原型鏈

lindroid 發(fā)布于2019-08-21 10:57 / 3278人閱讀

摘要：在構(gòu)造函數(shù)中的中定義的屬性和方法，會(huì)被創(chuàng)建的對(duì)象所繼承下來。從上面的輸出結(jié)果看出，指向了其構(gòu)造函數(shù)的，而本身也是一個(gè)對(duì)象，其內(nèi)部也有屬性，其指向的是直到最后指向，這條原型鏈才結(jié)束。和都指向，說明原型鏈到終止。

prototype原型對(duì)象

每個(gè)函數(shù)都有一個(gè)默認(rèn)的prototype屬性，其實(shí)際上還是一個(gè)對(duì)象，如果被用在繼承中，姑且叫做原型對(duì)象。

在構(gòu)造函數(shù)中的prototype中定義的屬性和方法，會(huì)被創(chuàng)建的對(duì)象所繼承下來。舉個(gè)栗子：

function F(){}
F.prototype.work = function(){
    console.log("F is working..");
};
var f = new F();
f.work(); // F is working..

當(dāng)你創(chuàng)建函數(shù)時(shí)，JS會(huì)為這個(gè)函數(shù)自動(dòng)添加 prototype 屬性，值是空對(duì)象。而一旦你把這個(gè)函數(shù)當(dāng)作構(gòu)造函數(shù)（ constructor ）調(diào)用（即通過 new 關(guān)鍵字調(diào)用），那么JS就會(huì)幫你創(chuàng)建該構(gòu)造函數(shù)的實(shí)例，實(shí)例繼承構(gòu)造函數(shù) prototype 的所有屬性和方法（實(shí)例通過設(shè)置自己的 __proto__ 指向承構(gòu)造函數(shù)的 prototype 來實(shí)現(xiàn)這種繼承）。

神秘的__proto__

JS的對(duì)象中都包含了一個(gè)__proto__屬性，其指向的是創(chuàng)建該對(duì)象時(shí)的構(gòu)造函數(shù)的原型對(duì)象prototype。

從上面的輸出結(jié)果看出，f.__proto__指向了其構(gòu)造函數(shù)F的prototype，而F.prototype本身也是一個(gè)對(duì)象，其內(nèi)部也有__proto__屬性，其指向的是Object.prototype,直到最后Object.prototype指向null，這條原型鏈才結(jié)束。

因此，__proto__這個(gè)神秘的屬性才是原型鏈形成的真正原因。

原型鏈

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

下面是一張經(jīng)典的圖：

從上圖看出：

Object.prototype是頂級(jí)對(duì)象，所有對(duì)象都繼承自它。

Function 繼承 Function 本身， Function.prototype 繼承 Object.prototype 。

Function.prototype 和 Function.__proto__ 都指向 Function.prototype

Object.prototype.__proto__ === null ，說明原型鏈到 Object.prototype 終止。