摘要：構(gòu)造函數(shù)和實(shí)例都通過(guò)屬性指向了原形。代碼示例是構(gòu)造函數(shù)的實(shí)例的屬性與的屬性保存的值相等，即他們指向同一個(gè)對(duì)象原形。

標(biāo)簽： javascript

javascript 中原形是一個(gè)比較難于理解的概念。javascript 權(quán)威指南在原形這一章也花了大量的篇幅進(jìn)行介紹，也許你已經(jīng)讀過(guò)javascript 權(quán)威指南，或者已經(jīng)是讀第N篇了，然而這篇文章的目的就是在讀完之后，刨去細(xì)枝末節(jié)用幾分鐘梳理一下知識(shí)脈絡(luò)。

在 javascript 中原形是一個(gè)對(duì)象，通過(guò)原形可以實(shí)現(xiàn)屬性的繼承。

    let personBase = new Object()
    personBase.gender = "男"
    let animal = {
        eyeNumber: 2
    }
    let time = function () {
        let timeType = "seconds"
    }

上面創(chuàng)建了三個(gè)對(duì)象，他們可以作為任何函數(shù)的原形。

function Person (age) {
  this.age = age
}
Person.prototype = personBase
let tom = new Person(18)
console.log(tom.age) // 18
console.log(tom.gender) // "男"

personBase 是 Person的原形。 所以構(gòu)造函數(shù)Person從personBase繼承了gender屬性

原形: 每一個(gè) JavaScript 對(duì)象(假設(shè)為A，null除外)在創(chuàng)建的時(shí)候就會(huì)與之關(guān)聯(lián)另一個(gè)對(duì)象，這個(gè)對(duì)象就是我們所說(shuō)的原型，每一個(gè)對(duì)象都會(huì)從原型"繼承"屬性。

A，在大多數(shù)編碼情景中可能是函數(shù)。函數(shù)默認(rèn)都繼承于Function, 即Function默認(rèn)是所有函數(shù)的原形。當(dāng)我們通過(guò)prototype屬性給函數(shù)添加一個(gè)原形對(duì)象時(shí)，該原形對(duì)象會(huì)添加到原形鏈的近端。當(dāng)然A也可以是其他數(shù)據(jù)類型（Number、String、Array、Boolean）,例如 Number 類型，當(dāng)我們通過(guò)字面量方式（var a = 1）初始化變量等同于通過(guò)構(gòu)造函數(shù)方式實(shí)例化一個(gè)變量（var a = new Number(1)），即字面量方式創(chuàng)建的變量同樣是Number的實(shí)例。所以我們可以通過(guò)Number的prototype屬性來(lái)實(shí)現(xiàn)屬性和方法的繼承。（當(dāng)然不建議這么做）

弄明白這三者之間的關(guān)系關(guān)鍵是理解 prototype、__proto__、constructor 之間的的聯(lián)系：

在JavaScript中，每個(gè)函數(shù)都有一個(gè)prototype屬性，當(dāng)一個(gè)函數(shù)被用作構(gòu)造函數(shù)來(lái)創(chuàng)建實(shí)例時(shí)，該函數(shù)的prototype屬性值將被作為原型賦值給所有對(duì)象實(shí)例（設(shè)置實(shí)例的__proto__屬性），也就是說(shuō)，所有實(shí)例的原型引用的是構(gòu)造函數(shù)的prototype屬性。同時(shí)在原型對(duì)象中，包含一個(gè)"constructor"屬性，這個(gè)屬性對(duì)應(yīng)創(chuàng)建所有指向該原型的實(shí)例的構(gòu)造函數(shù)（有點(diǎn)拗口，就是constructor屬性指向構(gòu)造函數(shù)）。這三者的關(guān)系可以用下面的示例圖表示：

所以構(gòu)造函數(shù)通過(guò) prototype 屬性指向自己的原型。 構(gòu)造函數(shù)的實(shí)例在創(chuàng)建后通過(guò) __proto__ 屬性指向構(gòu)造函數(shù)的 prototype 的對(duì)象，即實(shí)例函數(shù)也指向原型。構(gòu)造函數(shù)和實(shí)例都通過(guò)屬性指向了原形。

代碼示例：

    function Person () {}
    let manPerson = new Person()
    manPerson.__proto__ === Person.prototype // true
    Person.prototype.constructor === Person // true
    manPerson.constructor === Person.prototype.constructor // true

manPerson是構(gòu)造函數(shù)Person的實(shí)例

