Javascript 此关键字在对象内的函数中

因此，我将大部分函数和变量组织到基于对象的小模块中，如下所示：

module1: {
  someVariable: false,

  someFunction: function(e) {
     do some stuff using someVariable
  },

  someFunction2: function(e) {
    do some other stuff
  }
}

$(function() {
  $('.thing').on('mouseenter', module1.someFunction);
}

在各种事件中，我将这些函数称为回调函数，如下所示：

module1: {
  someVariable: false,

  someFunction: function(e) {
     do some stuff using someVariable
  },

  someFunction2: function(e) {
    do some other stuff
  }
}

$(function() {
  $('.thing').on('mouseenter', module1.someFunction);
}

---

现在，在someFunction中，我希望'this'关键字引用包含函数的对象。相反，它引用触发触发函数的事件的DOM元素。除了写module1.someVariable之外，我还可以访问函数包含对象中的someVariable变量吗

最简单的答案是尝试以下方法：

$(function() {
  $('.thing').on('mouseenter', function(e) {
    module1.someFunction(e);
  });
}

如果直接在对象上调用该方法，则仅将“this”值设置为该方法附加到的对象：

module1.someFunction(); // direct invocation, 'this' will be set properly
var tempFunc = module1.someFunction;
tempFunc(); // the function was removed first.  'this' will NOT be set

在您的例子中，您正在将方法从对象中剥离出来，并将其交给事件处理程序。事件处理程序不知道对象，也不执行直接调用

事实上，事件处理程序显式重写上下文，因为jQueryAPI就是这样定义的。如果你想要你正在谈论的行为，你必须显式地重写它

使用像underline.js这样的库，您还可以在将函数传递给事件处理程序时调用它

$(function() {
  $('.thing').on('mouseenter', _.bind(module1.someFunction, module1));
}

---

我相信Object.bind将来应该是本机支持的，没有库，但您还不能依赖较旧的浏览器来支持它。

除非另有规定，否则事件处理程序始终具有触发事件的元素的上下文。您可以使用Function.bind、$.proxy指定特定的上下文，或者使用匿名函数并存储对所需上下文的引用。的可能重复，但您可能会发现我的答案更直接地关注您的特定问题。-在本文中，您可以看到这两种不同类型的事件调用是如何工作的。注意我是如何在事件

$（e.currentTarget）

中获得目标DOM对象的，这就是jQuery传递的

this

。