Question

我知道jQuery事件处理程序通常会将this绑定到发出事件的对象。我也知道在vanilla JS中，this是调用该函数的对象。

但是，我无法理解以下代码的工作原理。 this似乎引用了代码中定义的tour对象，但是通过jQuery事件处理程序绑定，this应该是单击按钮或由JS运行，它应该是{{ 1}}对象，因为它被调用。

我哪里错了？

$("#tour")

Answer 1

该代码中this的唯一用途是：

$("#tour").on("click", "button", this.fetchPhotos);

用于以下功能：

  init: function() {
    $("#tour").on("click", "button", this.fetchPhotos);
  },

如何调用该函数将决定this的值。它被称为：

$(document).ready(function() { 
  tour.init();
});

所以this是tour。

然后通过jQuery事件处理程序绑定，这应该是单击的按钮

没有。事件处理函数内部未使用this。它用于获取对作为参数传递并最终用作该函数的函数的引用。

或者通过JS，它应该是$（“＃tour”）对象，因为它被调用。

没有。它不在on函数中使用，它用于获取对作为该函数的参数传递的函数的引用。

function a(argument) {
    this; // Value depends on how a is called
}

function b(argument) {
    a(this); // Value depends on how b is called
}

fetchPhotos（事件处理函数）根本不使用this，但如果确实如此，它将是事件触发的对象（因为那是{{1}将它绑定）。

Answer 2

调用的函数是tour.init和tour.fetchPhotos。

在此行上调用

tour.init：

tour.init();

所以在其正文中，this将指向游览（意味着this.fetchPhotos将为tour.fetchPhotos）。

单击按钮时，jQuery事件系统将调用

tour.fetchPhotos。在其正文中，this将指向#tour，即触发事件的HTMLElement。您可以记录它以确保：

fetchPhotos: function() { console.log(this) }

Answer 3

我不确定这里有什么问题。但我猜你正在打电话

tour.init();

使this在tour的执行上下文中引用init()对象。这就是为什么你可以在那里引用this.fetchPhoto并将函数引用传递给.on。

在事件处理程序中，this 将引用ID为#tour的节点。

Answer 4

你的困惑是可以理解的。当你这样做

$("#tour").on("click", "button", function() {
 // inner scope
});

内部范围this将引用调用的objected，因为第三个参数，即匿名函数，将在上运行。

但是，在您的示例中，this.fetchPhotos未在匿名函数上运行，而是函数本身。因此this.fetchPhotos指的是函数tour.fetchPhotos。

fetchPhotos: function() { // inner scope });

然而，在这里的内部范围内，this将再次引用被调用的对象。

如果你这样做了：

$("#tour").on("click", "button", function() { this.fetchPhotos(); });

然后你会遇到麻烦，因为this将不再引用tour对象，而是引发事件的对象，即ID为tour的DOM元素。

Answer 5

默认情况下，this指的是拥有该方法的对象：

var o = {};
o.m = function () {
    return this;
};
o.m(); // returns o
// since "return this" equals "return o"

但您可以将this“重定向”到另一个对象：

var p = {};
o.m.call(p); // returns p
// since "return this" equals "return p"

更接近您自己的情景：

p.n = function (fn) {
    return fn.call(this);
};
p.n(o.m); // returns p
// since "return fn.call(this)" equals "return o.m.call(p)"

有点扭曲：

p.n.call(o, o.m); // returns o
// since "return fn.call(this)" equals "return o.m.call(o)"

具体地说，当你写tour.init()时，这一行：

$('#tour').on('click', 'button', this.fetchPhotos);
                                 ^

与此行相同：

$('#tour').on('click', 'button', tour.fetchPhotos);
                                 ^

然后（非常（非常！）粗略地），#tour通过fetchPhotos函数被jQuery绑定到call，这将导致fetchPhotos.call($('#tour')[0])。< / p>

在这个例子中，jQuery对“this”做了什么？

5 个答案: