關於__proto__和prototype的一些理解


var Person = function(name) {
    this.name = name;
}
var p = new Person();
new操作符的操作是
var p = {}
p.__proto__ =  Person.prototype
Person.call(p)

var p={}; 也就是說,初始化一個對象p。

p.__proto__ = Person.prototype;

Person.call(p);也就是說構造p,也可以稱之為初始化p。

關鍵在於第二步,我們來證明一下:

var Person = function() {}
var p = new Person();
alert(p.__proto__ =  Person.prototype)

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

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

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

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

var Person = function () { };
Person.prototype.Say = function () {
    alert("Person say");
}
var p = new Person();
p.Say(); 

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

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

好,接下來,讓我們看個更復雜的。

var Person = function () { };
Person.prototype.Say = function () {
    alert("Person say");
}
Person.prototype.Salary = 50000;
var Programmer = function () { };
Programmer.prototype = new Person();
Programmer.prototype.WriteCode = function () {
    alert("programmer writes code");
};
Programmer.prototype.Salary = 500;
var p = new Programmer();
p.Say();
p.WriteCode();
alert(p.Salary);  

我們來做這樣的推導:

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”)的方法。

其余的也都是同樣的道理。

再來一張stackoverflow上的圖:

個人認為prototype可以當成是一個指針,當new一個方法的時候,指向的都是一個內存區域。

看完這些,感覺對原型鏈的了解應該差不多了吧。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM