gpt4 book ai didi

javascript - 创建 javascript 子类型的实例会产生意外行为

转载 作者:行者123 更新时间:2023-11-30 18:22:58 24 4
gpt4 key购买 nike

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

情况

我正在努力研究 javascript 中的原型(prototype)和继承。用例是单个基本类型“A”。和一个子类型“B”。下面是演示该问题的最简单代码示例。可以看到工作版本here .

<!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。
  • 但是,对第二个按钮执行相同的操作,仅将“B”的 1 个实例添加到 DOM 并将其保留在那里。无论一次点击多少次。
  • 如果您在此之后单击“A”,则会按预期再次创建一个新的“A”。
  • 再次单击第二个按钮,只需将现有的“B”节点移动到节点列表中的最后一个位置。

为什么 make_b() 的行为方式与 make_a() 不同?

一些注意事项:

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

最佳答案

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

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

这是 fiddle :http://jsfiddle.net/QUnDK/

关于javascript - 创建 javascript 子类型的实例会产生意外行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11601932/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com