javascript - B 扩展 A，但 B.add 填充 A.prototype.property

Question

我有一个类和另一个类从第一个继承属性子级。

function A() {}
A.prototype.children = [];

function B() {}
B.prototype = new A();
B.prototype.addChild = function(Child) {
    this.children.push(Child);
};

var b = new B();
b.addChild(new Object());

奇怪的是，当转储b到控制台时，它没有项目.children（如果属性.children存在；Chrome/Firefox），但它的原型的.children属性被填充。这是为什么？

Answer 1

您不应该使用原型来存储实例的数据。当您执行 this.children 时，B 中没有孩子，因此原型链继续到 A。正如@Bergi 所建议的，您应该删除：

B.prototype = new A

尝试定义：

function A() {
  this.children = [];
}
A.prototype.addChild = function (o) { this.children.push(o)};
var b = new A();
b.addChild({});

Answer 2

您的脚本中只创建了一个子数组，但由于继承，它被每个实例（甚至 B 的原型）引用。当你推动它时，你也会从任何地方看到变化。

相反，给每个实例自己的数组：

function A() {
    this.children = [];
}

而且，不要只为所有 B 实例创建一个数组来继承new A- 相反，使用

function B() {
    A.call(this); // do everything the A constructor does on this instance
}
B.prototype = Object.create(A.prototype);
B.prototype.addChild = function(Child) {
    this.children.push(Child);
};