前端嘛 Logo
前端嘛

原型和原型链

JavaScript 中的继承是原型式继承,对象是基于原型对象创建的

原型

对象的构造函数的 prototype 属性和对象的 [[prototype]] 内部属性指向同一个对象,称为对象的原型。

原型链

原型对象本身也有自己的原型,由此层层向上形成了一个链式结构称为原型链,原型链的顶端为 Object.prototype 对象,该对象的原型为 null

查找机制

访问对象的属性或方法时,如果对象内部不存在,JS 引擎会沿着原型链向上查找,直到找到或遍历完原型链

优点

原型链的查找机制可以避免在每个对象上复制一份相同的属性和方法,从而节省内存

注意点

  1. 对原型链进行属性和方法查找可能会对性能产生一些影响,尤其是在多次重复的查找操作中

  2. 试图访问不存在的属性会遍历整个原型链

  3. 如果原型链上的某个属性被修改了,那么继承自该原型的对象有可能会受到影响

应用场景

  1. 数组可以调用 Array.prototype 上的方法

  2. Vue 2 中使用 Vue.use 注册插件,会将某些对象挂载在 Vue 的原型对象上,从而能够在全局通过 vue 的实例来访问这些对象

扩展

  1. 过去使用对象的__proto__属性表示原型对象,该特性已从标准中移除,可以使用Object.getPrototypeOf()来获取实例的原型对象。

  2. instanceof 运算符用于检测右侧构造函数的原型对象是否出现在左侧对象的原型链上