Question

请帮助解决问题。我创建棋盘并使用单身^

Board = function(){ 
  var self = this;

  self.fillBoard = function(){
    for (var x = 0; x < self.x; x++){
      self.board[x] = [];

      for (var y = 0; y < self.y; y = y + 2){
        x%2 ? self.board[x][y] = 1 : self.board[x][y] = 0;
      }

      for (var y = 1; y < self.y; y = y + 2){
        x%2 ? self.board[x][y] = 0 : self.board[x][y] = 1;        
      }     
    }
  }

  self.x = 8; 
  self.y = 8; 
  self.board = [];
  self.fillBoard();

  self.outputBoard = function(){
    for (var x = 0; x < self.x; x = x + 1){
      for (var y = 0; y < self.y; y = y + 1){
        if(self.board[x][y] == 1){
          $('#board').append('<div class="board_cell" style="left: ' + x * 40 + 'px; top: ' + y * 40 + 'px"></div>');
        };
      }
    }   
  }
}

Board.getInstance = function(){
    if(!this.instance){
        this.instance = new this();
    }
    return this.instance;
};


// ------------------------------------------------------------------------------------ init
$(document).ready(function(){
  board1 = Board.getInstance();
  board1.outputBoard();

  board2 = Board.getInstance();
  board2.outputBoard(); 

  console.log(board1 == board2);
});

但是对象板的初始化块

self.x = 8; 
self.y = 8; 
self.board = [];
self.fillBoard();

低于self.fillBoard()

我需要移动init block upper：

Board = function(){ 
  var self = this;

  self.x = 8; 
  self.y = 8; 
  self.board = [];
  self.fillBoard();

  self.fillBoard = function(){
    for (var x = 0; x < self.x; x++){
      self.board[x] = [];

      for (var y = 0; y < self.y; y = y + 2){
        x%2 ? self.board[x][y] = 1 : self.board[x][y] = 0;
      }

      for (var y = 1; y < self.y; y = y + 2){
        x%2 ? self.board[x][y] = 0 : self.board[x][y] = 1;        
      }     
    }
  }

  ..............
  ...........

但控制台输出会显示错误消息：

未捕获的TypeError：self.fillBoard不是函数

ps：codepen在这里http://codepen.io/anon/pen/RraydM

Answer 1

self.fillBoard =...定义了该函数。在此之前它不存在。

self.fillBoard();调用该函数。如果在调用该函数时该函数不存在，则会出现异常。解决这个问题，只需按照您的方式移动代码，但将self.fillBoard();函数调用移至self.fillBoard =...定义下方。

这样可行......

Board = function(){ 

  var self = this;

  self.x = 8; 
  self.y = 8; 
  self.board = [];

  self.fillBoard = function(){
    for (var x = 0; x < self.x; x++){
      self.board[x] = [];

      for (var y = 0; y < self.y; y = y + 2){
        x%2 ? self.board[x][y] = 1 : self.board[x][y] = 0;
      }

      for (var y = 1; y < self.y; y = y + 2){
        x%2 ? self.board[x][y] = 0 : self.board[x][y] = 1;        
      }     
    }
  }

  self.fillBoard();

  ..............
  ...........

Answer 2

将原型用于对象的方法：

Board = function(){ 
  var self = this;

  self.x = 8; 
  self.y = 8; 
  self.board = [];
  self.fillBoard();
}

Board.prototype.fillBoard = function(){
  for (var x = 0; x < this.x; x++){
    this.board[x] = [];

    for (var y = 0; y < this.y; y = y + 2){
      x%2 ? this.board[x][y] = 1 : this.board[x][y] = 0;
    }

    for (var y = 1; y < this.y; y = y + 2){
      x%2 ? this.board[x][y] = 0 : this.board[x][y] = 1;        
    }     
  }
};

进行一些优化：

Board.prototype.fillBoard = function(){
  for (var x = 0; x < this.x; x++){
    this.board[x] = [];

    for (var y = 0; y < this.y; y = y + 2){
      this.board[x][y] = x%2 ? 1 : 0;
    }

    for (var y = 1; y < this.y; y = y + 2){
      this.board[x][y] = x%2 ? 0 : 1;
    }     
  }
};

如何更改对象中代码的顺序？

2 个答案: