javascript - 在此示例中，jQuery 对 "this"做了什么？

Question

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

但是，我无法理解以下代码为何有效。 this 似乎引用了代码中定义的 tour 对象，但是通过 jQuery 事件处理程序绑定(bind)，this 应该是单击的按钮或正在运行的按钮通过 JS，它应该是 $("#tour") 对象，因为它被调用了。

我哪里出错了？

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

  fetchPhotos: function() { 
    $.ajax('/photos.html', {
      data: {location: $("#tour").data('location')},
      success: function(response) {
        $('.photos').html(response).fadeIn();
      },
      error: function() {
        $('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>');
      },
      timeout: 3000,
      beforeSend: function() {
        $('#tour').addClass('is-fetching');
      },
      complete: function() {
        $('#tour').removeClass('is-fetching');
      }
    });
  }
}

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

Answer 1

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

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

它用于以下函数:

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

该函数的调用方式将决定 this 的值。它的名字是这样的:

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

所以这就是旅游。

<小时/>

yet going by the jQuery event handler binding, this should be the clicked button

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

or going by JS, it should be the $("#tour") object since it invoked on.

没有。它不在 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，但如果使用了，它将是触发事件的对象(因为是 jQuery.on 绑定(bind)它的方式)。