将箭头函数添加到 table 个以行和列作为参数的单元格

Question

我想通过 javascript 中的箭头函数为 table 中的所有单元格调用一个函数，并将单元格的行和列添加为参数。但我的解决方案不起作用：

setTableListener() {
    var table = document.getElementById("tableName"), row, column;

    for (var i = 0; i < table.rows.length; i++) {
        for (var j = 0; j < table.rows[i].cells.length; j++) {
            var cell = table.rows[i].cells[j];
            row = cell.parentElement.rowIndex;
            column = cell.cellIndex;
            cell.onclick = () => this.turn(row, column);
        }
    }
}

turn(row, column) {
    console.log(row + " " + column)
}

对于大小为 3x3 的表格，输出总是 2 2。

Answer 1

I̶t̶'̶s̶ ̶b̶e̶c̶a̶u̶s̶e̶ ̶c̶o̶u̶n̶t̶i̶n̶g̶ ̶f̶o̶r̶ ̶p̶r̶o̶p̶e̶r̶t̶i̶e̶s̶ ̶r̶o̶w̶I̶n̶d̶e̶x̶ ̶a̶n̶d̶ ̶c̶e̶l̶l̶I̶n̶d̶e̶x̶ ̶b̶e̶g̶i̶n̶s̶ ̶f̶r̶o̶m̶ ̶0̶.̶ ̶A̶c̶c̶o̶r̶d̶i̶n̶g̶l̶y̶ ̶f̶o̶r̶ ̶t̶h̶i̶r̶d̶ ̶r̶o̶w̶ ̶a̶n̶d̶ ̶c̶o̶l̶u̶m̶n̶ ̶r̶e̶s̶u̶l̶t̶ ̶w̶i̶l̶l̶ ̶b̶e̶ ̶2̶.̶

更新。

请原谅我的疏忽。当您的 onclick 函数被调用时，方法 turn 引用 row 和 cell 变量，它们被最后一个循环的迭代覆盖。

如何解决？您需要将变量初始化 row 和 cell 以及 onclick 功能设置放在 closure.

例如：

cell.onclick = (() => {
    // Closure starts here. Now, method turn will be called with variables which was defined down here.
    var row = cell.parentElement.rowIndex;
    var column = cell.cellIndex;
    return () => this.turn(row, column);
})();

这里我们创建了自执行匿名函数，其中包含 row 和 cell 变量的初始化，其中包含所需的值。此外，这里我们返回了将被设置为 onclick 处理程序的函数，并且我们的处理程序包含轮流调用 method，向其传输变量 row 和 cell.

因此，每个 onclick 处理程序内部 turn 方法调用都传递了自己的 row 和 cell 变量，这些变量在闭包中初始化。

Answer 2

您在这里需要的是将 'unique' onclick 事件侦听器附加到每个单元格。所以，试试这个

cell.addEventListener('click', this.turn.bind(this, row, column))

或者，

cell.onclick = this.turn.bind(this, row, column);

将箭头函数添加到 table 个以行和列作为参数的单元格

Add arrow functions to table cells with row and column as parameter

javascript

dom-events