1

标题有点含糊，但老实说，如果不了解此问题的解决方案，我无法更好地定义它。

情况

我正试图围绕javascript中的原型和继承。用例是单个基本类型“A”。和一个单一的子类型'B'。这是演示该问题的最简单代码的示例。可以在这里看到一个工作版本。

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
    function A () {
        this.node = document.createElement('div');
        this.node.innerHTML = 'A';
    }

    A.prototype.show = function () {
        document.body.appendChild(this.node);
    }

    function B () {
        this.node.innerHTML = 'B';
    }

    B.prototype = new A();
    B.prototype.constructor = B;

    function make_a () {
        (new A()).show();
    }

    function make_b () {
        (new B()).show();
    }
  </script>
 </head>
 <body>
  <button onclick="make_a()">Make A</button>
  <button onclick="make_b()">Make B</button>
 </body>
</html>

问题

  • 单击第一个按钮会执行我期望的操作：它会在每次单击时创建一个新的“A”实例并将其添加到 DOM。
  • 但是，对第二个按钮执行相同操作，只会将 1 个“B”实例添加到 DOM 并保留它。无论点击多少次。
  • 如果在此之后单击“A”，则会再次按预期创建一个新的“A”。
  • 再次单击第二个按钮，只需将现有的“B”节点移动到节点列表中的最后一个位置。

为什么make_b()行为方式不一样make_a()？

一些注意事项：

正在测试的浏览器是 Chromium 20+ 和 Firefox 13+。

4

2 回答 2

1

您必须A从构造函数中调用构造B函数：

function B () {
    A.call(this);
    this.node.innerHTML = 'B';
}

这是小提琴：http: //jsfiddle.net/QUnDK/

于 2012-07-22T16:27:29.957 回答
1

解释：

修改时

A.prototype.show = function () {
    document.body.appendChild(this.node);
    document.body.appendChild(this.node);
}

可以看到，多次调用具有相同节点参数的 appendChild 不会导致多个 appendend child。

修改时

function B () {
    this.node.innerHTML = Math.random() > 0.5 ? "B":"C";
}

可以看到函数 B 覆盖了最后插入的孩子（由 A）。（B() 本身不创建 div）。

通过指令 B.prototype = new A(); 在页面加载时调用函数 A(); 并且无论何时按下按钮 A。因此，在按钮 B 可能被激活之前，总会有一个最新创建的 div 子级。每当调用 show() 时，这个最新创建的 div 都会附加到文档中，即响应按钮单击。

函数 B() 不会创建新的 div 节点，因此 B() 使用 A() 创建/附加的最新子节点来插入“B”。

于 2012-07-22T17:20:17.797 回答