前面的話

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)系告组。本文先用一張圖開(kāi)宗明義，然后詳細(xì)解釋原型的三角關(guān)系

圖示

proto

概念

上圖中的復(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ì)象】

通過(guò)構(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ì)象怎囚。通過(guò)同一個(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<

說(shuō)明

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

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

【第一部分： Foo】

image

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

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

實(shí)例對(duì)象f1本身并沒(méi)有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)效果

image

【第二部分： Object】

image

Foo.prototype是f1的原型對(duì)象，同時(shí)它也是實(shí)例對(duì)象策精。實(shí)際上舰始，任何對(duì)象都可以看做是通過(guò)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.prototype谜嫉；實(shí)例對(duì)象Foo.prototype的proto屬性同樣指向原型對(duì)象Object.prototype

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)效果

image

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

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

【第三部分： Function】

image

前面已經(jīng)介紹過(guò)僧鲁，函數(shù)也是對(duì)象虐呻，只不過(guò)是具有特殊功能的對(duì)象而已。任何函數(shù)都可以看做是通過(guò)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本身沒(méi)有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.prototype);//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

第二部分介紹過(guò)旨枯，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