manPerson的__proto__屬性與Person的prototype屬性保存的值相等，即他們指向同一個(gè)對(duì)象原形。

Person 的原形（Person.prototype）通過(guò)constructor屬性指向 構(gòu)造函數(shù) Person ，即 Person和他的原形實(shí)現(xiàn)了相互引用

實(shí)例的constructor屬性與原形的constructor屬性相等。這里實(shí)例的constructor屬性是繼承自原形的constructor屬性。

反過(guò)來(lái)原型和構(gòu)造函數(shù)是沒(méi)有指向?qū)嵗囊?，因?yàn)橐粋€(gè)構(gòu)造函數(shù)會(huì)有N個(gè)實(shí)例。javascript通過(guò)實(shí)例的 __proto__ 屬性來(lái)訪問(wèn)共同的原形。

所有函數(shù)都是 Function 構(gòu)造函數(shù)的實(shí)例，而且函數(shù)也是一個(gè)對(duì)象
同時(shí)函數(shù)實(shí)例的字面量方式創(chuàng)建 function too(){} 等同于構(gòu)造函數(shù)方式創(chuàng)建 let foo = new Function()

    foo instanceof Function // true
    too instanceof Function // true
    foo.__proto__ === too.__proto__ // true
    foo.__proto__ === Function.prototype // true foo是Function的實(shí)例

所以too、foo都是Function的實(shí)例，他們的_proto__指向的是Function構(gòu)造函數(shù)的原型。

通過(guò)上面的示例代碼分析，這里主要涉及到 prototype 、__proto__、constructor 這3個(gè)屬性的關(guān)系。

我們?cè)俅问崂硪幌?

對(duì)于所有的對(duì)象，都有__proto__屬性，這個(gè)屬性對(duì)應(yīng)該對(duì)象的原型

對(duì)于函數(shù)對(duì)象，除了__proto__屬性之外，還有prototype屬性，當(dāng)一個(gè)函數(shù)被用作構(gòu)造函數(shù)來(lái)創(chuàng)建實(shí)例時(shí)，該函數(shù)的prototype屬性值將被作為原型賦值給所有對(duì)象實(shí)例（也就是設(shè)置實(shí)例的__proto__屬性）

所有的原型對(duì)象都有constructor屬性，該屬性對(duì)應(yīng)創(chuàng)建所有指向該原型的實(shí)例的構(gòu)造函數(shù)

函數(shù)對(duì)象和原型對(duì)象通過(guò)prototype和constructor屬性進(jìn)行相互關(guān)聯(lián)

所以上面的關(guān)系圖其實(shí)可以于理解為：

題外話：

    Function.prototype === Function.__proto__

先有雞還是先有蛋？怎么 Function 作為構(gòu)造函數(shù) 與 Function 作為實(shí)例對(duì)象的原型相等

在JavaScript中，F(xiàn)unction構(gòu)造函數(shù)本身也算是Function類型的實(shí)例嗎？Function構(gòu)造函數(shù)的prototype屬性和__proto__屬性都指向同一個(gè)原型，是否可以說(shuō)Function對(duì)象是由Function構(gòu)造函數(shù)創(chuàng)建的一個(gè)實(shí)例？
相關(guān)問(wèn)題
JavaScript 里 Function 也算一種基本類型？
在JavaScript中，F(xiàn)unction構(gòu)造函數(shù)本身也算是Function類型的實(shí)例嗎？

對(duì)于這類問(wèn)題也可以不用深究。

原型的constructor屬性指向?qū)?yīng)的構(gòu)造函數(shù)

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

當(dāng)理解了原形的概念后，原形鏈就比較好理解了。

因?yàn)槊總€(gè)對(duì)象和原型都有原型，對(duì)象的原型指向?qū)ο蟮母?，而父的原型又指向父的父，這種原型層層連接起來(lái)的就構(gòu)成了原型鏈。.JavaScript 對(duì)象通過(guò)__proto__指向原型對(duì)象的鏈。原形鏈的概念不難理解，當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性時(shí)，它不僅僅在該對(duì)象上搜尋，還會(huì)搜尋該對(duì)象的原型，以及該對(duì)象的原型的原型，依次層層向上搜索，直到找到一個(gè)名字匹配的屬性或到達(dá)原型鏈的末尾，找到就返回該屬性的值否則就返回undefind（原形鏈的末端是 null）。

關(guān)于 javascript 中各數(shù)據(jù)類型原形之間的關(guān)系可以參考下圖理解：