Question

这是一个基本问题，但我无法弄清楚为什么上下文（＆＃39; this＆＃39;指针）在第二个事件处理程序中是正确的而在第一个事件处理程序中是不正确的。

我有这个简单的构造函数来创建对象myNotifier：

function Notifier ( message ) {
  this.message = message;
  this.saySomething = function () {
    alert( "I say:" + this.message);
  }
}

myNotifier = new Notifier(" HELLO!");

然后我在两个按钮上使用myNotifier.saySomething()方法作为CLICK的事件处理程序：

$(".button1").click( myNotifier.saySomething );
$(".button2").click( function () { myNotifier.saySomething()});

第一个显示：＆＃34;我说：undefined＆＃34; 第二个显示：＆＃34;我说：HELLO＆＃34;

我理解上下文（this）在调用方法时不是原始对象，但为什么在第二个按钮的函数内部调用时它是正确的？

A jsfiddle to test

Answer 1

查看MDN's reference for the this keyword：是的，上下文取决于您调用方法的方式。

如果将该函数作为对象的属性调用（如在button2的处理程序中），则该对象将用作上下文。

但是，如果将它用作事件处理程序（如果由jQuery包装则相同），则调用该函数的上下文是侦听器绑定到的当前DOM元素。该按钮没有属性“消息”，因此它会提醒undefined。

当然，这些不是唯一的选择;你可以尝试

var fn = myNotifier.saySomething;
fn(); // context is the global object (window)

或

myNotifier.saySomething.call({message:"buh!"});

:-) - 请参阅MDN以获取解释等。

Answer 2

$(".button1").click this关键字是带有button1类的Dom元素。

$(".button2") this关键字是指您将调用包装到myNotifier.saySomething()

的匿名函数

您可以使用apply()原型函数更改函数的上下文。

为什么这两个事件处理程序中的上下文不同

2 个答案: