ES6面向对象和事件处理程序
我一直在学习JavaScript和面向对象/function编程的细节，而不是编写hacky命令式代码，而这些代码虽然有效……但是很丑陋而且老实说效率不高。
我正在重写一个井字游戏，我正在使用Classes来实现“Board”function（更新电路板/检查瓷砖/等……）
我意识到…..我应该在页面上放置事件监听器（用于按钮/磁贴/等等）。 我通常只是在document.ready范围内放置jquery .click函数，但这似乎不对。
当我用new创建一个类时，事件监听器会被附加或“准备好”….我想我可能会误解听众是如何工作的。 如果他们在一个类中作为函数/方法工作？ 或者，如果将它们附加在那里甚至是有意义的。
例如，这是我的基类（它实际上只是设置所以它就像是最小的。
"use strict"; class Board { constructor(playerIcon,compIcon) { this.playerIcon = playerIcon; this.compIcon = compIcon; }); } getTileContents(tile){ return $("#tile-" + tile).text() } tileIsEmpty(tile){ console.log($("#tile-" + tile).text()) if($("#tile-" + tile).text() != 'X' || $("#tile-" + tile).text() != 'Y') return true else return false } } let board = new Board('X','Y');
我想可能在构造函数中附加事件监听器会起作用吗？ 由于构造函数将在new被调用时被实例化至少是正确的吗？
也许这只是我对事件处理程序如何处理或“绑定”的误解？
编辑：这是我可怜的井字游戏到目前为止参考： http ： //codepen.io/msmith1114/pen/qmNevg
（这就是我在谈论董事会时所说的）
JavaScript事件绑定到文档对象模型（DOM），并且不绑定到您可能创建的任何任意对象。
https://developer.mozilla.org/en-US/docs/Web/API/Event
Event接口表示在DOM中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而另一些是由API生成的（例如指示动画已经完成运行，video已暂停等的事件）。
所以我们知道，我们想在你的class级中拥有某种DOM元素。 将表示物理对象的类连接到实际元素是有意义的 – 该类只是DOM物理状态的另一种表示。 是的，你是正确的，任何放置在构造函数中的代码都将被执行 – 包括任何事件处理程序的添加。
如果你想在类上创建侦听器，你可以做类似的事情：
class { constructor() { this.domElement.addEventListener('click', this.handler.bind(this)); } handler() { this.hello(); } hello() { } }
至关重要的是要记住，必须通过传入绑定函数调用来修复this范围，因为它在作为侦听器传入时会丢失所有上下文。 如果在上面的代码中你没有使用该类的任何方法，那么绑定就没有必要了，它就变成了this.domElement.addEventListener('click', this.handler); 。
这显然不是添加处理程序的唯一方法，但在我看来，在处理代表DOM的类时更加理智。
this.domElement.addEventListener('click', this.handler.bind(this));
执行此操作时，您无法删除事件处理程序，因此每次使用代码时都会添加更多甚至更多的处理程序，最终填充内存，减慢页面速度Javascript非常混乱，需要更换。