JavaScript 原型与原型链

[hawtim]

脑图梳理

[hawtim]

参考文档：

1. 《大白话通俗易懂的讲解javascript原型与原型链（proto、prototype、constructor的区别）》https://juejin.im/post/5da67299e51d4524aa470904
2. 《从prototype与__proto__窥探JS继承之源》作者 路易斯 https://juejin.im/post/58f9d0290ce46300611ada65

[hawtim]

下图很好的讲解了 proto & prototype & constructor 三者的关系

[hawtim]

ES6 继承的代码和图解

function inhert(subClass, superClass) {
  // 实现 subClass.prototype.__proto__ = superClass.prototype
  subClass.prototype = Object.create(superClass.prototype)
  // 防止 subClass.prototype.constructor 被改为 superClass.prototype.constructor
  subClass.prototype.constructor = subClass
  // 目的是实现子类可以访问父类的静态属性和方法
  subClass.__proto__ = superClass
}

[hawtim]

理解：subClass.prototype = Object.create(superClass.prototype)

function F(){}
F.prototype = superClass.prototype
subClass.prototype = new F() // 将一个 F 的实例挂载到 subClass.prototype 上

[hawtim]

参考文章

https://segmentfault.com/a/1190000014798678 https://babeljs.io/repl