开发井字棋时遇this.id未定义错误，求解决方案

架构老林

2026-8-1

解决井字棋游戏中this.id is undefined的问题

问题原因

你用箭头函数定义了setTile，箭头函数不会绑定自己的this，它的this继承自定义时的外层作用域（这里不是点击的tile元素），所以访问this.id会得到undefined。而普通函数作为事件处理函数时，this才会自动指向触发事件的DOM元素。

解决方案

方案1：将`setTile`改为普通函数

把箭头函数改成普通函数，点击事件触发时，this会正确指向被点击的tile元素：

function setTile() {
    if (gameOver) {
        return;
    }
    let coords = this.id.split("-")  // 此时this指向点击的tile
    let r = parseInt(coords[0]);
    let c = parseInt(coords[1]);

    board[r][c] = currPlayer;
    this.innerText = currPlayer;
}

方案2：使用事件对象的`target`属性

如果想保留箭头函数，可以通过事件参数获取触发事件的元素，无需依赖this：

const setTile = (event) => {
    if (gameOver) {
        return;
    }
    const tile = event.target; // 获取点击的tile元素
    let coords = tile.id.split("-")
    let r = parseInt(coords[0]);
    let c = parseInt(coords[1]);

    board[r][c] = currPlayer;
    tile.innerText = currPlayer;
}