通过传递构造函数参数继承属性答案

【问题标题】：Inheritance of properties through passing constructor parameters通过传递构造函数参数继承属性
【发布时间】：2017-05-04 14:25:03
【问题描述】：

在以下代码行中，改编自Mozilla JavaScript tutorial 的解决方案，Ball 类继承了 Shape 类的 x、y 属性。

Mozilla page 似乎暗示要从 Shape 继承 x、y，它们必须在 Ball 构造函数的参数列表中定义（并在 Shape.call 函数调用中使用）。但为什么这是必要的？原始的 Shape 构造函数不接受任何这些参数。

假设 random 是一个在别处定义的函数。

var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

function Shape() {
  this.x = random(0,width);
  this.y = random(0,height);
}

function Ball(x, y) {
  Shape.call(this, x, y);
  this.size = random(10,20);
}

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

这是他们在上一个示例中所做的注释：

"在这种情况下，我们在创建新对象实例时指定继承的属性，但请注意，即使实例不要求将它们指定为参数，您也需要在构造函数中将它们指定为参数（例如，也许你有一个在创建对象时设置为随机值的属性。）"

【问题讨论】：

这似乎是教程代码中的一个缺陷。除了this 之外，Shape.call 的其他参数将被忽略。此外，从 Shape 构造函数中访问全局变量 width 和 height 闻起来像糟糕的抽象。
谢谢！那正是我所想。我想知道为什么教程说它们需要在Ball 构造函数中指定为参数。
我怀疑Shape 构造函数应该将x 和y 作为参数，而不是随机初始化它们。那么就有意义了。
github.com/mdn/learning-area/issues/7

标签： javascript inheritance

【解决方案1】：

我是最初编写这些文档的人。我必须首先为造成的混乱深表歉意——那天我的大脑在吃午饭；-/

我已更新代码和示例以解决问题，如此 GitHub 问题中所述：

https://github.com/mdn/learning-area/issues/7

如果您发现 MDN 内容有任何问题，请告诉我。

谢谢。

【讨论】：

【解决方案2】：

如果 Shape() 函数在 x,y 上运行并在 x,y 上进行一些验证/操作，那么传递 x,y 是有意义的。原因是您不想在 Ball() 中重做这项工作。

但由于简单的赋值不保证传递 x,y 因为 x,y 无论如何都会附加到 this 对象。

this.x = random(0,width);
this.y = random(0,height);

所以，看起来不需要传递 x,y。

【讨论】：