0%

understanding-prototype-in-js

Posted on Edited on In

目的

理清楚 __proto__，prototype，Object.getPrototypeOf/Object.setPrototypeOf，以及继承与原型间的关系

简介

  • __proto__，只有对象才有的属性，即原型，不建议直接通过 __proto__ 获取，建议通过 Object.getPrototype 获取。根据ECMAScript标准，使用 someObject.[[Prototype]] 符号指代 someObject 的原型
  • 原型链是通过 [[Prototype]] 不断向上连接
  • prototype，只有函数才有的属性，默认为空对象{}。对象也可以手动设置其值，但跟普通的键没区别
  • Object.setPrototypeOf(A, B)，将A的原型设置为B，等价于 A.__proto__ = B
  • Object.getPrototypeOf(A)，获取A的原型的标准方法
    • 当原型不为 null 时，等价于 A.__proto__
    • 当原型为 null 时，通过 obj.__proto__ 获取到的值为 undefined，但通过 Object.getPrototypeOf(obj)获取到的指为 null
  • __proto__ 可以直接设置对象字面量的原型
1
2
3
4
5
6
7
8
9
let pro = {
    name: 'NAME'
}

let obj = {
    __proto__: pro
}

console.log(obj.name) // NAME

图解

  • 说明：Shape 是父类，Triangle 是子类，Triangle 继承自 Shape 。图中所有的 __proto__ 均指通过 Object.getPrototype 获取得到的原型
  • 注意：当通过 extend 继承时，Triangle.prototype.__proto__ === Shape.prototype，当通过setPrototypeOf 方法继承时，Triangle.prototype.__proto__ === Object.prototype

原型图