Javascript function as callback

Question

The following script produces "Hello", "undefined", "Hello" message boxes:

function action(callback) {
  window.setTimeout(callback, 1000);
}

var obj = { 
  text: "Hello", 
  f: function() { window.alert(this.text); } 
};

obj.f(); // Line 1
action(obj.f); // Line 2
action(function() { obj.f(); }); // Line 3

I looking for explanation why the line marked as "Line 2" produces "undefined" output.

Answer 1

When you call line2: You are only passing the function into the parameter. Since you are only passing the function, not the whole object, when it is called, this in the function does not refer to obj, thus making this.text undefined.

Answer 2

The second one you pass a function with no scope so this becomes the highest object in the scope chain. The third way you create a closure and call f on the object directly which leaves this with the proper scope.

Answer 3

in JavaScript, this is not bound to the method (like in python). Line 2 results in just the function being called, and this is undefined or not obj

Answer 4

Alot of JS libraries do something like this:

if (!Function.prototype.context) {
    Function.prototype.context = function (object) {
        var fn = this;
        return function () { return fn.apply(object, arguments); };
    };
}

To be able to pass/bind this to a handler. So in your case you can do smthg like this

action(obj.f.context(obj));

and receive your 'Hello'. And yes, this is a general way to do something you done in step 3.