Javascript學習筆記7 原型鏈的原理
2024-05-06 14:11:55
供稿：網友
我們先看看這樣一段代碼：
代碼如下:
<script type="text/javascript">
var Person = function () { };
var p = new Person();
</script>
很簡單的一段代碼，我們來看看這個new究竟做了什么？我們可以把new的過程拆分成以下三步：
<1> var p={}; 也就是說，初始化一個對象p。
<2> p.__proto__=Person.prototype;
<3> Person.call(p);也就是說構造p，也可以稱之為初始化p。
關鍵在于第二步，我們來證明一下：
代碼如下:
<script type="text/javascript">
var Person = function () { };
var p = new Person();
alert(p.__proto__ === Person.prototype);
</script>
這段代碼會返回true。說明我們步驟2的正確。
那么__proto__是什么？我們在這里簡單地說下。每個對象都會在其內部初始化一個屬性，就是__proto__，當我們訪問一個對象的屬性時，如果這個對象內部不存在這個屬性，那么他就會去__proto__里找這個屬性，這個__proto__又會有自己的__proto__，于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。
按照標準，__proto__是不對外公開的，也就是說是個私有屬性，但是Firefox的引擎將他暴露了出來成為了一個共有的屬性，我們可以對外訪問和設置。
好，概念說清了，讓我們看一下下面這些代碼：
代碼如下:
<script type="text/javascript">
var Person = function () { };
Person.prototype.Say = function () {
alert("Person say");
}
var p = new Person();
p.Say();
</script>
這段代碼很簡單，相信每個人都這樣寫過，那就讓我們看下為什么p可以訪問Person的Say。
首先var p=new Person()；可以得出p.__proto__=Person.prototype。那么當我們調用p.Say()時，首先p中沒有Say這個屬性，于是，他就需要到他的__proto__中去找，也就是Person.prototype，而我們在上面定義了Person.prototype.Say=function(){}; 于是，就找到了這個方法。
好，接下來，讓我們看個更復雜的。
代碼如下:
<script type="text/javascript">
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);
</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;
