原型 & 原型鏈

大家肯定都看過(guò)一些原型和原型鏈的總結(jié)的一個(gè)圖

相信不少同學(xué)看到這幅圖腦瓜子疼，有耐心的同學(xué)可能會(huì)從頭到尾捋一捋。而我們今天的起點(diǎn)并不是這幅圖，我們通過(guò)一些案例來(lái)一步步的實(shí)現(xiàn)這幅圖，這樣是不是就有點(diǎn)意思了啊

原型

prototype

function Person() {}

Person.prototype.name = "mick"

var person1 = new Person()
var person2 = new Person()

console.log(person1.name) // mick
console.log(person2.name) // mick

從案例中我們可以看到構(gòu)造函數(shù)Person有一個(gè)屬性是prototype。其實(shí)這個(gè)屬性指向了一個(gè)對(duì)象，這個(gè)對(duì)象正是調(diào)用構(gòu)造函數(shù)而創(chuàng)建的實(shí)例的原型，也就是person1和person2的原型。

那么什么是原型呢？

原型可以理解為：每一個(gè)JavaScript對(duì)象（null除外）在創(chuàng)建的時(shí)候都會(huì)與之關(guān)聯(lián)另一個(gè)對(duì)象，這個(gè)被關(guān)聯(lián)的對(duì)象就是我們所說(shuō)的原型，每一個(gè)對(duì)象都會(huì)從原型繼承屬性。所以我們可以來(lái)實(shí)現(xiàn)圖的第一步：

__proto__

function Person() {}

var person = new Person()
console.log(person.__proto__ === Person.prototype) // true

我們的實(shí)例person和 Person.prototype有什么關(guān)系呢？從案例中我們就可以得到答案了。

每一個(gè)JavaScript對(duì)象(除了null)都具有一個(gè)屬性叫__proto__,這個(gè)屬性會(huì)指向該對(duì)象的原型

接著我們繼續(xù)考慮一個(gè)問(wèn)題。既然實(shí)例對(duì)象和構(gòu)造函數(shù)都可以指向原型，那么原型是否有屬性指向構(gòu)造函數(shù)或者實(shí)例呢？

constructor

指向?qū)嵗牡故菦](méi)有，因?yàn)橐粋€(gè)構(gòu)造函數(shù)可以生成多個(gè)實(shí)例，但是原型指向構(gòu)造函數(shù)是有的，那就是constructor。每一個(gè)原型都有一個(gè)constructor屬性指向關(guān)聯(lián)的構(gòu)造函數(shù)。

function Person() {}

console.log(Person === Person.prototype.constructor) // true

這里我們可以得到下面的總結(jié)

function Person() {
}

var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

原型鏈

當(dāng)我們讀取實(shí)例上的一個(gè)屬性的時(shí)候，如果找不到，就會(huì)查找與實(shí)例關(guān)聯(lián)的原型中的屬性，如果還是找不到，就去找原型的原型，一直找到最頂層為止。

function Person() {}

Person.prototype.name = "mick"

var person = new Person()
person.name = "randy"
console.log(person.name) // randy

delete person.name
console.log(person.name) // mick

首先我們我們給實(shí)例對(duì)象person添加屬性name，結(jié)果肯定是randy。但是當(dāng)我們刪除了name屬性的時(shí)候，那么在person的實(shí)例上就找不到name屬性了，那就會(huì)從person實(shí)例的原型查找，也就是person.__proto__，也就是Person.prototype查找，找到了mick。

那如果Person.prototype也沒(méi)找到呢？

原型的原型

var obj = new Object()
obj.name = "mick"
console.log(obj.mick) // mick

原型對(duì)象就是通過(guò)Object構(gòu)造函數(shù)生成的，我們繼續(xù)依據(jù)上面的問(wèn)題來(lái)說(shuō)，實(shí)例的__proto__指向構(gòu)造函數(shù)的prototype

這個(gè)圖一出來(lái)是不是感覺(jué)我們快完成了呢？其實(shí)還差一丟丟。我們可以通過(guò)原型一層層的向上找，總要有個(gè)盡頭吧。

console.log(Object.prototype.__proto__ === null) // true

null代表了沒(méi)有對(duì)象，即此處不應(yīng)該有值。這下我們可以完整的畫(huà)圖了

到此這篇關(guān)于一文帶你深入了解JavaScript中的原型&原型鏈的文章就介紹到這了,更多相關(guān)JavaScript原型 原型鏈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論