prototype、proto和constructor的三角關係

轉載整理自http://www.cnblogs.com/xiaohuochai/p/5721552.html#3760057

                  http://blog.csdn.net/jasonzds/article/details/56055042

前面

　「一切皆爲對象」，這句着實是一手好營銷，易記，易上口，印象深入。
     萬物初生時，一個null對象，憑空而生，接着Object、Function學着null的模樣塑造了本身，而且它們彼此之間喜結連理，提供了prototype和constructor，一個給子孫提供了基因，一個則製造萬千子子孫孫。
     在javascript中，null也是做爲一個對象存在，基於它繼承的子子孫孫，當屬對象。
     乍一看，null像是上帝,而Object和Function猶如JavaScript世界中的亞當與夏娃。

 

圖示

 

概念

　　上圖中的複雜關係，實際上來源就兩行代碼

function Foo(){};
var f1 = new Foo;

【構造函數】

　　用來初始化新建立的對象的函數是構造函數。在例子中，Foo()函數是構造函數

【實例對象】

　　經過構造函數的new操做建立的對象是實例對象。能夠用一個構造函數，構造多個實例對象

function Foo(){};
var f1 = new Foo;
var f2 = new Foo;
console.log(f1 === f2);//false

【原型對象及prototype】

　　構造函數有一個prototype屬性，指向實例對象的原型對象。經過同一個構造函數實例化的多個對象具備相同的原型對象。常常使用原型對象來實現繼承

function Foo(){};
Foo.prototype.a = 1;
var f1 = new Foo;
var f2 = new Foo;

console.log(Foo.prototype.a);//1
console.log(f1.a);//1
console.log(f2.a);//1

【constructor】

　　原型對象有一個constructor屬性，指向該原型對象對應的構造函數

function Foo(){};
console.log(Foo.prototype.constructor === Foo);//true

　　因爲實例對象能夠繼承原型對象的屬性，因此實例對象也擁有constructor屬性，一樣指向原型對象對應的構造函數

function Foo(){};
var f1 = new Foo;
console.log(f1.constructor === Foo);//true

【proto】

　在JavaScript中，每一個對象都擁有一個原型對象，而指向該原型對象的內部指針則是__proto__,經過它能夠從中繼承原型對象的屬性，原型是JavaScript中的基因連接，有了這個，才能知道這個對象的祖祖輩輩。從對象中的__proto__能夠訪問到他所繼承的原型對象。

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto__ === Foo.prototype);//true

 

說明

　　概念介紹完了，如今對圖示的關係進行詳細說明

function Foo(){};
var f1 = new Foo;

 

【第一部分： Foo】

　　實例對象f1是經過構造函數Foo()的new操做建立的。構造函數Foo()的原型對象是Foo.prototype；實例對象f1經過__proto__屬性也指向原型對象Foo.prototype

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto === Foo.prototype);//true

　　實例對象f1自己並無constructor屬性，但它能夠繼承原型對象Foo.prototype的constructor屬性

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty('constructor'));//false

　　下圖是實例對象f1的控制檯效果

 

【第二部分： Object】

　　Foo.prototype是f1的原型對象，同時它也是實例對象。實際上，任何對象均可以看作是經過Object()構造函數的new操做實例化的對象

　　因此，Foo.prototype做爲實例對象，它的構造函數是Object()，原型對象是Object.prototype。相應地，構造函數Object()的prototype屬性指向原型對象Object.prototype；實例對象Foo.prototype的proto屬性一樣指向原型對象Object.prototype

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.__proto__ === Object.prototype);//true

　　實例對象Foo.prototype自己具備constructor屬性，因此它會覆蓋繼承自原型對象Object.prototype的constructor屬性

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.constructor === Foo);//true
console.log(Object.prototype.constructor === Object);//true
console.log(Foo.prototype.hasOwnProperty('constructor'));//true

　　下圖是實例對象Foo.prototype的控制檯效果

　　若是Object.prototype做爲實例對象的話，其原型對象是什麼，結果是null。私覺得，這可能也是typeof null的結果是'object'的緣由之一吧

console.log(Object.prototype.__proto__ === null);//true

 

【第三部分： Function】

 

 

　　前面已經介紹過，函數也是對象，只不過是具備特殊功能的對象而已。任何函數均可以看作是經過Function()構造函數的new操做實例化的結果

　　若是把函數Foo當成實例對象的話，其構造函數是Function()，其原型對象是Function.prototype；相似地，函數Object的構造函數也是Function()，其原型對象是Function.prototype

function Foo(){};
var f1 = new Foo;
console.log(Foo.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true

　　原型對象Function.prototype的constructor屬性指向構造函數Function()；實例對象Object和Foo自己沒有constructor屬性，須要繼承原型對象Function.prototype的constructor屬性

function Foo(){};
var f1 = new Foo;
console.log(Function.prototype.constructor === Function);//true
console.log(Foo.constructor === Function);//true
console.log(Foo.hasOwnProperty('constructor'));//false
console.log(Object.constructor === Function);//true
console.log(Object.hasOwnProperty('constructor'));//false

　　全部的函數均可以當作是構造函數Function()的new操做的實例化對象。那麼，Function能夠當作是調用其自身的new操做的實例化的結果

　　因此，若是Function做爲實例對象，其構造函數是Function，其原型對象是Function.prototype

console.log(Function.__proto__ === Function.prototype);//true
console.log(Function.prototype.constructor === Function);//true
console.log(Function.prototype === Function.prototype);//true

　　若是Function.prototype做爲實例對象的話，其原型對象是什麼呢？和前面同樣，全部的對象均可以當作是Object()構造函數的new操做的實例化結果。因此，Function.prototype的原型對象是Object.prototype，其原型函數是Object()

console.log(Function.prototype.__proto__ === Object.prototype);//true

　　第二部分介紹過，Object.prototype的原型對象是null

console.log(Object.prototype.__proto__ === null);//true

 

總結

　　【1】函數(Function也是函數)是new Function的結果，因此函數能夠做爲實例對象，其構造函數是Function()，原型對象是Function.prototype

　　【2】對象(函數也是對象)是new Object的結果，因此對象能夠做爲實例對象，其構造函數是Object()，原型對象是Object.prototype

　　【3】Object.prototype的原型對象是null