javascript - callback with `this` confusion

Question

I have this clock object:

var Clock = {
    start: function () {
      $('#btnScrollPause').show();
      $('#btnScrollResume').hide();

      advance();
      this.interval = setInterval(function () {
        advance();
      }, 5000);
    },

    pause: function () {
      $('#btnScrollPause').hide();
      $('#btnScrollResume').show();
      this.reset();
    },

    resume: function () {
      if (!this.interval) {
        this.start();
      }
    },

    reset: function () {
      clearInterval(this.interval);
      delete this.interval;
    }
  };

I have two buttons that pause and resume automatic scrolling of an element, but my confusion is on the click handlers that I've attached to them.

If I call the pause function like this:

// 1
$('#btnScrollPause').click(function () {
  Clock.pause();
});

It works correctly, however if I try to reduce the code like so:

// 2
$('#btnScrollPause').click(Clock.pause);

It no longer works and I get the error "this.reset is not defined". Also, if I make a function and use that in the click handler instead:

// 3
$('#btnScrollPause').click(scrollPause);

function scrollPause() {
  Clock.pause();
}

It works! Can someone explain why 1 and 3 work, but 2 doesn't?

Answer 1

This is related to how this keyword works in JavaScript. When you pass a method as a callback to another function the method is detached from the object and the this keyword doesn't refer to object. Additionally jQuery event methods modify the this value of callbacks to refer to the owner of the event, i.e. the DOM elements.

One option that you have is using the .bind function:

$('#btnScrollPause').click(Clock.pause.bind(Clock));

A related question: How does the “this” keyword work?