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

標簽： javascript

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

在 javascript 中原形是一個對象，通過原形可以實現(xiàn)屬性的繼承。

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

上面創(chuàng)建了三個對象，他們可以作為任何函數(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的原形。 所以構造函數(shù)Person從personBase繼承了gender屬性

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

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

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

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

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

代碼示例：

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

manPerson是構造函數(shù)Person的實例

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

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

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

反過來原型和構造函數(shù)是沒有指向?qū)嵗囊?，因為一個構造函數(shù)會有N個實例。javascript通過實例的 __proto__ 屬性來訪問共同的原形。

所有函數(shù)都是 Function 構造函數(shù)的實例，而且函數(shù)也是一個對象
同時函數(shù)實例的字面量方式創(chuàng)建 function too(){} 等同于構造函數(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的實例

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

通過上面的示例代碼分析，這里主要涉及到 prototype 、__proto__、constructor 這3個屬性的關系。

我們再次梳理一下:

對于所有的對象，都有__proto__屬性，這個屬性對應該對象的原型

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

所有的原型對象都有constructor屬性，該屬性對應創(chuàng)建所有指向該原型的實例的構造函數(shù)

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

所以上面的關系圖其實可以于理解為：

題外話：

    Function.prototype === Function.__proto__

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

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

對于這類問題也可以不用深究。

原型的constructor屬性指向?qū)臉嬙旌瘮?shù)

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

當理解了原形的概念后，原形鏈就比較好理解了。

因為每個對象和原型都有原型，對象的原型指向?qū)ο蟮母福傅脑陀种赶蚋傅母?，這種原型層層連接起來的就構成了原型鏈。.JavaScript 對象通過__proto__指向原型對象的鏈。原形鏈的概念不難理解，當訪問一個對象的屬性時，它不僅僅在該對象上搜尋，還會搜尋該對象的原型，以及該對象的原型的原型，依次層層向上搜索，直到找到一個名字匹配的屬性或到達原型鏈的末尾，找到就返回該屬性的值否則就返回undefind（原形鏈的末端是 null）。

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