JavaScript中的原型鏈;prototype與__proto__的關(guān)系

1、

說到prototype,就不得不先說下new的過程。我們先看看這樣一段代碼:

let Person = function () { };

let p = new Person();

很簡單的一段代碼,我們來看看這個new究竟做了什么?我們可以把new的過程拆分成以下三步:

<1>?let p={};?也就是說,初始化一個對象p。

<2>?p.__proto__=Person.prototype;

<3>?Person.call(p);也就是說構(gòu)造p,也可以稱之為初始化p。

關(guān)鍵在于第二步,我們來證明一下:

let Person = function () { };

let p = new Person();

console.log(p.__proto__ === Person.prototype);

這段代碼會返回true。說明我們步驟2的正確。

2、

那么__proto__是什么?我們在這里簡單地說下。每個對象都會在其內(nèi)部初始化一個屬性,就是__proto__,當我們訪問一個對象的屬性?時,如果這個對象內(nèi)部不存在這個屬性,那么他就會去__proto__里找這個屬性,這個__proto__又會有自己的__proto__,于是就這樣?一直找下去,也就是我們平時所說的原型鏈的概念。

按照標準,__proto__是不對外公開的,也就是說是個私有屬性,但是Firefox的引擎將他暴露了出來成為了一個共有的屬性,我們可以對外訪問和設(shè)置。

好,概念說清了,讓我們看一下下面這些代碼:

let Person = function () { };

Person.prototype.Say = function () {

????alert("Person say");

}

let p = new Person();

p.Say();

這段代碼很簡單,相信每個人都這樣寫過,那就讓我們看下為什么p可以訪問Person的Say。

首先let p=new?Person();可以得出p.__proto__=Person.prototype。那么當我們調(diào)用p.Say()時,首先p中沒有Say這個屬性,?于是,他就需要到他的__proto__中去找,也就是Person.prototype,而我們在上面定義了?Person.prototype.Say=function(){};?于是,就找到了這個方法。

接下來,我們看個更復(fù)雜的。

var Person = function () { };

Person.prototype.Say = function () {

????console.log("Person say");

}

Person.prototype.Salary = 50000;

let Programmer = function () { };

Programmer.prototype = new Person();

Programmer.prototype.WriteCode = function () {

? ? console.log("programmer writes code");

};

Programmer.prototype.Salary = 500;

let p = new Programmer();

p.Say();

p.WriteCode();

console.log(p.Salary);

我們來做這樣的推導(dǎo):

let p=new?Programmer()

可以得出:

p.__proto__=Programmer.prototype;

而在上面我們指定了

Programmer.prototype=new?Person();

我們來這樣拆分,

let p1=new?Person();

Programmer.prototype=p1;

那么

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根據(jù)上面得到p.__proto__=Programmer.prototype??梢缘玫絧.__proto__.__proto__=Person.prototype。

好,算清楚了之后我們來看上面的結(jié)果,p.Say()。由于p沒有Say這個屬性,于是去p.__proto__,也就是?Programmer.prototype,也就是p1中去找,由于p1中也沒有Say,那就去p.__proto__.__proto__,也就是?Person.prototype中去找,于是就找到了console.log(“Person?say”)的方法。

這也就是原型鏈的實現(xiàn)原理。

????????最后,其實prototype只是一個假象,他在實現(xiàn)原型鏈中只是起到了一個輔助作用,換句話說,他只是在new的時候有著一定的價值,而原型鏈的本質(zhì),其實在于__proto__。

引用??http://rockyuse.iteye.com/blog/1426510

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容