Javascript“OOP”和具有多级继承的原型答案

【问题标题】：Javascript "OOP" and prototypes with multiple-level inheritanceJavascript“OOP”和具有多级继承的原型
【发布时间】：2013-02-09 01:27:58
【问题描述】：

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

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

最简单的例子是：

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');

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

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

提前致谢。

【问题讨论】：

JavaScript 几乎都是基于对象的，为什么不应该是面向对象的呢？
据我所知，原型语言与面向对象的语言并不完全相同（没有类等），尽管概念可能相似。但我不是专家。
JavaScript 强烈面向对象这一事实并不意味着它的工作方式与其他 OO 语言相同。事实上，继承是不支持的。许多库实现了高级方法，这些方法确实是改进继承工作方式的解决方法。目前我发现的最好的之一是 John Resig 的，它基于 Prototype 和 base2 库，但进一步改进。 ejohn.org/blog/simple-javascript-inheritance
您的代码没有按预期工作吗？不明白你想要什么结果和你得到了什么
@Joel_Blum 执行后，所有对象在它们各自的relatedThings 数组中都有一个“hello”。我原以为只有 thingList[1] 会拥有它。

标签： javascript inheritance prototype

【解决方案1】：

欢迎来到原型链！

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

问题

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

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

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

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

所以ThingA 的每个实例都将继承自Thing 实例。现在您将创建ThingA1 和ThingA2 并为它们的每个原型分配一个新的ThingA 实例，然后创建ThingA1 和ThingA2 的实例（以及ThingA 和Thing，但是此处未显示）。

现在的关系是这样的（__proto__ 是一个内部属性，连接一个对象和它的原型）：

                               +-------------+
                               |   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 属性。您可以通过在每个子构造函数中调用父构造函数来实现这一点，类似于在其他语言中调用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属性，但都被实例属性遮蔽了。

更好的继承

另外，不要将原型设置为：

ThingA.prototype = new Thing();

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

您实际上想要的是将Thing.prototype 连接到原型链中。你可以通过Object.create ^[MDN] 做到这一点：

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

在执行构造函数 (Thing) 时发生的任何事情都会在稍后发生，当我们实际创建一个新的 ThingA 实例时（通过调用 Thing.call(this)，如上所示）。

【讨论】：

好吧。我会停止写我要写的东西。坚定的回应。 +1
@Felix ：令人印象深刻的反应，我现在正在测试。只是另一个问题：我改变了我设置原型的方式，但应该以与我相同的方式指定构造函数吗？即：ThingA.prototype.constructor = ThingA;
@neverbot：嗯，我希望它有帮助，也许它太混乱了：D 设置constructor 不是必需，因为没有内部方法使用它，但它是好的做法。
很好的解释。 +1 的努力。
漂亮的图表。对于最后一部分，在What is the reason (not) to use the 'new' keyword here? 有一些很好的答案。

【解决方案2】：

如果您不喜欢 JavaScript 中的原型设计方式以实现简单的继承和 OOP，我建议您看一下：https://github.com/haroldiedema/joii

它基本上允许您执行以下（以及更多）操作：

// First (bottom level)
var Person = new Class(function() {
    this.name = "Unknown Person";
});

// Employee, extend on Person & apply the Role property.
var Employee = new Class({ extends: Person }, function() {
    this.name = 'Unknown Employee';
    this.role = 'Employee';
});

// 3rd level, extend on Employee. Modify existing properties.
var Manager = new Class({ extends: Employee }, function() {

    // Overwrite the value of 'role'.
    this.role = 'Manager';

    // Class constructor to apply the given 'name' value.
    this.__construct = function(name) {
        this.name = name;
    }
});

// And to use the final result:
var myManager = new Manager("John Smith");
console.log( myManager.name ); // John Smith
console.log( myManager.role ); // Manager

【讨论】：

【解决方案3】：

在 OOP 中，当您定义子类的构造函数时，您也（隐式或显式）从超类型中选择构造函数。当一个子对象被构造时，两个构造函数都会被执行，首先是从超类开始的，然后是所有其他的。

在 javascript 中，这必须显式调用并且不会自动调用！

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

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

function ThingA1(){
  ThingA.call(this);
}
ThingA1.prototype = new ThingA();

function ThingA2(){
  ThingA.call(this);

}
ThingA2.prototype = new ThingA();

如果你不这样，ThingA、ThingA1 和 ThingA2 的所有实例都将在 Thing 构造函数中构造相同的 relatedThings 数组，并为所有实例调用一次：

ThingA.prototype = new Thing();

事实上，在您的代码中，您只有 2 次调用 Thing 构造函数，这导致只有 2 个 relatedThings 数组实例。

【讨论】：

@Felix Kling：感谢您的建议，我已更正。我也读了你的，恭喜:)