无法从控制器类内部访问GridView

Question

我在尝试从控制器内部的GridView类访问实例上的属性和方法时遇到问题。我确信这是一个快速的解决方案，但我已经做了一段时间，似乎无法解决。感谢您的帮助。

无法从_controlResize内部访问_gridView

controller.js

import GridView from "./views/gridView";
class Controller {
_gridView = new GridView();
_controlResize() {
console.log(this._gridView); // undefined
}
init() {
this._gridView.addResizeHandler(this._controlResize);
}
}
export default Controller;

gridView.js

class GridView {
_tableElement = document.querySelector("[data-table]");
_tableContainerElement = document.querySelector("[data-table-container]");
renderCells(cells) {
for (let row = 0; row < cells.length; row++) {
const tr = document.createElement("tr");
for (let col = 0; col < cells[row].length; col++) {
const td = document.createElement("td");
const classesToAdd = ["w-5", "h-5", "border", "border-gray-300"];
td.classList.add(...classesToAdd);
tr.appendChild(td);
}
this._tableElement.appendChild(tr);
}
}
addResizeHandler(handler) {
window.addEventListener("resize", () => {
handler();
});
}
}
export default GridView;

index.js

import Controller from "./controller";
document.addEventListener("DOMContentLoaded", function () {
const controller = new Controller();
controller.init();
});

Answer 1

啊，想通了！从GridView内部调用_controlResize时丢失了此上下文。

易于修复；在构造函数中绑定：

class Controller {
constructor() {
this.controlResize = this.controlResize.bind(this);
}
controlResize() {
this._controlGrid();
}

init() {
this._gridView.addResizeHandler(this.controlResize);
}
}

或在处理程序中绑定：

init() {
this._gridView.addResizeHandler(this.controlResize.bind(this);
}

另外，对controlResize使用箭头函数也可以。