2019-9-14 seo達(dá)人
開(kāi)篇
之前對(duì)js中的原型鏈和原型對(duì)象有所了解,每當(dāng)別人問(wèn)我什么是原型鏈和原型對(duì)象時(shí),我總是用很官方(其實(shí)自己不懂)的解釋去描述。有一句話(huà)說(shuō)的好:如果你不能把一個(gè)很復(fù)雜的東西用最簡(jiǎn)單的話(huà)語(yǔ)描述出來(lái),那就說(shuō)明你沒(méi)有真正的理解。最近正在讀《Javascript高級(jí)程序設(shè)計(jì)》,書(shū)中對(duì)原型對(duì)象和原型鏈的描述讓我受益匪淺,下面僅用一個(gè)對(duì)比性的例子來(lái)說(shuō)明。
我們經(jīng)常會(huì)這么寫(xiě)
function Person () {
this.name = 'John';
}
var person = new Person();
Person.prototype.say = function() {
console.log('Hello,' + this.name);
};
person.say();//Hello,John
1
2
3
4
5
6
7
8
上述代碼非常簡(jiǎn)單,Person原型對(duì)象定義了公共的say方法,雖然此舉在構(gòu)造實(shí)例之后出現(xiàn),但因?yàn)樵头椒ㄔ谡{(diào)用之前已經(jīng)聲明,因此之后的每個(gè)實(shí)例將都擁有該方法。從這個(gè)簡(jiǎn)單的例子里,我們可以得出:
原型對(duì)象的用途是為每個(gè)實(shí)例對(duì)象存儲(chǔ)共享的方法和屬性,它僅僅是一個(gè)普通對(duì)象而已。并且所有的實(shí)例是共享同一個(gè)原型對(duì)象,因此有別于實(shí)例方法或?qū)傩裕蛯?duì)象僅有一份。
所以就會(huì)有如下等式成立:
person.say == new Person().say
1
可能我們也會(huì)這么寫(xiě)
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
1
2
3
4
5
6
7
8
9
10
很不幸,person.say方法沒(méi)有找到,所以報(bào)錯(cuò)了。其實(shí)這樣寫(xiě)的初衷是好的:因?yàn)槿绻朐谠蛯?duì)象上添加更多的屬性和方法,我們不得不每次都要寫(xiě)一行Person.prototype,還不如提煉成一個(gè)Object來(lái)的直接。但是此例子巧就巧在構(gòu)造實(shí)例對(duì)象操作是在添加原型方法之前,這樣就會(huì)造成一個(gè)問(wèn)題:
當(dāng)var person = new Person()時(shí),Person.prototype為:Person {} (當(dāng)然了,內(nèi)部還有constructor屬性),即Person.prototype指向一個(gè)空的對(duì)象{}。而對(duì)于實(shí)例person而言,其內(nèi)部有一個(gè)原型鏈指針proto,該指針指向了Person.prototype指向的對(duì)象,即{}。接下來(lái)重置了Person的原型對(duì)象,使其指向了另外一個(gè)對(duì)象,即
Object {say: function}
1
這時(shí)person.proto的指向還是沒(méi)有變,它指向的{}對(duì)象里面是沒(méi)有say方法的,因?yàn)榇藞?bào)錯(cuò)。
從這個(gè)現(xiàn)象我們可以得出:
在js中,對(duì)象在調(diào)用一個(gè)方法時(shí)會(huì)首先在自身里尋找是否有該方法,若沒(méi)有,則去原型鏈上去尋找,依次層層遞進(jìn),這里的原型鏈就是實(shí)例對(duì)象的proto屬性。
若想讓上述例子成功運(yùn)行,最簡(jiǎn)單有效的方法就是交換構(gòu)造對(duì)象和重置原型對(duì)象的順序,即:
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
1
2
3
4
5
6
7
8
9
10
一張圖讓你秒懂原型鏈
其實(shí),只需要明白原型對(duì)象的結(jié)構(gòu)即可:
Function.prototype = {
constructor : Function,
proto : parent prototype,
some prototype properties: ...
};
1
2
3
4
5
總結(jié):
函數(shù)的原型對(duì)象constructor默認(rèn)指向函數(shù)本身,原型對(duì)象除了有原型屬性外,為了實(shí)現(xiàn)繼承,還有一個(gè)原型鏈指針proto,該指針指向上一層的原型對(duì)象,而上一層的原型對(duì)象的結(jié)構(gòu)依然類(lèi)似,這樣利用proto一直指向Object的原型對(duì)象上,而Object的原型對(duì)象用Object.prototype.proto = null表示原型鏈的最頂端,如此變形成了javascript的原型鏈繼承,同時(shí)也解釋了為什么所有的javascript對(duì)象都具有Object的基本方法。
Blog同步
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com