使用 MDN 文章了解 Object.create()答案

【问题标题】：Understanding Object.create() using MDN article使用 MDN 文章了解 Object.create()
【发布时间】：2018-04-30 04:27:02
【问题描述】：

我从 Object.create() 上的 MDN 文章中获取了以下代码来理解相同的内容。

// Shape - superclass
function Shape() {
  this.x = 0;
  this.y = 0;
}

function Rectangle() {
  Shape.call(this);
}

Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var rect = new Rectangle();
console.log(rect.y);

我注释掉了以下两行，但仍然按预期工作。那么这段代码中Object.create()方法的意义是什么？为什么示例中已经演示了这种方法？

Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

【问题讨论】：

您省略了示例中一些非常关键的部分——定义Shape 原型的部分，以及显示rect 调用这些函数的能力的部分。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@CertainPerformance : Rectangle.prototype.constructor = Rectangle 行真的需要吗？

标签： javascript

【解决方案1】：

此语句使Rectangle 的原型成为继承自Shape 原型的新对象。因为rect继承自Rectangle的原型（因为它是使用new Rectangle()构造的），这意味着rect间接继承自Shape的原型。

但是，您问题中的代码实际上并没有为Shape 的原型分配任何东西，所以它可以在不这样做的情况下运行得很好，这使得代码有点......愚蠢。它演示了该技术，但没有演示该技术的目的。¹

将此添加到示例中会改变一些事情：

Shape.prototype.getPosition = function getPosition() {
    return [this.x, this.y];
};

然后，rect.getPosition() 将返回[0, 0]，因为rect 继承了Rectangle 原型的方法，而后者又继承了Shape 的原型。

¹ 正如评论中所指出的，您问题中的代码省略了原始代码示例的一部分，而这些部分确实说明了为什么您会从另一个原型对象继承。移除样本的某些部分会使样本变得无用，这似乎就是这里发生的情况。

【讨论】：

【解决方案2】：

实际上在这个 MDN 示例中，Rectangle 的原型是继承自 Shape 的原型的新对象。

仅仅因为rect继承自Rectangle的原型，实际上rect继承自Shape的原型。

任何东西都没有分配给Shape 的原型，所以它运行并且什么都不做。

例如在Shape的原型中放置一个方法：

Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

然后，rect.move(newX, newY) 会返回一些东西。

【讨论】：