在此示例中，jQuery对“ this”做了什么？

Question

I know that a jQuery event handler usually binds this to the object that emitted the event. And I also know that in vanilla JS, this is the object that invoked the function.

However, I'm having trouble making sense of why the following code works. this appears to reference the tour object defined in the code, yet going by the jQuery event handler binding, this should be the clicked button or going by JS, it should be the $("#tour") object since it invoked on.

Where am I going wrong?

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

The only use of this in that code is:

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

It is used in the following function:

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

How that function is called will determine the value of this . It is called like this:

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

So this is tour .

---

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

No. this isn't used inside the event handler function. It is used to get a reference to the function that is passed as an argument and eventually used as that function.

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

No. It isn't used inside the on function, it is used to get a reference to the function that is passed as an argument to that function.

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

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

---

fetchPhotos (the event handler function) doesn't use this at all, but if it did, it would be the object on which the event fired (since that is how jQuery.on would bind it).

Answer 2

The functions invoked are tour.init and tour.fetchPhotos .

---

tour.init is invoked on this line:

tour.init();

so inside its body, this will point to tour (meaning that this.fetchPhotos will be tour.fetchPhotos ).

---

tour.fetchPhotos is invoked by the jQuery event system, when the button is clicked. Inside its body, this will point to #tour , the HTMLElement that fired the event. You can log it to make sure:

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

Answer 3

I'm not certain whats being asked here. But I assume you're calling

tour.init();

which makes this a reference to your tour object, within the execution context of init() . Thats why you can reference this.fetchPhoto within there and passing over the function reference to .on .

Within the event handler , this will be a reference to the node with the id of #tour .

Answer 4

Your confusion is understandable. When you do

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

The inner scope this will refer to the invoked objected, because the third parameter, the annonymous function, will be run on that.

In your example, however, this.fetchPhotos isn't being run on an anonymous function, instead it's the function itself. So this.fetchPhotos refers to the function tour.fetchPhotos .

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

Inside the inner scope here, however, this will refer to the invoked object again.

Had you instead done:

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

Then you would run into trouble as this would no longer be referring to the tour object, but instead the object that triggered the event, ie the DOM element with ID tour .

Answer 5

By default, this refers to the object which owns the method :

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

But you can "redirect" this to another object like so :

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

Getting closer to your own scenario :

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)"

A bit twisted :

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

---

Concretely, when you write tour.init() , this line :

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

Is the same as this line :

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

Then (very (very!) roughly), #tour is bound to fetchPhotos by jQuery through the call function, which will result in something like fetchPhotos.call($('#tour')[0]) .