0

JavaScript コードに問題があります。この関数を数回実行するループを使用します。

addGameButton = function(color,id) {
        gameButton[gameButton.length] = new GameButton(color,id);
      };

したがって、gameButton という GameButton オブジェクトの配列があります。それぞれ異なる色と ID を持つ新しいゲームボタンを追加しようとしています。ただし、すべてのオブジェクトが同じ値を持つことになります。配列に値を割り当てる方法に問題があると思います。以下は全体の例です。

function GameButton(c, i) {
  color = c;
  id = i;
  markup = '<div class="'+i+'"></div>';

  this.getColor = function () {
    return color;
  };
  this.getMarkup = function () {
    return markup;
  };
}

function GameBoard() {
  gameButton = new Array();

  addGameButton = function(color,id) {
    gameButton[gameButton.length] = new GameButton(color,id);
  };

  this.createGameBoard = function (color) {

    color = ["red", "green", "blue"];
    addButtons(color);
  };

  addButtons = function (color) {
    var i = 0;
    for (i=0; i <color.length; i++) {
      addGameButton(color[i],i);
    }
  };

  this.getGameButton = function (index) {
    return gameButton[index];
  };
}

$(document).ready(function(){
  gameBoard = new GameBoard();
  gameBoard.createGameBoard();

  b = gameBoard.getGameButton(0);
  console.log(b.getColor());
  // returns blue instead of red, also getGameButton(1) has the same values
});
4

2 に答える 2

2

問題は、多くの場所でグローバル ウィンドウ オブジェクトに値を代入していて、それらが互いに上書きして混乱を引き起こすことです。この問題を解決するには、ローカルで変数を作成する必要があります。何が変更されたかを説明するコメントとともに、改訂されたコードを見てください。

function GameButton(c, i) {
  var color = c; //use var to avoid assigning this variable  to window object
  var id = i; //use var to avoid assigning this variable  to window object
  var markup = '<div class="'+i+'"></div>'; //use var to avoid assigning this variable  to window object

  this.getColor = function () {
    return color;
  };
  this.getMarkup = function () {
    return markup;
  };
}

function GameBoard() {
  //use var to avoid assigning this variable to window object
  var gameButton = new Array();

  //This will declare a local function intead of assigning the function to window object like in your code.
  function addGameButton(color,id) {
    gameButton[gameButton.length] = new GameButton(color,id);
  };

  this.createGameBoard = function (color) {

    var col = color || ["red", "green", "blue"]; //Use default ["red", "green", "blue"] if there is no color passing in
    addButtons(col);
  };

   //This will declare a local function intead of assigning the function to window     object like in your code.
  function addButtons(color) {
    var i = 0;
    for (i=0; i <color.length; i++) {
      addGameButton(color[i],i);
    }
  };

  this.getGameButton = function (index) {
    return gameButton[index];
  };
}

$(document).ready(function(){
  //Declare a local variable.
  var gameBoard = new GameBoard();
  gameBoard.createGameBoard();

  var b = gameBoard.getGameButton(0);
  console.log(b.getColor());

});
于 2013-08-11T11:42:09.380 に答える
1

ローカル変数の使い方を学ぶ必要があります。現在color、idとは、インスタンスmarkupから設定および読み取られる暗黙的なグローバル変数です。GameButton

varステートメントを使用して、それらをコンストラクターに対してローカルとして宣言します。

于 2013-08-11T11:27:53.170 に答える