将 DOM 中的元素分配给构造函数原型

Question

我想将使用原型上的函数创建的 DOM 元素分配给我的原型。

我已经在下面的 cmets 中描述了所有内容。

总结：我的原型函数应该生成 DOM 元素，将它们放入 body 并立即将它们的引用分配给原型的属性，例如。 Game.prototype.boxes = // 新创建的 DOM 元素。

function Game() {

    this.class = 'box';
    // this.boxes = this.createBoxes(); // It almost works, but isn't on prototype and is duplicated, when I create instance of Monstar class.

}

// Game.prototype.boxes = this.createBoxes(); // I know, in this context 'this' isn't my constructor, but this is method I want to achieve
// Game.prototype.boxes = $('.' + this.class); // As above - 'this' isn't my constructor
Game.prototype.boxes = Game.prototype.createBoxes(); // Alternative test from the lines above. It have to be on my prototype.

Game.prototype.createBoxes = function () {

    var docFragment = document.createDocumentFragment();

    for(var i  = 0; i < 20; i++) {

        var elem = $('<div>', {
            class: this.class
        });

        elem.appendTo(docFragment);

    }

    $(docFragment).appendTo($('body'));

    return $('.' + this.class);

};

function Monster() {

    Game.call(this);

    console.log(this.boxes); // Finally this should returns array with my DOM elements created using prototype createBoxes function.

}

Monster.prototype = Object.create(Game.prototype);
Monster.prototype.constructor = Monster;

var game = new Game(),
    monster = new Monster();

console.log(game.boxes); // Finally this should returns array with my DOM elements created using prototype createBoxes function.

感谢您的帮助:)

Answer 1

createBoxes 不需要出现在原型上。事实上，一旦它完成它的工作，它就根本不需要留下来，所以我只需将它内联（也将 class 属性从实例移动到函数）：

Game.class = "box";
Game.prototype.boxes = (function() {
    var docFragment = document.createDocumentFragment();
    for(var i  = 0; i < 20; i++) {
        var elem = $('<div>', {
            class: this.class
        });
        elem.appendTo(docFragment);
    }
    $(docFragment).appendTo($('body'));
    return $('.' + Game.class);
})();

我很确定您已经意识到这一点，但只是强调一下：您将拥有 一个 框数组，由 Game 的所有实例（以及 @987654325 的所有实例）共享@ 等）。

如果每个Game 的class 都不同，那么在原型上使用boxes 根本没有任何意义。

---

以下是该更改的完整代码：

function Game() {
}
Game.class = "box";
Game.prototype.boxes = (function() {
    var docFragment = document.createDocumentFragment();
    for(var i  = 0; i < 20; i++) {
        var elem = $('<div>', {
            class: this.class
        });
        elem.appendTo(docFragment);
    }
    $(docFragment).appendTo($('body'));
    return $('.' + Game.class);
})();

function Monster() {
    Game.call(this);
    console.log(this.boxes);
}
Monster.prototype = Object.create(Game.prototype);
Monster.prototype.constructor = Monster;

var game = new Game(),
    monster = new Monster();

console.log(game.boxes);