如何更改對象中代碼的順序？

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()

下面我需要移動初始化模塊上：

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;   
     }  
    } 
    } 

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

但控制檯輸出錯誤信息：

Uncaught TypeError: self.fillBoard is not a function

PS：codepen在這裏​​

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; 
    }  
    } 
};