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

Question

这是一个基础问题，但我无法弄清楚为什么上下文 (this) 在第二个事件处理程序中是正确的，而在第一个事件处理程序中是错误的。

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

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

然后我使用 myNotifier.saySomething() 方法作为点击两个按钮的事件处理程序:

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

第一个显示:“我说:未定义”第二个显示:“我说:你好”

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

A jsfiddle to test

Answer 1

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

如果您将该函数作为对象的属性调用(例如在 button2 的处理程序中)，该对象将用作上下文。

但是，如果您将它用作事件处理程序(如果被 jQuery 包装，则相同)，调用该函数的上下文是当前 DOM 元素，监听器绑定(bind)到该元素。而且按钮没有属性“message”，所以它会提示undefined。

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

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

或

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

:-) - 请参阅 MDN 了解更多信息。