開篇
之前對js中的原型鏈和原型對象有所了解,每當(dāng)別人問我什么是原型鏈和原型對象時致稀,我總是用很官方(其實自己不懂)的解釋去描述澡匪。有一句話說的好:如果你不能把一個很復(fù)雜的東西用最簡單的話語描述出來,那就說明你沒有真正的理解硫嘶。最近正在讀《Javascript高級程序設(shè)計》,書中對原型對象和原型鏈的描述讓我受益匪淺拭抬,下面僅用一個對比性的例子來說明部默。
我們經(jīng)常會這么寫
function Person () {
this.name = 'John';
}
var person = new Person();
Person.prototype.say = function() {
console.log('Hello,' + this.name);
};
person.say();//Hello,John
上述代碼非常簡單,Person原型對象定義了公共的say方法造虎,雖然此舉在構(gòu)造實例之后出現(xiàn)傅蹂,但因為原型方法在調(diào)用之前已經(jīng)聲明,因此之后的每個實例將都擁有該方法算凿。從這個簡單的例子里份蝴,我們可以得出:
原型對象的用途是為每個實例對象存儲共享的方法和屬性,它僅僅是一個普通對象而已氓轰。并且所有的實例是共享同一個原型對象婚夫,因此有別于實例方法或?qū)傩裕蛯ο髢H有一份署鸡。
所有就會有如下等式成立:
person.say == new Person().say
可能我們也會這么寫
function Person () {
this.name = 'John';
}
var person = new Person();
Person.prototype = {
say: function() {
console.log('Hello,' + this.name);
}
};
person.say();//person.say is not a function
很不幸案糙,person.say方法沒有找到,所以報錯了靴庆。其實這樣寫的初衷是好的:因為如果想在原型對象上添加更多的屬性和方法时捌,我們不得不每次都要寫一行Person.prototype,還不如提煉成一個Object來的直接。但是此例子巧就巧在構(gòu)造實例對象操作是在添加原型方法之前炉抒,這樣就會造成一個問題:
當(dāng)var person = new Person()
時奢讨,Person.prototype為:Person {}
(當(dāng)然了,內(nèi)部還有constructor屬性),即Person.prototype指向一個空的對象{}焰薄。而對于實例person而言拿诸,其內(nèi)部有一個原型鏈指針proto,該指針指向了Person.prototype指向的對象,即{}塞茅。接下來重置了Person的原型對象佳镜,使其指向了另外一個對象,即
Object {say: function}
,
這時person.proto的指向還是沒有變凡桥,它指向的{}對象里面是沒有say方法的,因為報錯蚀同。
從這個現(xiàn)象我們可以得出:
在js中缅刽,對象在調(diào)用一個方法時會首先在自身里尋找是否有該方法,若沒有蠢络,則去原型鏈上去尋找衰猛,依次層層遞進(jìn),這里的原型鏈就是實例對象的__proto__屬性
刹孔。
若想讓上述例子成功運(yùn)行啡省,最簡單有效的方法就是交換構(gòu)造對象和重置原型對象的順序,即:
function Person () {
this.name = 'John';
}
Person.prototype = {
say: function() {
console.log('Hello,' + this.name);
}
};
var person = new Person();
person.say();//person.say is not a function
一張圖讓你秒懂原型鏈
其實,只需要明白原型對象的結(jié)構(gòu)即可:
Function.prototype = {
constructor : Function,
__proto__ : parent prototype,
some prototype properties: ...
};
總結(jié):函數(shù)的原型對象constructor默認(rèn)指向函數(shù)本身卦睹,原型對象除了有原型屬性外畦戒,為了實現(xiàn)繼承,還有一個原型鏈指針__proto__结序,該指針指向上一層的原型對象障斋,而上一層的原型對象的結(jié)構(gòu)依然類似,這樣利用__proto__一直指向Object的原型對象上徐鹤,而Object的原型對象用Object.prototype.__proto__ = null表示原型鏈的最頂端垃环,如此變形成了javascript的原型鏈繼承,同時也解釋了為什么所有的javascript對象都具有Object的基本方法返敬。
注:本文與Github同步
GIthub文章請戳