扩展 Object.setPrototypeOf() 与 Object.create

Question

我知道继承函数构造函数的两种方法。

选项 1 Object.create

function x(x, y) {
  this.x = x;
  this.y = y;
}

x.prototype.XDD = function() {};


function y(c, r) {
  x.call(this, 1, 2);
  this.r = r;
  this.c = c;
}

y.prototype = Object.create(x.prototype);
y.prototype.YDD = function() {};
y.prototype.XDD = function() {};
y.prototype.constructor  = y;

var rect = new y(1, 2);

选项 2 Object.setPrototypeOf()

function x(x, y) {
  this.x = x;
  this.y = y;
}

x.prototype.XDD = function() {};

function y(c, r) {
  x.call(this, 1, 2);
  this.r = r;
  this.c = c;
}

y.prototype.YDD = function() {};
y.prototype.XDD = function() {};
Object.setPrototypeOf(y.prototype, x.prototype);

var rect = new y(1, 2);

它们之间有什么区别？。还有比这些更好的解决方案吗？。

Answer 1

根据MDN docs：

改变一个对象的 [[Prototype]] 现代 JavaScript 引擎优化属性访问，目前是一个非常 在每个浏览器和 JavaScript 引擎中运行缓慢。此外， 改变继承的影响是微妙而广泛的，并且是 不仅限于在 Object.setPrototypeOf(...) 中花费的时间 语句，但可以扩展到可以访问任何对象的任何代码 其 [[Prototype]] 已被更改。

因为这个特性是语言的一部分，它仍然是负担 让引擎开发人员高效地（理想情况下）实现该功能。 在引擎开发人员解决这个问题之前，如果您担心 性能，您应该避免设置对象的 [[Prototype]]。 相反，使用所需的 [[Prototype]] 创建一个新对象 Object.create()。

性能比较（2019 年 2 月 14 日）： https://gist.github.com/calebmer/c74e2a7941044e5f28b8#gistcomment-2836415

简而言之，使用Object.create 比Object.setPrototypeOf 在非常更大规模使用时要快得多。

还有许多其他方法可以在 JS 中设置对象的原型（例如不推荐使用 Object.prototype.__proto__），但现在（2019 年 10 月）最推荐的方法似乎是使用ES6 class, supported 被大多数现代浏览器所采用。虽然有基准（如：this）表明 ES6 类和super() 比 ES5 对应物慢，但它使您的代码更干净，尤其是对于使用其他 OOP 语言的人。