Контекст вызова.Не видит массив [дубликат]

135

21 октября 2019, 05:50

На данный вопрос уже ответили:

Потеря контекста вызова 5 ответов

class ConfigField { 
  constructor() { 
    this.canvas = document.querySelector('#canvas'); 
    this.context = this.canvas.getContext('2d'); 
    this.array = []; 
    let timer; 
    this.timer = timer; 
    this.generatePlayingField(); 
    this.canvas.addEventListener('click', (e) => { 
      this.clickCanvasEvent(e); 
    }); 
    this.drawGrid(); 
    document.getElementById('start').addEventListener('click', () => this.startLife(this)); 
  } 
  generatePlayingField() { 
    const n = 50, 
      m = 50; 
    for (let i = 0; i < m; i++) { 
      this.array[i] = []; 
      for (let j = 0; j < n; j++) { 
        this.array[i][j] = 0; 
      } 
    } 
  } 
  clickCanvasEvent(event) { 
    let x = event.offsetX; 
    let y = event.offsetY; 
    console.log(x); 
    console.log(y); 
    x = Math.floor(x / 10); 
    y = Math.floor(y / 10); 
    this.array[x][y] = 1; 
    console.log(this.array); 
    this.drawField(); 
  } 
  drawGrid() { 
    for (let x = 0.5; x < 500; x += 10) { 
      this.context.moveTo(x, 0); 
      this.context.lineTo(x, 500); 
    } 
 
    for (let y = 0.5; y < 500; y += 10) { 
      this.context.moveTo(0, y); 
      this.context.lineTo(500, y); 
    } 
    this.context.strokeStyle = '#888'; 
    this.context.stroke(); 
  } 
  drawField() { 
    this.context.clearRect(0, 0, 500, 500); 
    this.drawGrid(); 
    for (let i = 0; i < 50; i++) { 
      for (let j = 0; j < 50; j++) { 
        if (this.array[i][j] == 1) { 
          this.context.fillStyle = 'green'; 
          this.context.fillRect( 
            i * 10, j * 10, 10, 10, 
          ); 
        } 
      } 
    } 
  } 
  startLife(_that) { 
    // start gameOfLife 
    let array2 = []; 
    for (let i = 0; i < 50; i++) { 
      array2[i] = []; 
      for (let j = 0; j < 50; j++) { 
        let neighbors = 0; 
        if (_that.array[ConfigField.fpm(i) - 1][j] == 1) neighbors++; // up 
        if (_that.array[i][ConfigField.fpp(j) + 1] == 1) neighbors++; // right 
        if (_that.array[ConfigField.fpp(i) + 1][j] == 1) neighbors++; // bottom 
        if (_that.array[i][ConfigField.fpm(j) - 1] == 1) neighbors++; // left 
        if (_that.array[ConfigField.fpm(i) - 1][ConfigField.fpp(j) + 1] == 1) neighbors++; 
        if (_that.array[ConfigField.fpp(i) + 1][ConfigField.fpp(j) + 1] == 1) neighbors++; 
        if (_that.array[ConfigField.fpp(i) + 1][ConfigField.fpm(j) - 1] == 1) neighbors++; 
        if (_that.array[ConfigField.fpm(i) - 1][ConfigField.fpm(j) - 1] == 1) neighbors++; 
        /* 
        if (array2[this.fpm(i)-1][j]==1) neighbors++;// up 
        if (array2[i][this.fpp(j)+1]==1) neighbors++;// right 
        if (array2[this.fpp(i)+1][j]==1) neighbors++;// bottom 
        if (array2[i][this.fpm(j)-1]==1) neighbors++;// left 
        if (array2[this.fpm(i)-1][this.fpp(j)+1]==1) neighbors++; 
        if (array2[this.fpp(i)+1][this.fpp(j)+1]==1) neighbors++; 
        if (array2[this.fpp(i)+1][this.fpm(j)-1]==1) neighbors++; 
        if (array2[this.fpm(i)-1][this.fpm(j)-1]==1) neighbors++;*/ 
        (neighbors == 2 || neighbors == 3) ? array2[i][j] = 1: array2[i][j] == 0; 
      } 
    } 
    _that.array = array2; 
    this.drawField(); 
    let count = 0; 
    count++; 
    document.getElementById('count').innerHTML = count; 
    this.timer = setTimeout(this.startLife, 300); 
  } 
  static fpm(i) { 
    if (i == 0) return 50; 
    else return i; 
  } 
  static fpp(i) { 
    if (i == 49) return -1; 
    else return i; 
  } 
} 
 
const test = new ConfigField(); 
console.log(test);

#canvas { 
  background-color: #fff; 
  width: 500px; 
  height: 500px; 
  border: 3px solid black; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
  <title>Document</title> 
</head> 
 
<body> 
  <div class="container"> 
    <canvas id="canvas" width="500" height="500"></canvas> 
    <div id="count"></div> 
    <button id="start">Start</button> 
  </div> 
</body> 
 
</html>

что не так? Не видит массив.Игра жизнь

Answer 1

//this.timer = setTimeout(this.startLife, 300);
this.timer = setTimeout(this.startLife.bind(this), 300, _that);

Без параметра _that можно обойтись, так как startLife вызывается в контексте экземпляра ConfigField. В коде функции вместо _that используйте this.