Почему свойства моего класса не определены, когда я запускаю функцию, привязанную к атрибуту onclick?
Я пытаюсь сделать игру с крестиками-ноликами, в которой каждая ячейка является объектом класса Cell, каждый класс будет содержать несколько свойств, таких как элемент div, к которому привязана конкретная ячейка в HTML, чтобы я мог затем изменить стиль этого div, если он нажат.
Однако при попытке назначить каждый атрибут Cells onclick методу в классе переменные класса, которые я определил в конструкторе, были неопределенными. Я не мог работать из-за области, я пытался использовать var self = this; в конструкторе и использовать это вместо этого для методов. Я прочитал несколько других вопросов, подобных этому, однако я не могу решить проблему.
class Cell
{
constructor(cellDiv)
{
this.clicked = false;
this.cellDiv = cellDiv;
this.player = 7;
this.cellDiv.className = "cell";
}
output()
{
console.info(this.player);
console.info(this.clicked);
console.info(this.cellDiv);
}
}
var grid = [];
function buildBoard ()
{
for (var i = 0; i < 9; i ++)
{
grid.push(new Cell(document.createElement("div")));
document.getElementById("gameBoard")
.appendChild(grid[i].cellDiv);
grid[i].cellDiv.onclick = grid[i].output;
grid[i].output();
}
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Task 3</title>
<link rel = "stylesheet"; type = "text/css"; href = "stylesheet.css" />
</head>
<body>
<script type = "application/javascript"; src = "main.js"></script>
<script type = "application/javascript"; src = "cell.js"></script>
<div class = "gameBoard"; id = "gameBoard"></div>
<script type = "text/javascript">
buildBoard();
</script>
</body>
</html>
На данный момент это создает 9 ячеек, размещает их все на доске, назначает их атрибут onclick, а затем выводит то, что я ожидаю вывести, когда я щелкаю ячейку. Однако, когда функция вывода вызывается в цикле for, все выводится, как и ожидалось, но когда я нажимаю каждый div, я получаю неопределенные переменные.
<code>
main.js:38 7
main.js:39 false
main.js:38 undefined
main.js:39 undefined
</code>
Ваше здоровье!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема в том, что this функция определяется при ее вызове, а не во время создания.
Поэтому, когда вызывается функция output, this больше не относится к объекту ячейки.
Решение: используйте стрелочную функцию, которая использует this окружающей области во время создания.
Вам нужно привязать метод output к вашему классу. Существуют различные подходы, но самый компактный способ сделать это — присвоить его стрелочной функции.
class Cell {
constructor () { ... }
output = () =>
{
console.info(this.player);
console.info(this.clicked);
console.info(this.cellDiv);
}
}
Рад помочь. Не могли бы вы отметить мой ответ как принятый, нажав на серую галочку сбоку.