WebComponent跟踪“此”

Question

我正在尝试为“ Conway的人生游戏”游戏创建一个Web组件（不要问我为什么，但是对于我们的大学，我们必须使用一个Web组件）

我经常遇到一个问题，我丢失了Web组件的“ this”。例如，当调用按钮事件的函数时，“ this”是按钮而不是Web组件。在下一步中，我无法在事件处理程序中调用Web组件的任何其他函数，因为“ this”是错误的，并且表示该函数不是函数。

我知道在JavaScript中，有一种方法可以通过编写“ that = this”来解决此问题，但这似乎不适用于Web组件，因为我不知道如何特别是在哪里定义此语句。我已经尝试过将它放到cunstructor中，但是当事件处理程序被调用时，我无法访问“ that”。

在这里您可以看到单元格单击的事件处理程序。一切正常，直到要调用“ this.UpdateGrid”函数，这是我的Web组件中的另一个函数。这里说函数不是函数，因为“ this”不正确。您对我该如何解决有任何想法？

cellClickHandler() {
        let rowCol = this.id.split("_");
        let row = rowCol[0];
        let col = rowCol[1];

        var classes = this.getAttribute("class");
        if (classes.indexOf("live") > -1) {
            this.setAttribute("class", "dead");
            this.updateGrid(row, col, 0);
        } else {
            this.setAttribute("class", "live");
            this.updateGrid(row, col, 1);
        }
    }

这是我绑定事件的方式：

createTable() {
        var table = document.createElement("table");

        for (var i = 0; i < this.$rows; i++) {
            var tr = document.createElement("tr");
            for (var j = 0; j < this.$cols; j++) {
                var cell = document.createElement("td");
                cell.setAttribute("id", i + "_" + j);
                cell.setAttribute("class", "dead");
                cell.onclick = this.cellClickHandler; //HERE IT IS
                tr.appendChild(cell);
            }
            table.appendChild(tr);
        }
        this.$shadow.appendChild(table);
    }