2017-08-31 11 views
0

プロトタイプにも関数で作成されたプロトタイプDOM要素を割り当てる必要があります。DOMからコンストラクタプロトタイプへの要素の割り当て

私は以下のコメントにすべて説明しました。

要約:私のプロトタイプ関数は、DOM要素を生成し、本体に入れ、プロトタイプのプロパティなどにすぐに参照を割り当てます。 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. 

おかげで任意のヘルプ:)

+0

、ないグローバル/静的なプロトタイプに:


ここではその変化との完全なコードですか?なぜDOM要素を共有したいのですか?通常、それはまさに私たちが避けたいものです。 – Bergi

答えて

0

のプロトタイプになるように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(およびすべてのインスタンスがMonsterなど)で共有されます。

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); 
+1

また、 'this.class'定数を' 'box ''としてインライン化しなければなりません – Bergi

関連する問題