原型 & 原型鏈

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

相信不少同學看到這幅圖腦瓜子疼，有耐心的同學可能會從頭到尾捋一捋。而我們今天的起點并不是這幅圖，我們通過一些案例來一步步的實現(xià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有一個屬性是prototype。其實這個屬性指向了一個對象，這個對象正是調(diào)用構(gòu)造函數(shù)而創(chuàng)建的實例的原型，也就是person1和person2的原型。

那么什么是原型呢？

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

__proto__

function Person() {}

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

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

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

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

constructor

指向?qū)嵗牡故菦]有，因為一個構(gòu)造函數(shù)可以生成多個實例，但是原型指向構(gòu)造函數(shù)是有的，那就是constructor。每一個原型都有一個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

原型鏈

當我們讀取實例上的一個屬性的時候，如果找不到，就會查找與實例關(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

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

那如果Person.prototype也沒找到呢？

原型的原型

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

原型對象就是通過Object構(gòu)造函數(shù)生成的，我們繼續(xù)依據(jù)上面的問題來說，實例的__proto__指向構(gòu)造函數(shù)的prototype

這個圖一出來是不是感覺我們快完成了呢？其實還差一丟丟。我們可以通過原型一層層的向上找，總要有個盡頭吧。

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

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

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

最新評論