辽ICP备18006375号-1

javascript原型链-review


本文总阅读量

写在前面

虽然现在es8都已经在预发布阶段了,但是无论发布到es几,其本身的运作原理都是一样的。

首先祭上一张图, 这张图主要描述了以下的关系,如果觉的这里的说明过于复杂可以直接看最后一段

简单说明

关于function(class)A和它的原型之间的关系

A.prototype.constructorA等价

关于function(class)A的实例a与它的原型之间的关系

a.__proto__A.prototype等价

在上面两个等价条件的基础上,就可以很容易得到

a.__proto__.prototype.constructorA等价

这是一般的类和对象实例之间的原型继承关系。

在此基础上,对于ObjectFunction还有一些特殊的关系。

关于function(class)AFunction之间的关系

A.__proto__Function.prototype等价

关于function(class)A的原型和Object之间的关系

A.prototype.__proto__Object.prototype等价

关于Function的原型和Object之间的关系

Function.prototype.__proto__Object.prototype等价

所以也可以很容易知道

A.__proto__.__proto__Object.prototype等价

Object对象比较特殊,因为它是所有对象的根,所以约定它的原型所指向的原型对象为空

Object.prototype.__proto__null等价

同时javascript中一切皆为对象,但Object本身是一个构造函数,因此它本身的原型对象指向Function.prototype

Object.__proto__Function.prototype

总结

所以无论是es5风格的继承还是es6风格的继承语法,原型链的形成是都是通过__proto__prototype描述的,举个例子,这里使用es6, 即:

如果有:

1
2
class B extends A {}
const a = new B()

则有:

  • a.__proto__ === B.prototype
  • B.prototype.constructor.__proto__ === B.__proto__
  • B.__proto__ === A
  • A.prototype.constructor.__proto === A.__proto__
  • A.__proto__ === Function.prototype
  • Function.prototype.__proto__ === Object.prototype
  • Object.prototype.__proto__ === null

其他的以此类推。

目录
  1. 1. 写在前面
  2. 2. 简单说明
  3. 3. 总结