__proto__属性，Object.setPrototypeOf()，Object.getPrototypeOf()

JavaScript 语言的对象继承是通过原型链实现的。ES6 提供了更多原型对象的操作方法。

__proto__属性

__proto__属性（前后各两个下划线），用来读取或设置当前对象的原型对象（prototype）。目前，所有浏览器（包括 IE11）都部署了这个属性。

  1. // es5 的写法
  2. const obj = {
  3.   method: function() { ... }
  4. };
  5. obj.__proto__ = someOtherObj;
  7. // es6 的写法
  8. var obj = Object.create(someOtherObj);
  9. obj.method = function() { ... };

该属性没有写入 ES6 的正文，而是写入了附录，原因是__proto__前后的双下划线，说明它本质上是一个内部属性，而不是一个正式的对外的 API，只是由于浏览器广泛支持，才被加入了 ES6。标准明确规定，只有浏览器必须部署这个属性，其他运行环境不一定需要部署，而且新的代码最好认为这个属性是不存在的。因此，无论从语义的角度，还是从兼容性的角度，都不要使用这个属性，而是使用下面的Object.setPrototypeOf()（写操作）、Object.getPrototypeOf()（读操作）、Object.create()（生成操作）代替。

实现上，__proto__调用的是Object.prototype.__proto__，具体实现如下。

  1. Object.defineProperty(Object.prototype, '__proto__', {
  2.   get() {
  3.     let _thisObj = Object(this);
  4.     return Object.getPrototypeOf(_thisObj);
  5.   },
  6.   set(proto) {
  7.     if (this === undefined || this === null) {
  8.       throw new TypeError();
  9.     }
  10.     if (!isObject(this)) {
  11.       return undefined;
  12.     }
  13.     if (!isObject(proto)) {
  14.       return undefined;
  15.     }
  16.     let status = Reflect.setPrototypeOf(this, proto);
  17.     if (!status) {
  18.       throw new TypeError();
  19.     }
  20.   },
  21. });
  23. function isObject(value) {
  24.   return Object(value) === value;
  25. }

如果一个对象本身部署了__proto__属性，该属性的值就是对象的原型。

  1. Object.getPrototypeOf({ __proto__: null })
  2. // null

Object.setPrototypeOf()

Object.setPrototypeOf方法的作用与__proto__相同，用来设置一个对象的原型对象（prototype），返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

  1. // 格式
  2. Object.setPrototypeOf(object, prototype)
  4. // 用法
  5. const o = Object.setPrototypeOf({}, null);

该方法等同于下面的函数。

  1. function setPrototypeOf(obj, proto) {
  2.   obj.__proto__ = proto;
  3.   return obj;
  4. }

下面是一个例子。

  1. let proto = {};
  2. let obj = { x: 10 };
  3. Object.setPrototypeOf(obj, proto);
  5. proto.y = 20;
  6. proto.z = 40;
  8. obj.x // 10
  9. obj.y // 20
  10. obj.z // 40

上面代码将proto对象设为obj对象的原型，所以从obj对象可以读取proto对象的属性。

如果第一个参数不是对象，会自动转为对象。但是由于返回的还是第一个参数，所以这个操作不会产生任何效果。

  1. Object.setPrototypeOf(1, {}) === 1 // true
  2. Object.setPrototypeOf('foo', {}) === 'foo' // true
  3. Object.setPrototypeOf(true, {}) === true // true

由于undefined和null无法转为对象，所以如果第一个参数是undefined或null，就会报错。

  1. Object.setPrototypeOf(undefined, {})
  2. // TypeError: Object.setPrototypeOf called on null or undefined
  4. Object.setPrototypeOf(null, {})
  5. // TypeError: Object.setPrototypeOf called on null or undefined

Object.getPrototypeOf()

该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象。

  1. Object.getPrototypeOf(obj);

下面是一个例子。

  1. function Rectangle() {
  2.   // ...
  3. }
  5. const rec = new Rectangle();
  7. Object.getPrototypeOf(rec) === Rectangle.prototype
  8. // true
  10. Object.setPrototypeOf(rec, Object.prototype);
  11. Object.getPrototypeOf(rec) === Rectangle.prototype
  12. // false

如果参数不是对象，会被自动转为对象。

  1. // 等同于 Object.getPrototypeOf(Number(1))
  2. Object.getPrototypeOf(1)
  3. // Number {[[PrimitiveValue]]: 0}
  5. // 等同于 Object.getPrototypeOf(String('foo'))
  6. Object.getPrototypeOf('foo')
  7. // String {length: 0, [[PrimitiveValue]]: ""}
  9. // 等同于 Object.getPrototypeOf(Boolean(true))
  10. Object.getPrototypeOf(true)
  11. // Boolean {[[PrimitiveValue]]: false}
  13. Object.getPrototypeOf(1) === Number.prototype // true
  14. Object.getPrototypeOf('foo') === String.prototype // true
  15. Object.getPrototypeOf(true) === Boolean.prototype // true

如果参数是undefined或null，它们无法转为对象，所以会报错。

  1. Object.getPrototypeOf(null)
  2. // TypeError: Cannot convert undefined or null to object
  4. Object.getPrototypeOf(undefined)
  5. // TypeError: Cannot convert undefined or null to object