मुझे कक्षा विधि को परिभाषित करने में समस्या हो रही है:

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

}
0
Jonathan Regis 1 अप्रैल 2018, 14:55

4 जवाब

सबसे बढ़िया उत्तर

ऐसा लगता है कि आप ES6 सिंटैक्स का उपयोग कर रहे हैं। ES6 में जैसे फंक्शन लिखें

shuffleBoard() {
    // rest of the code
}

और इसे एक्सेस करने के लिए this कीवर्ड का उपयोग करें। जैसे this.shuffleBoard()

इसे सेटटाइमआउट में कॉल करने के लिए, एरो फ़ंक्शंस का उपयोग करें

setTimeout(() => { this.shuffleBoard(loopArray); }, 4000);
1
null 1 अप्रैल 2018, 12:48

रास्ता 1: 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++;
    });
  }
}
0
xianshenglu 1 अप्रैल 2018, 12:04
shuffleBoard = function(arr){
    // rest of code
})

फिर आप विधि का उपयोग इस प्रकार कर सकते हैं:

let board = new Board()
board.shuffleBoard()
0
Cholowao 1 अप्रैल 2018, 12:03

1. आपको स्कोप रखने के लिए एक एरो फंक्शन का उपयोग करना होगा, क्योंकि अन्यथा this टाइमआउट में बनाए गए नए फंक्शन की ओर इशारा करेगा।

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

2. निर्माता को कुछ भी वापस नहीं करना चाहिए क्योंकि यह इसे उस वस्तु को वापस करने से रोकता है जो इसे बनाता है

3.jQuery .forEach() के बजाय jQuery ऑब्जेक्ट्स पर पुनरावृति करने के लिए .each() का उपयोग करता है।

मैंने नोट्स को सीधे कोड में टिप्पणियों के रूप में भी रखा है:

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([]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1
Sebastian Speitel 1 अप्रैल 2018, 12:03