我是 Javascript 编程的新手，我正在从面向对象编程的 Angular 来处理我的第一个应用程序(实际上是一个游戏)(我知道 js 并不是真正的面向对象，但对于这个特定的问题，它对我来说更容易像这样开始)。

我有一个“类”层次结构，其中最顶层(“事物”类)定义了相关事物(游戏中的附加项目)的列表。它由 ThingA 类继承，而 ThingA 类又由 ThingA1 和 ThingA2 类继承。

最小的例子是:

function Thing() 
{
  this.relatedThings   = [];
}
Thing.prototype.relateThing = function(what)
{
  this.relatedThings.push(what);
}

ThingA.prototype = new Thing();
ThingA.prototype.constructor = ThingA;
function ThingA()
{
}

ThingA1.prototype = new ThingA();
ThingA1.prototype.constructor = ThingA1;
function ThingA1()
{

}

ThingA2.prototype = new ThingA();
ThingA2.prototype.constructor = ThingA2;
function ThingA2()
{    
}

var thingList = [];

thingList.push(new ThingA());
thingList.push(new ThingA1());
thingList.push(new ThingA2());
thingList.push(new ThingA2());
thingList.push(new Thing());

thingList[1].relateThing('hello');

在代码的最后，当执行 relateThing 时，每个 ThingA、ThingA1 和 ThingA2 都将执行它(不是数组中的最后一个“Thing”对象)。我发现如果我在 ThingA 原型(prototype)中定义 relateThing 函数，它将正常工作。由于游戏的设计方式，我宁愿不必这样做。

也许我不太了解原型(prototype)在 javascript 中的工作原理。我知道该函数在所有对象之间共享，但我想执行将是单独的。有人可以解释为什么会发生这种情况以及如何解决吗？我不知道是我做错了继承，还是原型(prototype)定义，还是什么。

提前致谢。

最佳答案

欢迎来到原型(prototype)链!

让我们看看它在您的示例中是什么样子。

问题

当您调用 new Thing() 时，您正在创建一个具有属性 relatedThings 的新对象它指的是一个数组。所以我们可以说我们有这个:

+--------------+
|Thing instance|
|              |
| relatedThings|----> Array
+--------------+     

然后您将此实例分配给 ThingA.prototype :

+--------------+
|    ThingA    |      +--------------+
|              |      |Thing instance|
|   prototype  |----> |              |
+--------------+      | relatedThings|----> Array
                      +--------------+

所以 ThingA 的每个实例将从 Thing 继承实例。现在您要创建 ThingA1和 ThingA2并分配一个新的 ThingA实例到他们的每个原型(prototype)，然后创建 ThingA1 的实例和 ThingA2 (以及 ThingA 和 Thing ，但此处未显示)。

现在的关系是这样的(__proto__ 是一个内部属性，将对象与其原型(prototype)连接起来):

                               +-------------+
                               |   ThingA    |
                               |             |    
+-------------+                |  prototype  |----+
|   ThingA1   |                +-------------+    |
|             |                                   |
|  prototype  |---> +--------------+              |
+-------------+     |    ThingA    |              |
                    | instance (1) |              |
                    |              |              |
+-------------+     |  __proto__   |--------------+ 
|   ThingA1   |     +--------------+              |
|   instance  |           ^                       |
|             |           |                       v
|  __proto__  |-----------+                 +--------------+
+-------------+                             |Thing instance|
                                            |              |
                                            | relatedThings|---> Array
+-------------+     +--------------+        +--------------+ 
|   ThingA2   |     |   ThingA     |              ^
|             |     | instance (2) |              |
|  prototype  |---> |              |              |
+-------------+     |  __proto__   |--------------+
                    +--------------+
+-------------+           ^
|   ThingA2   |           |  
|   instance  |           |
|             |           |
|  __proto__  |-----------+
+-------------+                        

正因为如此，ThingA 的每个实例, ThingA1或 ThingA2 引用同一个数组实例。

这不是您想要的!

解决方案

要解决这个问题，任何“子类”的每个实例都应该自己 relatedThings属性(property)。您可以通过在每个子构造函数中调用父构造函数来实现此目的，类似于调用 super()在其他语言中:

function ThingA() {
    Thing.call(this);
}

function ThingA1() {
    ThingA.call(this);
}

// ...

这调用了 Thing和 ThingA并设置 this在这些函数中，您传递给 .call 的第一个参数.了解有关 .call ^[MDN] 的更多信息和 this ^[MDN] .

仅此一项就会将上图更改为:

                               +-------------+
                               |   ThingA    |
                               |             |    
+-------------+                |  prototype  |----+
|   ThingA1   |                +-------------+    |
|             |                                   |
|  prototype  |---> +--------------+              |
+-------------+     |    ThingA    |              |
                    | instance (1) |              |
                    |              |              |
                    | relatedThings|---> Array    |
+-------------+     |  __proto__   |--------------+ 
|   ThingA1   |     +--------------+              |
|   instance  |           ^                       |
|             |           |                       |
|relatedThings|---> Array |                       v
|  __proto__  |-----------+                 +--------------+
+-------------+                             |Thing instance|
                                            |              |
                                            | relatedThings|---> Array
+-------------+     +--------------+        +--------------+ 
|   ThingA2   |     |   ThingA     |              ^
|             |     | instance (2) |              |
|  prototype  |---> |              |              |
+-------------+     | relatedThings|---> Array    |
                    |  __proto__   |--------------+
                    +--------------+
+-------------+           ^
|   ThingA2   |           |  
|   instance  |           |
|             |           |
|relatedThings|---> Array | 
|  __proto__  |-----------+
+-------------+

如您所见，每个实例都有自己的 relatedThings属性，它引用不同的数组实例。还有relatedThings原型(prototype)链中的属性，但它们都被实例属性遮蔽。

更好的继承

此外，不要将原型(prototype)设置为:

ThingA.prototype = new Thing();

您实际上并不想创建一个新的 Thing在这里举例。如果 Thing 会发生什么预期的论点？你会通过哪一个？如果调用 Thing 怎么办？构造函数有副作用？

你实际上想要的是连接 Thing.prototype进入原型(prototype)链。你可以用 Object.create ^[MDN] 来做到这一点:

ThingA.prototype = Object.create(Thing.prototype);

执行构造函数(Thing)时发生的任何事情都会在我们实际创建新的ThingA 时发生。实例(如上所示调用 Thing.call(this))。

关于Javascript "OOP"和具有多级继承的原型(prototype)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15040955/