理解js中的原型鏈,prototype與__proto__的關系
理解js中的原型鏈,prototype與__proto__的關系
說到prototype,就不得不先說下new的過程。
我們先看看這樣一段代碼:
1 |
<script type= "text/javascript" > |
2 |
var Person = function () { }; |
3 |
var p = new Person(); |
4 |
</script> |
很簡單的一段代碼,我們來看看這個new究竟做了什麽?我們可以把new的過程拆分成以下三步:
<1> var p={}; 也就是說,初始化一個對象p。
<2> p.__proto__=Person.prototype;
<3> Person.call(p);也就是說構造p,也可以稱之為初始化p。
關鍵在於第二步,我們來證明一下:
1 |
<script type= "text/javascript" > |
2 |
var Person = function () { }; |
3 |
var p = new Person(); |
4 |
alert(p.__proto__ === Person.prototype); |
5 |
</script> |
這段代碼會返回true。說明我們步驟2的正確。
那麽__proto__是什麽?我們在這裏簡單地說下。每個對象都會在其內部初始化一個屬性,就是__proto__,當我們訪問一個對象的屬性 時,如果這個對象內部不存在這個屬性,那麽他就會去__proto__裏找這個屬性,這個__proto__又會有自己的__proto__,於是就這樣 一直找下去,也就是我們平時所說的原型鏈的概念。
按照標準,__proto__是不對外公開的,也就是說是個私有屬性,但是Firefox的引擎將他暴露了出來成為了一個共有的屬性,我們可以對外訪問和設置。
好,概念說清了,讓我們看一下下面這些代碼:
1 |
<script type= "text/javascript" > |
2 |
var Person = function () { }; |
3 |
Person.prototype.Say = function () { |
4 |
alert( "Person say" ); |
5 |
} |
6 |
var p = new Person(); |
7 |
p.Say(); |
8 |
</script> |
這段代碼很簡單,相信每個人都這樣寫過,那就讓我們看下為什麽p可以訪問Person的Say。
首先var p=new Person();可以得出p.__proto__=Person.prototype。那麽當我們調用p.Say()時,首先p中沒有Say這個屬性, 於是,他就需要到他的__proto__中去找,也就是Person.prototype,而我們在上面定義了 Person.prototype.Say=function(){}; 於是,就找到了這個方法。
好,接下來,讓我們看個更復雜的。
01 |
<script type= "text/javascript" > |
02 |
var Person = function () { }; |
03 |
Person.prototype.Say = function () { |
04 |
alert( "Person say" ); |
05 |
} |
06 |
Person.prototype.Salary = 50000; |
07 |
var Programmer = function () { }; |
08 |
Programmer.prototype = new Person(); |
09 |
Programmer.prototype.WriteCode = function () { |
10 |
alert( "programmer writes code" ); |
11 |
}; |
12 |
Programmer.prototype.Salary = 500; |
13 |
var p = new Programmer(); |
14 |
p.Say(); |
15 |
p.WriteCode(); |
16 |
alert(p.Salary); |
17 |
</script> |
我們來做這樣的推導:
var p=new Programmer()可以得出p.__proto__=Programmer.prototype;
而在上面我們指定了Programmer.prototype=new Person();我們來這樣拆分,var p1=new Person();Programmer.prototype=p1;那麽:
p1.__proto__=Person.prototype;
Programmer.prototype.__proto__=Person.prototype;
由根據上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。
好,算清楚了之後我們來看上面的結果,p.Say()。由於p沒有Say這個屬性,於是去p.__proto__,也就是 Programmer.prototype,也就是p1中去找,由於p1中也沒有Say,那就去p.__proto__.__proto__,也就是 Person.prototype中去找,於是就找到了alert(“Person say”)的方法。
其余的也都是同樣的道理。
這也就是原型鏈的實現原理。
最後,其實prototype只是一個假象,他在實現原型鏈中只是起到了一個輔助作用,換句話說,他只是在new的時候有著一定的價值,而原型鏈的本質,其實在於__proto__!
理解js中的原型鏈,prototype與__proto__的關系