JS的原型鏈

JS的原型鏈

本文闡述了js中的prototype,constructorproto之間的關(guān)系。
同時(shí)梳理了js如何實(shí)現(xiàn)繼承的。

屬性釋義

  • prototype
    prototypeJS中除了通過(guò)bind()生成的函數(shù)外所有function都具有的屬性,其值為一個(gè)對(duì)象,對(duì)象里包含兩個(gè)
    值(protoconstructor)。作用是存儲(chǔ)要共享的屬性和方法。
  • _proto_([[Prototype]])
    protoJS中每個(gè)對(duì)象都有的屬性,其值指向了該對(duì)象構(gòu)造函數(shù)的prototype
  • constructor
    constructor即構(gòu)造函數(shù),構(gòu)造函數(shù)就是構(gòu)造函數(shù),其值為函數(shù)本身。

實(shí)例屬性與類屬性

  • 類屬性是指綁定到prototype上的屬性,可以被所有通過(guò)該構(gòu)造函數(shù)創(chuàng)建的實(shí)例繼承。
  • 實(shí)例屬性是指綁定到this上的屬性,可通過(guò)在構(gòu)造函數(shù)內(nèi)給對(duì)象init時(shí)綁定或者直接在
    生成對(duì)象后綁定。其值是不可共享的。

屬性之間的關(guān)系

1.jpg
//定義一個(gè)構(gòu)造函數(shù) 
var Foo = function(){}

此時(shí)[1] Foo.prototype = {constructor: Foo, __proto__:Object.prototype}
即:Foo.prototype.__proto__ === Object.prototype,
因?yàn)?Foo.prototype的值是個(gè)Object實(shí)例,
所以[3] {}.__proto__ = Object.prototype

console.log(Foo.prototype.__proto__ === Object.prototype
console.log(Foo.prototype.constructor === Foo)
var f1 = new Foo()
//此時(shí)[2] f1.__proto__ === Foo.prototype
console.log(f1.__proto__ === Foo.prototype)

Foo是我們自定義的構(gòu)造函數(shù),JS內(nèi)置的構(gòu)造函數(shù)也是同樣的如Object,這里的Object是個(gè)構(gòu)造函數(shù)
Object.prototype = {constructor: Object, __proto__: null}

console.log(Object.prototype.__proto__)
//null

為什么[4] Object.prototype.__proto__會(huì)是null呢?
Object.prototype 不是為 {} 嗎, {}.__proto__不應(yīng)該
Object.prototype嗎?而且我們自定義的構(gòu)造函數(shù)就是這個(gè)樣子呀!

如果設(shè)置Object.prototype.__proto__ = Object.prototype 那么,當(dāng)查找一個(gè)不存在的屬性時(shí),JS
會(huì)從上級(jí)原型鏈去查這個(gè)屬性,便會(huì)出現(xiàn)死循環(huán),所以ES5規(guī)定Object.prototype.__proto__ = null
而且Object.prototype 指向的對(duì)象并不是繼承自Object,即它不是Object的實(shí)例。

原文:15.2.4

The value of the [[Prototype]] internal property of the Object prototype object is null, the value of the [[Class]] internal property is "Object", and the initial value of the [[Extensible]] internal property is true.

上面提到JS內(nèi)置的構(gòu)造函數(shù)Object,在JS中函數(shù)也是一種對(duì)象,即也存在Object.__proto__ 那么它指向誰(shuí)呢?當(dāng)然是Function.prototype了,因?yàn)?br> Functionjs中所有function的構(gòu)造函數(shù),所以function Object(){}Function的一個(gè)實(shí)例。
所以[7] Object.__proto__ === Function.prototype

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

JSFunction也是一個(gè)構(gòu)造函數(shù)。
所以[9] Function.prototype = {constructor: Function, __proto__: Object.prototype}
[10] Function.__proto__ = Function.prototype

至此便是一個(gè)完整的JS原型鏈。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 本文主要參考了MDN文檔和知乎討論。 在js中,大部分東西都是對(duì)象,數(shù)組是對(duì)象,函數(shù)也是對(duì)象,對(duì)象更加是對(duì)象。不管...
    csRyan閱讀 15,058評(píng)論 2 16
  • JS中原型鏈,說(shuō)簡(jiǎn)單也簡(jiǎn)單。 首先明確: 函數(shù)(Function)才有prototype屬性,對(duì)象(除Object...
    前小白閱讀 3,950評(píng)論 0 9
  • 特別說(shuō)明,為便于查閱,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 1,160評(píng)論 0 4
  • 雷峰塔內(nèi)相思苦,碧海藍(lán)天永夜心。 執(zhí)一把青傘,看泠泠雨落下,鬢上一枝白梅花,誰(shuí)寫(xiě)下相思情話。 她望那雷峰...
    書(shū)流嵐閱讀 243評(píng)論 0 0
  • 恭喜皇馬,奪得了隊(duì)史第11座歐冠獎(jiǎng)杯,這是令人難以置信的成就——在最艱難的足球賽事中獲得11個(gè)冠軍!本以為球員們會(huì)...
    酷聽(tīng)聽(tīng)書(shū)閱讀 406評(píng)論 0 0