Question

Examine this code

    var _class=function()
    {
        this.Test=100;
        this.Callback=function(msg)
        {
            alert(msg+"\r\n"+this.Test);
        }
    }

    function run(call)
    {
        call("Hello world");
    }

    var obj=new _class();
    run(obj.Callback);

I got the result :

    [Alert]
    Hello world
    undefined

but when i call
obj.Callback(“Hello world”)

i got expected

    [Alert]
    Hello world
    100

why ?

thank for help

Answer 1

There’s no intrinsic relationship between an object and the functions defined “inside” it. The only thing that determines the value of this (called the “receiving” object) in a function call is the way in which the function is called.

• Call a function with object.func(), and this will be bound to object.
• Call a function with “call()” or “apply()”, and this is determined by the first parameter.
• If a function is called without any implicit object context, however, as in your “callback” example, then this won’t refer to anything your object — it will refer to window (or whatever the global context is).

The trick is that when you want to use a function as if it were a “method” on an object, such that the relationship remains intact even though the function reference has been yanked away from the object, you can pre-bind this in a couple of ways:

1. You can wrap the function in another function, so that you explicitly retain this in a closure.
2. You can use “.bind()” to (essentially) do the same thing.

The first way would look like this:

run(function() { obj.Callback(); });

The second way would look like this:

run(obj.Callback.bind(obj));

JavaScript is quite different from languages like C# or Java in this respect. In those languages, a function is sort-of stuck forever in a relationship with its class (or instances of its class). Not JavaScript; it really doesn’t matter at all, in fact, where a function is defined. Your “_class” function would be equivalent if it were written like this:

function helloThere() { 
   alert(msg + "\r\n" + this.Test);
}

var _class = function() {
    this.Test = 100;
    this.Callback = helloThere;
};

edit — @jamietre correctly notes that had your “_class” function contained some var declarations or local functions, then there most certainly would be a difference (though not with respect to the way this behaves when “Callback” is invoked).

edit again — Thanks @Koolinc