javascript - javascript-将类属性的引用传递给addEventListener

我正在尝试将类属性作为参数发送给addEventListener。这样做是因为当事件发生时，我不再处于类（this）的上下文中，并且无法获取\设置属性的值。我需要以某种方式将属性的引用传递给函数。
我知道我可以将属性作为属性添加到事件目标，并像这样到达它，但是我很确定应该有一个更直接的解决方案。
这是相关代码：

export class ZZZZZ{
 constructor()
{
  this.activeTooltip = null; //This is the relevant property
}

YYYYFunc()
{
  /*thinking of doing it like that*/
  var activeTooltip = this.activeTooltip;
  cancelDiv.addEventListener('click', function() { XXXFunc(activeTooltip)});
}

XXXFunc(activeTooltip)
{
   var A = this.activeTooltip; //I'm not in the context of the class -
                               //"this" is irrelevant - it is null
   var B = activeTooltip;
}

最佳答案

这样做的方式有效并且相当普遍，但是请注意，没有理由不能通过使用this在实例XXXFunc中创建Function#bind：

cancelDiv.addEventListener('click', XXXFunc.bind(this));

bind返回一个新函数，该函数在被调用时将以设置为您提供的this值的bind调用原始函数。因此，这将调用XXXFunc，其中this引用您的实例，并且this.activeTooltip将在其中运行。

还有其他方法。在ES5和更早版本中，可以将Function#call与您关闭的变量一起使用：

var _this = this;
cancelDiv.addEventListener('click', function() { XXXFunc.call(_this)});

在ES2015 +中，您可以使用箭头函数代替变量，因为箭头函数会关闭this本身：

cancelDiv.addEventListener('click', () => XXXFunc.call(this));

在这两种情况下，this中的XXXFunc再次引用您的实例，因此this.activeTooltip可以工作。

当然，如果XXXFunc在实例上有方法，它甚至会更干净：

ES5-使用Function#bind：

cancelDiv.addEventListener('click', this.XXXFunc.bind(this));

ES2015 +使用箭头功能：

cancelDiv.addEventListener('click', () => this.XXXFunc());