Question

我在定义类方法时遇到问题：

this.method = function(){...}

我在“。”处收到错误。在“这个”之后。

如果我直接使用method(){...}声明方法，我无法在其他方法中引用它，因为它表明该方法未定义。

我想要解决的方法是shuffleBoard()。我该怎么做？

class Board {

   constructor(size,boardId){
       this.boardId = boardId;
       switch(size){
           case "medium":
               var boardSize = 560;
               var tiles = 7*7;
               break;
           case "large":
               boardSize = 720;
               tiles = 9*9;
               break;
           default:
               boardSize = 320;
               tiles = 4*4;
               break;
       }

       var container = $(this.boardId+" .tiles-container");

           var row = 0;
           var loopArray = [];
       for(var i = 0;i < tiles; i++){
           var tile = document.createElement("div");
           loopArray.push(i);
           var text = i+1;
           tile.setAttribute("index",i+1);
           tile.id = i+1;
           if(i == tiles - 1){
               var empty = "empty"
           }
           tile.setAttribute("class","tile "+empty);
           tile.innerText = text;
           container.append(tile);
           (function(){
           tile.onclick = function(){
               var tileObject = new Tile(this.getAttribute("index"));
               console.log(tileObject.move());
           }
           })()

           var prevRow = row;

           if(i%4 == 0 && i != 0){
               row++
           }

           if(row > prevRow){
               var positionX = 0;
           }

           else{
               var positionX = (i%4)*80;
           }

           var positionY = row*80;
           tile.style.top=positionY+"px";

           tile.style.left=positionX+"px";
           console.log(i+"---"+row+"////"+prevRow);
       }
       setTimeout(function(){this.shuffleBoard(loopArray);},4000);

       return container;
   }

   this.shuffleBoard = function(arr){
       var i = 0;
       console.log(this.boardId);
       $(this.boardId+" .tiles-container tile").forEach(function(el){
           var shuffled = shuffle(arr);
           el.innerText = shuffled[i];
           arr.pop(arr[i]);
           i++
       });
   }

}

Answer 1

您似乎正在使用ES6语法。在ES6中写入函数，如

shuffleBoard() {
    // rest of the code
}

并使用this关键字访问它。比如this.shuffleBoard()。

要在setTimeout中调用它，请使用箭头函数

setTimeout(() => { this.shuffleBoard(loopArray); }, 4000);

Answer 2

1.您必须使用箭头函数来保留范围，否则this将指向超时中创建的新函数。

setTimeout(() => {
      this.shuffleBoard(loopArray);
    }, 4000);

2.构造函数不能返回任何内容，因为它阻止它返回它构造的对象

3.jQuery使用.each()迭代jQuery对象而不是.forEach()。

我将笔记直接放在代码中作为评论：

＆＃13;

class Board {

  constructor(size, boardId) {
    this.boardId = boardId;
    switch (size) {
      case "medium":
        var boardSize = 560;
        var tiles = 7 * 7;
        break;
      case "large":
        boardSize = 720;
        tiles = 9 * 9;
        break;
      default:
        boardSize = 320;
        tiles = 4 * 4;
        break;
    }

    var container = $(this.boardId + " .tiles-container");

    var row = 0;
    var loopArray = [];
    for (var i = 0; i < tiles; i++) {
      var tile = document.createElement("div");
      loopArray.push(i);
      var text = i + 1;
      tile.setAttribute("index", i + 1);
      tile.id = i + 1;
      if (i == tiles - 1) {
        var empty = "empty"
      }
      tile.setAttribute("class", "tile " + empty);
      tile.innerText = text;
      container.append(tile);
      (function() {
        tile.onclick = function() {
          var tileObject = new Tile(this.getAttribute("index"));
          console.log(tileObject.move());
        }
      })()

      var prevRow = row;

      if (i % 4 == 0 && i != 0) {
        row++
      }

      if (row > prevRow) {
        var positionX = 0;
      } else {
        var positionX = (i % 4) * 80;
      }

      var positionY = row * 80;
      tile.style.top = positionY + "px";

      tile.style.left = positionX + "px";
      console.log(i + "---" + row + "////" + prevRow);
    }
    setTimeout(() => { //use arrow function to keep the scope
      this.shuffleBoard(loopArray);
    }, 4000);

    //return container; returning the container here prevents the constructor from returning the constructed object
  }

  shuffleBoard(arr) {
    var i = 0;
    console.log(this.boardId);
    $(this.boardId + " .tiles-container tile").each(function(el) { //jQuery uses .each instead of forEach
      var shuffled = shuffle(arr);
      el.innerText = shuffled[i];
      arr.pop(arr[i]);
      i++
    });
  }

}

let board = new Board("medium", "myboard");
console.log(board.shuffleBoard);
board.shuffleBoard([]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

shuffleBoard = function(arr){
    // rest of code
})

然后你可以使用方法：

let board = new Board()
board.shuffleBoard()

Answer 4

way1：将this.propertyName移至构造函数

class Board{

   constructor(size,boardId){
       this.boardId = boardId;
       switch(size){
           case "medium":
               var boardSize = 560;
               var tiles = 7*7;
               break;
           case "large":
               boardSize = 720;
               tiles = 9*9;
               break;
           default:
               boardSize = 320;
               tiles = 4*4;
               break;
       }

       var container = $(this.boardId+" .tiles-container");

           var row = 0;
           var loopArray = [];
       for(var i = 0;i < tiles; i++){
           var tile = document.createElement("div");
           loopArray.push(i);
           var text = i+1;
           tile.setAttribute("index",i+1);
           tile.id = i+1;
           if(i == tiles - 1){
               var empty = "empty"
           }
           tile.setAttribute("class","tile "+empty);
           tile.innerText = text;
           container.append(tile);
           (function(){
           tile.onclick = function(){
               var tileObject = new Tile(this.getAttribute("index"));
               console.log(tileObject.move());
           }
           })()

           var prevRow = row;

           if(i%4 == 0 && i != 0){
               row++
           }

           if(row > prevRow){
               var positionX = 0;
           }

           else{
               var positionX = (i%4)*80;
           }

           var positionY = row*80;
           tile.style.top=positionY+"px";

           tile.style.left=positionX+"px";
           console.log(i+"---"+row+"////"+prevRow);
       }
       setTimeout(function(){this.shuffleBoard(loopArray);},4000);

       this.shuffleBoard = function(arr) {
         var i = 0;
         console.log(this.boardId);
         $(this.boardId + " .tiles-container tile").forEach(function(
           el
         ) {
           var shuffled = shuffle(arr);
           el.innerText = shuffled[i];
           arr.pop(arr[i]);
           i++;
         });
       }

       return container;
   }
}

way2：将this.propertyName更改为className.prototype

中的方法

class Board {
  constructor(size, boardId) {
    this.boardId = boardId;
    switch (size) {
      case "medium":
        var boardSize = 560;
        var tiles = 7 * 7;
        break;
      case "large":
        boardSize = 720;
        tiles = 9 * 9;
        break;
      default:
        boardSize = 320;
        tiles = 4 * 4;
        break;
    }

    var container = $(this.boardId + " .tiles-container");

    var row = 0;
    var loopArray = [];
    for (var i = 0; i < tiles; i++) {
      var tile = document.createElement("div");
      loopArray.push(i);
      var text = i + 1;
      tile.setAttribute("index", i + 1);
      tile.id = i + 1;
      if (i == tiles - 1) {
        var empty = "empty";
      }
      tile.setAttribute("class", "tile " + empty);
      tile.innerText = text;
      container.append(tile);
      (function() {
        tile.onclick = function() {
          var tileObject = new Tile(this.getAttribute("index"));
          console.log(tileObject.move());
        };
      })();

      var prevRow = row;

      if (i % 4 == 0 && i != 0) {
        row++;
      }

      if (row > prevRow) {
        var positionX = 0;
      } else {
        var positionX = (i % 4) * 80;
      }

      var positionY = row * 80;
      tile.style.top = positionY + "px";

      tile.style.left = positionX + "px";
      console.log(i + "---" + row + "////" + prevRow);
    }
    setTimeout(function() {
      this.shuffleBoard(loopArray);
    }, 4000);
    return container;
  }
  shuffleBoard(arr) {
    var i = 0;
    console.log(this.boardId);
    $(this.boardId + " .tiles-container tile").forEach(function(el) {
      var shuffled = shuffle(arr);
      el.innerText = shuffled[i];
      arr.pop(arr[i]);
      i++;
    });
  }
}

Javascript类方法声明抛出令牌错误

4 个答案: