Question

I wrote something like this:

window.onload = function() {
    var a = new A();
    a.init();
};

A = function() {
    this.b = {};
};
A.prototype = {
    init : function() {
        document.writeln("init");
        this.b = new B();
        this.b.doCallback(this.init2);
    },

    init2 : function() {
        document.writeln("init2");
        this.b.say();
    }
};

B = function(){};
B.prototype = {
    doCallback: function(callback){
        callback();
    },

    say: function(){
        document.writeln("I'm B");
    }
};

For me output should look like this:

init
init2
I'm B

But insted, it looks like that:

init
init2

Chrome says that method ‘say’ is undefined. Could someone explain me why?

Answer 1

It is because in your code this does not represent an instance of B.

A function’s this keyword behaves a little differently in JavaScript
compared to other languages. It also has some differences between
strict mode and non-strict mode. In general, the object bound to this
in the current scope is determined by how the current function was
called, it can’t be set by assignment during execution, and it can be
different each time the function is called. ES5 introduced the bind
method to fix a function’s this regardless of how it’s called.

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this

So when you are calling callback which is init2 , this.b is null and does not have any say method.

If you are using jQuery, you could use the method proxy http://api.jquery.com/jQuery.proxy/

this.b.doCallback(jQuery.proxy(this.init2,this));