数据与Javascript中的继承冲突

时间:2015-04-03 09:27:11

标签: javascript inheritance

我试图在JavaScript中使用lib,我有一个继承问题。以下是我尝试做的简化示例:

Fruit = function () {
    this.colors = [];
}

Lemon = function () {
    this.colors.push("yellow");
}

Lemon.prototype = new Fruit();

在这里,我想创建一个类 Lemon ,继承自类 Fruit ,每个水果包含一个颜色列表。

但是当我尝试实例化一些柠檬并打印出这样的颜色时:

var lemon1 = new Lemon();
console.log(lemon1.colors);
var lemon2 = new Lemon();
console.log(lemon1.colors);
console.log(lemon2.colors);

我得到了这个输出:

["yellow"]
["yellow", "yellow"]
["yellow", "yellow"]

所以我可以看到问题是属性"颜色"是每个Lemon对象实例之间共享的一个数组。

如何为每个柠檬实例创建一个不同的颜色数组,并在Fruit类中定义?

1 个答案:

答案 0 :(得分:4)

像这样:

Fruit = function () {
    this.colors = [];
}

Lemon = function () {
    Fruit.call(this);
    this.colors.push("yellow");
}

Lemon.prototype = Object.create(Fruit);

Fruit构造函数Lemon调用Fruit.call(this);构造函数。而不是调用构造函数来创建原型,我们使用Object.create(Fruit)创建对象而不调用其构造函数。

运行示例会给出以下定义。

> var lemon1 = new Lemon();
> console.log(lemon1.colors);
[ 'yellow' ]
> var lemon2 = new Lemon();
> console.log(lemon1.colors);
[ 'yellow' ]
> console.log(lemon2.colors);
[ 'yellow' ]

为此我添加:

> Object.is(lemon1.colors, lemon2.colors)
false

这表明Lemon个实例的Array属性值具有不同的colors个。