事件处理程序中“this”的不同值答案

【问题标题】：Different values of "this" in event handlers事件处理程序中“this”的不同值
【发布时间】：2023-03-24 10:52:01
【问题描述】：

考虑这段依赖 JQuery 库的 TypeScript 代码：

class Alpha {
    public foo() {
        $('.ca').click(() => {console.log(this)});
        $('.cb').click(function () {console.log(this)});
    }
}

假设$('.ca') 和$('.cb') 指的是两个按钮。

在 Alpha 对象上调用 foo 后，我们看到“.ca”的单击处理程序打印 Alpha 对象，而“.cb”的单击处理程序打印由 $('.cb') 标识的按钮。

this 的这两种不同解释都有用。但是，如果我想在处理程序中使用 both 版本的this，我该怎么办？换句话说，我想同时访问 Alpha 对象和处理程序中的“.cb”按钮。

编辑

澄清一下：我应该强调的是，在我使用=> 表示法的情况下，我对访问“.ca”按钮的方式特别感兴趣。

用户 Matt U 在回答我的问题时指出了这一点。

【问题讨论】：

这能回答你的问题吗？ How to access the correct `this` inside a callback
我已经用javascript标签替换了typescript标签，因为这个问题与打字稿无关。

标签： javascript this

【解决方案1】：

您可以使用带有箭头函数的event 对象来获取触发click 事件的元素（例如具有.cb 类的按钮），而this 将引用该类。如：

class Alpha {
  foo() {
    $('.cb').click(event => {
      console.log(this);
      console.log(event.target.className);
    }
  }
}

有关工作示例，请参阅 here。

【讨论】：

【解决方案2】：

为什么会这样工作可以用this回答。

TLDR ：在事件处理程序内部，this 是附加事件的元素。所有函数类型（箭头函数除外）this 取决于它们如何被调用并属于调用者。箭头函数从其声明的词法范围（这里是对象实例）中获取this。

您可以将this 的引用保存在另一个变量中，并利用闭包在您的事件处理程序中使用它。

class Alpha {
    public foo() {
        let context = this;
        $('.ca').click(function () {
        console.log(context); console.log(this); });
    }
}

【讨论】：