javascript里的關(guān)系又多又亂。作用域鏈?zhǔn)且环N單向的鏈?zhǔn)疥P(guān)系，還算簡(jiǎn)單清晰；this機(jī)制的調(diào)用關(guān)系，稍微有些復(fù)雜；而關(guān)于原型，則是prototype、proto和constructor的三角關(guān)系。本文先用一張圖開宗明義，然后詳細(xì)解釋原型的三角關(guān)系

圖示

概念

　　上圖中的復(fù)雜關(guān)系，實(shí)際上來(lái)源就兩行代碼

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

【構(gòu)造函數(shù)】

　　用來(lái)初始化新創(chuàng)建的對(duì)象的函數(shù)是構(gòu)造函數(shù)。在例子中，F(xiàn)oo()函數(shù)是構(gòu)造函數(shù)

【實(shí)例對(duì)象】

　　通過構(gòu)造函數(shù)的new操作創(chuàng)建的對(duì)象是實(shí)例對(duì)象?？梢杂靡粋€(gè)構(gòu)造函數(shù)，構(gòu)造多個(gè)實(shí)例對(duì)象

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

【原型對(duì)象及prototype】

　　構(gòu)造函數(shù)有一個(gè)prototype屬性，指向?qū)嵗龑?duì)象的原型對(duì)象。通過同一個(gè)構(gòu)造函數(shù)實(shí)例化的多個(gè)對(duì)象具有相同的原型對(duì)象。經(jīng)常使用原型對(duì)象來(lái)實(shí)現(xiàn)繼承

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】

　　原型對(duì)象有一個(gè)constructor屬性，指向該原型對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)

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

　　由于實(shí)例對(duì)象可以繼承原型對(duì)象的屬性，所以實(shí)例對(duì)象也擁有constructor屬性，同樣指向原型對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)

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

【proto】

　　實(shí)例對(duì)象有一個(gè)proto屬性，指向該實(shí)例對(duì)象對(duì)應(yīng)的原型對(duì)象

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

說明

　　概念介紹完了，現(xiàn)在對(duì)圖示的關(guān)系進(jìn)行詳細(xì)說明

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

【第一部分： Foo】

實(shí)例對(duì)象f1是通過構(gòu)造函數(shù)Foo()的new操作創(chuàng)建的。構(gòu)造函數(shù)Foo()的原型對(duì)象是Foo.prototype；實(shí)例對(duì)象f1通過__proto__屬性也指向原型對(duì)象Foo.prototype

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

　　實(shí)例對(duì)象f1本身并沒有constructor屬性，但它可以繼承原型對(duì)象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

　　下圖是實(shí)例對(duì)象f1的控制臺(tái)效果

【第二部分： Object】

Foo.prototype是f1的原型對(duì)象，同時(shí)它也是實(shí)例對(duì)象。實(shí)際上，任何對(duì)象都可以看做是通過Object()構(gòu)造函數(shù)的new操作實(shí)例化的對(duì)象　　所以，F(xiàn)oo.prototype作為實(shí)例對(duì)象，它的構(gòu)造函數(shù)是Object()，原型對(duì)象是Object.prototype。相應(yīng)地，構(gòu)造函數(shù)Object()的prototype屬性指向原型對(duì)象Object；實(shí)例對(duì)象Foo.prototype的proto屬性同樣指向原型對(duì)象Object

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

　　實(shí)例對(duì)象Foo.prototype本身具有constructor屬性，所以它會(huì)覆蓋繼承自原型對(duì)象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

　　下圖是實(shí)例對(duì)象Foo.prototype的控制臺(tái)效果

　　如果Object.prototype作為實(shí)例對(duì)象的話，其原型對(duì)象是什么，結(jié)果是null。私以為，這可能也是typeof null的結(jié)果是'object'的原因之一吧

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

【第三部分： Function】

　　前面已經(jīng)介紹過，函數(shù)也是對(duì)象，只不過是具有特殊功能的對(duì)象而已。任何函數(shù)都可以看做是通過Function()構(gòu)造函數(shù)的new操作實(shí)例化的結(jié)果

　　如果把函數(shù)Foo當(dāng)成實(shí)例對(duì)象的話，其構(gòu)造函數(shù)是Function()，其原型對(duì)象是Function.prototype；類似地，函數(shù)Object的構(gòu)造函數(shù)也是Function()，其原型對(duì)象是Function.prototype

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

　　原型對(duì)象Function.prototype的constructor屬性指向構(gòu)造函數(shù)Function()；實(shí)例對(duì)象Object和Foo本身沒有constructor屬性，需要繼承原型對(duì)象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

　　所有的函數(shù)都可以看成是構(gòu)造函數(shù)Function()的new操作的實(shí)例化對(duì)象。那么，F(xiàn)unction可以看成是調(diào)用其自身的new操作的實(shí)例化的結(jié)果

　　所以，如果Function作為實(shí)例對(duì)象，其構(gòu)造函數(shù)是Function，其原型對(duì)象是Function.prototype

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

　　如果Function.prototype作為實(shí)例對(duì)象的話，其原型對(duì)象是什么呢？和前面一樣，所有的對(duì)象都可以看成是Object()構(gòu)造函數(shù)的new操作的實(shí)例化結(jié)果。所以，F(xiàn)unction.prototype的原型對(duì)象是Object.prototype，其原型函數(shù)是Object()

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

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

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

總結(jié)

　　【1】函數(shù)(Function也是函數(shù))是new Function的結(jié)果，所以函數(shù)可以作為實(shí)例對(duì)象，其構(gòu)造函數(shù)是Function()，原型對(duì)象是Function.prototype

　　【2】對(duì)象(函數(shù)也是對(duì)象)是new Object的結(jié)果，所以對(duì)象可以作為實(shí)例對(duì)象，其構(gòu)造函數(shù)是Object()，原型對(duì)象是Object.prototype

　　【3】Object.prototype的原型對(duì)象是null

最新評(píng)論