Where is my 'this'? Using objects method as a callback function.

Question

Hello,

I have a generic question about javascript specification or implementation of functions pointer (delegates?) which are points to object methods.

Please, read the following code snippet. Here we have an object with a method using 'this' to access an object field. When we call this method as usual (o.method();), returns value of the specified field of the object. But when we create pointer to this method (callback) and invoke it, returns an undefined value, because 'this' inside method's scope now is global object.

var o = {
    field : 'value', 
    method : function() {
        return this.field;
    }
};

o.method(); // returns 'value'

var callback = o.method;

callback(); // returns 'undefined' cause 'this' is global object

So, where is my 'this'?

Answer 1

You can specify the context of this for example when you call a method through the .apply() or .call() methods. In your case, like you said, the context has changed. If you really need to make field be o.field, you have to tell explicitly so, for example by using a closure when defining your method method.

Answer 2

"this" is late binding. that is, it gets bound to a thing just before the function is executed. What it is bound to depends on how you call your function.

if you call it like (function invokation):

   myfunction();

"this" is bound to the global object

if you call it like (method invokation):

   myobject.myfunction();

"this" gets bound to "myobject"

you can also call it like so (call invokation):

   myfunction.call(myobject);

in which case "this" gets bound to myobject

there is also (constructor invokation):

 new MyFunction();

in which "this" gets bound to a newly constructed blank object whose prototype is MyFunction.prototype.

this is how the creators of javascript talk about it, anyway. (and I think it is discussed this way in the spec) Different ways of invoking a function.

the new version of the ecmascript standard (ecmascript5) includes the prototype library's "bind" method, which returns a new function with "this" prebound to something you specify. for instance:

  mynewfunction = myfunction.bind(myobject);
  mynewfunction();

the invokation of mynewfunction has "this" already bound to myobject.