JavaScript 原型鏈的理解

在講原型之前我們先來(lái)了解一下函數(shù)。

在JS中，函數(shù)的本質(zhì)就是對(duì)象，它與其他對(duì)象不同的是，創(chuàng)建它的構(gòu)造函數(shù)與創(chuàng)建其他對(duì)象的構(gòu)造函數(shù)不一樣。那產(chǎn)生函數(shù)對(duì)象的構(gòu)造函數(shù)是什么呢？是一個(gè)叫做Function的特殊函數(shù)，通過(guò)new Function 產(chǎn)生的對(duì)象就是一個(gè)函數(shù)。

function f1() {}
//上面的函數(shù)等同于：
var f1 = new Function();

function sum(a, b) {
    return a + b;
}
//上面的函數(shù)等同于：
var sum = new Function("a", "b", "return a + b");//前面的是函數(shù)形參名，最后一個(gè)參數(shù)是函數(shù)體

也就是說(shuō)：只要通過(guò)Function創(chuàng)建的對(duì)象就是函數(shù)，函數(shù)都是通過(guò)Function創(chuàng)建的。

看下面這張圖片：

以上我們可以看到普通對(duì)象是由函數(shù)創(chuàng)建的，函數(shù)是由Function創(chuàng)建的。那我們會(huì)有一個(gè)疑問(wèn)Function是從哪里來(lái)的？其實(shí)Function是不通過(guò)其他函數(shù)得到，它是JS執(zhí)行引擎初始化就直接通過(guò)本地代碼直接放置到內(nèi)存中的。

當(dāng)一個(gè)函數(shù)被創(chuàng)建后，這個(gè)函數(shù)就會(huì)自動(dòng)附帶一個(gè)屬性prototype，它就是一個(gè)Object對(duì)象，代表著函數(shù)的原型。也就是說(shuō)prototype就是原型對(duì)象

原型對(duì)象中包含兩個(gè)屬性：constructor和__proto__。constructor這個(gè)屬性是指創(chuàng)建原型的函數(shù),它指向函數(shù)本身。所以有以下關(guān)系：

看這樣一段代碼：

var Person = function () { };
var p = new Person();    

我們來(lái)看看這個(gè) new 究竟做了什么？

我們把 new 的過(guò)程拆分成以下三步：

1. var p={}; 也就是說(shuō)，初始化一個(gè)對(duì)象p。

2. p.__proto__=Person.prototype;

3. Person.call(p);也就是說(shuō)構(gòu)造p，也可以稱之為初始化p。

我們來(lái)證明一下：

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

這段代碼會(huì)返回 true。說(shuō)明我們步驟2是正確的。

那么__proto__是什么？

每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性，就是 __proto__，當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性 時(shí)，如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性，那么他就會(huì)去__proto__里找這個(gè)屬性，這個(gè)__proto__又會(huì)有自己的__proto__，于是就這樣 一直找下去，也就是我們平時(shí)所說(shuō)的原型鏈的概念。

按照標(biāo)準(zhǔn)，__proto__是不對(duì)外公開的，也就是說(shuō)是個(gè)私有屬性，但是 Firefox 的引擎將他暴露了出來(lái)成為了一個(gè)共有的屬性，我們可以對(duì)外訪問(wèn)和設(shè)置。

我們看一下下面這些代碼：

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

我們看下為什么 p 可以訪問(wèn) Person 的 Say。

首先var p=new Person()；

可以得出 p.__proto__=Person.prototype。那么當(dāng)我們調(diào)用 p.Say() 時(shí)，首先 p 中沒(méi)有 Say 這個(gè)屬性， 于是，他就需要到他的 __proto__ 中去找，也就是 Person.prototype，而我們?cè)谏厦娑x了 Person.prototype.Say = function(){}; 于是，就找到了這個(gè)方法。

好，接下來(lái)，讓我們看個(gè)更復(fù)雜的。

我們來(lái)做這樣的推導(dǎo)：

var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

我們指定了Programmer.prototype=new Person();我們來(lái)這樣拆分，var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

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

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

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

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

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