Why did my callback lose its scope?

Question

When test.testHello(helloWorld.sayHello); runs, it doesn't recognize that I have inserted a new greeting is the greeting is undefined. I can use bind to make sure it runs it in the proper scope, I am not really sure why isn't it running in the proper scope to begin with. Could someone explain why this is happening and show me a better solution?

Solution: test.testHello(helloWorld.sayHello.bind(helloWorld));

http://jsfiddle.net/EzabX/

var HelloWorldClass = function() {


 this.greetings = [];
}
HelloWorldClass.prototype.addGreeting = function(greeting) {
    this.greetings.push(greeting);
}
HelloWorldClass.prototype.sayHello = function() {
    document.getElementById('output').innerHTML += this.greetings;
    this.greetings.forEach(function(greeting) {
        greeting.execute();        
    })
}

var TestClass = function() {
    this.testHello = function(callback) {
        alert("TestHello is working, now callback");
        callback();
    }
}


var main = function() {
    var helloWorld = new HelloWorldClass();
    var test = new TestClass();
    helloWorld.addGreeting({
        execute: function() {
            alert("Konichiwa!");
        }
    });
    helloWorld.sayHello();

    test.testHello(helloWorld.sayHello);
}

main();

Answer 1

Managing the this variable within the prototype function scope when called as a callback can be complicated for novice users. You don't always need a prototype for all functions on a class. If you really want to use a prototype function look at Javascript .bind(this) implementations. Google and Stackoverflow are your friend on that topic. Example: Preserving a reference to "this" in JavaScript prototype functions

Offending code with this referring to DOM Window object and not a HelloWorld instance:

this.greetings.forEach(function(greeting) {
        greeting.execute();        
    })

A non-prototype version that works just great, easy to use. Fiddle: http://jsfiddle.net/EzabX/2/

var HelloWorldClass = function() {
    var greetings = [];

    this.greetings = greetings;

    this.addGreeting = function(greeting) {
        greetings.push(greeting);
    };

    this.sayHello = function() {
        document.getElementById('output').innerHTML += greetings;
        greetings.forEach(function(greeting) {
        greeting.execute();        
        })
    }; }