javascript - 这是我应该使用 Javascript 原型(prototype)继承看到的行为吗？

Question

我是 Javascript 的新手，对使用继承有疑问

这篇文章到目前为止很有帮助 ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#More_flexible_constructors )，但我在 Chrome 调试器中观察到的行为似乎与我预期的不符。

我有两种情况:

Base = function () {
    this.value = 0;
};

Base.prototype.constructor = Base;

Derived = function () {
    Base.call(this);
};

Derived.prototype = new Base();
Derived.prototype.constructor = Derived;

在调试器中我看到了这个:

跨过作业后，我看到了这个

实例中的值已更改，但原型(prototype)中的值未更改。这是意料之中的事吗？

我不太明白的第二种方法是这个(再次在此处引用 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#More_flexible_constructors(请参阅“重新访问属性继承”部分底部截取的代码)

Base = function () {
};

Base.prototype.constructor = Base;
Base.prototype.value = 0;

// Derived as before...

在作业之后

Value 已添加为新属性。这不应该改变原型(prototype)中的值吗？或者我是否明确需要通过原型(prototype)访问该值 - 例如derived.value.prototype.value = 5

如有任何相关信息，我们将不胜感激!

谢谢!

更新:

谢谢大家的回复，原来是我没有在适当的时候使用Object.create的问题。我将我的代码更新为:

在调试器中我得到了预期的结果:

这看起来不错! :)

感谢@sixfingeredman 和@Bergi 的帮助!

Answer 1

首先，虽然不是主题，但删除这一行:

Base.prototype.constructor = Base;

它没有做任何有用的事情。

现在回答您的问题，是的，这种行为是预期的。想象一下，如果它更新了 .prototype。因为 .prototype 在所有实例之间共享，所以所有实例都会看到更新。那肯定不是你想要的。

当你这样做的时候:

var derived = new Derived();

您创建了一个继承自 Derived.prototype 的新对象。

当你这样做的时候:

derived.value = 1;

您直接为该新对象分配了一个值。

所以在赋值之前，继承链是这样的:

  derived            Derived.prototype      Base.prototype       Object.prototype
+-----------+         +-----------+         +-----------+         +-----------+
|           |         |           |         |           |         |           |
|           |---------|  value:0  |---------|           |---------|           |
|           |         |           |         |           |         |           |
+-----------+         +-----------+         +-----------+         +-----------+

在分配之后，它看起来像这样:

  derived            Derived.prototype      Base.prototype       Object.prototype
+-----------+         +-----------+         +-----------+         +-----------+
|           |         |           |         |           |         |           |
|  value:1  |---------|  value:0  |---------|           |---------|           |
|           |         |           |         |           |         |           |
+-----------+         +-----------+         +-----------+         +-----------+

因此在赋值之前，如果您在 derived 对象上查找 value，它不会被发现，因此它会跳转到 Derived。原型(prototype)，它会在哪里找到它。

但在分配之后，值 将直接在您的derived 对象上找到。

---

使用第二种方式，原型(prototype)链将开始看起来像这样:

  derived            Derived.prototype      Base.prototype       Object.prototype
+-----------+         +-----------+         +-----------+         +-----------+
|           |         |           |         |           |         |           |
|           |---------|           |---------|  value:0  |---------|           |
|           |         |           |         |           |         |           |
+-----------+         +-----------+         +-----------+         +-----------+

所以当在 derived 上查找 value 时，它会从 derived 遍历到 Derived.prototype 到 Base.prototype 在它找到 value 属性之前。

---

假设您从 Derived 构造函数创建了一堆对象。上面的草图会发生变化，这样您创建的每个对象都会指向 Derived.prototype。

  derived_1
+-----------+        
|           |
|           |
|           |
+-----------+
             \______
                    \
                     \
  derived_2          Derived.prototype      Base.prototype       Object.prototype
+-----------+         +-----------+         +-----------+         +-----------+
|           |         |           |         |           |         |           |
|           |---------|           |---------|  value:0  |---------|           |
|           |         |           |         |           |         |           |
+-----------+         +-----------+         +-----------+         +-----------+
                      /
               ______/
  derived_3   /
+-----------+        
|           |
|           |
|           |
+-----------+        

现在您可能明白为什么不想更新原型(prototype)了。

如果我们执行 derived_1.value = 42 并且它更新了 Derived.prototype 对象，那么当您去查找 value 时从 derived_2 和 derived_3，您将获得分配给 derived_1 的值。