JS的原型链

JS的原型链

本文阐述了js中的prototype,constructorproto之间的关系。
同时梳理了js如何实现继承的。

属性释义

  • prototype
    prototypeJS中除了通过bind()生成的函数外所有function都具有的属性,其值为一个对象,对象里包含两个
    值(protoconstructor)。作用是存储要共享的属性和方法。
  • _proto_([[Prototype]])
    protoJS中每个对象都有的属性,其值指向了该对象构造函数的prototype
  • constructor
    constructor即构造函数,构造函数就是构造函数,其值为函数本身。

实例属性与类属性

  • 类属性是指绑定到prototype上的属性,可以被所有通过该构造函数创建的实例继承。
  • 实例属性是指绑定到this上的属性,可通过在构造函数内给对象init时绑定或者直接在
    生成对象后绑定。其值是不可共享的。

属性之间的关系

1.jpg
//定义一个构造函数 
var Foo = function(){}

此时[1] Foo.prototype = {constructor: Foo, __proto__:Object.prototype}
即:Foo.prototype.__proto__ === Object.prototype,
因为 Foo.prototype的值是个Object实例,
所以[3] {}.__proto__ = Object.prototype

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

Foo是我们自定义的构造函数,JS内置的构造函数也是同样的如Object,这里的Object是个构造函数
Object.prototype = {constructor: Object, __proto__: null}

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

为什么[4] Object.prototype.__proto__会是null呢?
Object.prototype 不是为 {} 吗, {}.__proto__不应该
Object.prototype吗?而且我们自定义的构造函数就是这个样子呀!

如果设置Object.prototype.__proto__ = Object.prototype 那么,当查找一个不存在的属性时,JS
会从上级原型链去查这个属性,便会出现死循环,所以ES5规定Object.prototype.__proto__ = null
而且Object.prototype 指向的对象并不是继承自Object,即它不是Object的实例。

原文: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内置的构造函数Object,在JS中函数也是一种对象,即也存在Object.__proto__ 那么它指向谁呢?当然是Function.prototype了,因为
Functionjs中所有function的构造函数,所以function Object(){}Function的一个实例。
所以[7] Object.__proto__ === Function.prototype

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

JSFunction也是一个构造函数。
所以[9] Function.prototype = {constructor: Function, __proto__: Object.prototype}
[10] Function.__proto__ = Function.prototype

至此便是一个完整的JS原型链。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文主要参考了MDN文档和知乎讨论。 在js中,大部分东西都是对象,数组是对象,函数也是对象,对象更加是对象。不管...
    csRyan阅读 15,161评论 2 16
  • JS中原型链,说简单也简单。 首先明确: 函数(Function)才有prototype属性,对象(除Object...
    前小白阅读 9,362评论 0 9
  • 特别说明,为便于查阅,文章转自https://github.com/getify/You-Dont-Know-JS...
    杀破狼real阅读 4,834评论 0 4
  • 雷峰塔内相思苦,碧海蓝天永夜心。 执一把青伞,看泠泠雨落下,鬓上一枝白梅花,谁写下相思情话。 她望那雷峰...
    书流岚阅读 1,761评论 0 0
  • 恭喜皇马,夺得了队史第11座欧冠奖杯,这是令人难以置信的成就——在最艰难的足球赛事中获得11个冠军!本以为球员们会...
    酷听听书阅读 2,972评论 0 0