Understanding "this" keyword

Question

In this commit there is a change I cannot explain

deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments );

becomes

deferred.done( arguments ).fail( arguments );

AFAIK, when you invoke a function as a member of some object like obj.func(), inside the function this is bound to obj, so there would be no use invoking a function through apply() just to bound this to obj. Instead, according to the comments, this was required because of some preceding $.Callbacks.add implementation.

My doubt is not about jQuery, but about the Javascript language itself: when you invoke a function like obj.func(), how can it be that inside func() the this keyword is not bound to obj?

Answer 1

My doubt is not about jQuery, but about the Javascript language itself: when you invoke a function like obj.func(), how can it be that inside func() the this keyword is not bound to obj?

Well, the only way this is possible is if obj.func references a bound function, then it doesn't matter how you call it. In that case it doesn't matter how you call the function, whether you do obj.func(), func(), func.call({}), func.apply({}) doesn't matter at all. I'm not sure how the commit is related to this, however.

To clarify, I am answering the quoted question interpreted as:

Given a call signature like: obj.func(), how is it possible that this is not obj inside the called function for the call?

Answer 2

While the other answers deal with your question about the this keyword, they don't answer your question of why apply is being used. Here's the kicker: apply is not being used to set the this keyword in that example. Instead, it's being used to pass arguments as the arguments of the done and fail functions.

Take this example:

var x = {
    a: function(a1, a2, a3) {
        console.log(a1, a2, a3);
    }
}

function callA() {
    x.a.apply(x, arguments);
    x.a(arguments);
}

callA('red', 'blue', 'green');

If you execute this code you should see the difference between x.a.apply(x, arguments); and x.a(arguments);. In the first one, a1, a2, and a3 are the respective colors "red", "blue", and "green". In the second one, a1 is an array-like object [ "red", "blue", "green" ] and a2 and a3 are undefined.

Likewise, in your posted example, apply is being used to pass the arguments object correctly, not to set the this keyword.