代码之家 › 专栏 › 技术社区 › oz1cz

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

this typescript

-1

oz1cz · 技术社区 · 4 年前

考虑一下这段依赖于JQuery库的TypeScript代码:

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

假设 $('.ca') 和 $('.cb') 请参阅两个按钮。

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

这两种不同的解释 this 可以是有用的。但是如果我想使用 二者都 的版本 这 在处理程序内部?换句话说,我想访问Alpha对象和处理程序中的“.cb”按钮。

编辑

澄清一下:我应该强调,我对在使用的情况下访问“.ca”按钮的方式特别感兴趣 => 符号

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

0 回复 | 直到 4 年前

Matt U 4 年前

您可以使用 event 具有箭头函数的对象以获取元素(例如,具有类的按钮 .cb )触发的 click 事件,而 this 将引用该类。例如:

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

看见 here 作为一个工作示例。

Tushar Shahi 4 年前

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

TLDR:在事件处理程序内部, this 是附加事件的元素。所有功能类型(箭头功能除外), 这 取决于它们是如何被调用的并且属于调用程序。箭头函数采用 这 从它们声明的词法范围(这里是对象实例)。

您可以保留的参考资料 这 在另一个变量中,并利用闭包在事件处理程序中使用它。

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

推荐文章

lode · 带有xmlhttp的通用回调函数如何在“this”更改时发送对函数的引用

8 年前

user3903342 · Java访问修饰符和调用的方法

8 年前

Jonas Raphael Schultheiss · 你需要“这个”做什么c#[重复]

8 年前

Vinay · 如何访问函数中的JavaScript函数

8 年前

Arvind M. · JavaScript中的true/false与int(意外行为)

9 年前

Jinseong Kim · 如何在angular 2中使用“this”jquery选择器

9 年前

Nara · 在严格模式下编写脚本时,获取无法读取属性“any”类型错误

9 年前

user8305079 · 在C中何时在这个上下文中使用this++

9 年前

Thor · 什么是允许p的javascript机制/规则。foo=o.foo`返回对函数“foo”的引用?

9 年前

jim · 使用回调编写Javascript this和that

9 年前