Javascript 子类化和 createElement

Question

函数 A() { this.myProp = document.createElement("div");

function B(id) {
    this.myProp.id = id;
    document.body.appendChild(this.myProp); }

B.prototype = new A();

window.onload = function() {
    new B("hello");
    new B("goodbye"); }

这里发生的是，我最终得到了一个 ID 为“goodbye”的 div。我想要的是两个具有指定 ID 的 div。

我已经能够通过创建一个创建元素的“A”方法来解决这个问题。

不使用该方法如何修复它？

Answer 1

创建new B()时必须调用构造函数A():

function A() {
    this.myProp = document.createElement("div");
}

function B(id) {
    A.call(this); // !!!
    this.myProp.id = id;
    document.body.appendChild(this.myProp);
}

如果你想让 B 实例继承自 A.prototype，不要将 B.prototype 设置为 A 实例，但使用 Object.create() - 或旧版浏览器的自定义实现 - 以避免调用构造函数:

var clone = Object.create || (function() {
    function Dummy() {}
    return function(obj) {
        Dummy.prototype = obj;
        return new Dummy;
    };
})();

B.prototype = clone(A.prototype);