事件处理程序中 "this" 的不同值

Question

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

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

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

在 Alpha 对象上调用 foo 后，我们看到“.ca”的点击处理程序打印 Alpha 对象，而“.cb”的点击处理程序打印 [=13] 标识的按钮=].

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

编辑

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

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

Answer 1

为什么会这样，可以用 this 来回答。

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

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

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

Answer 2

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

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

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

事件处理程序中 "this" 的不同值

Different values of "this" in event handlers

javascript

this