Javascript classes and variable references

Question

I'm trying to solve this puzzle minded Javascript OOP problem.

So I have the following class :

var ClassA = function() {
    this.initialize();
}

ClassA.prototype = {

    methods : ['alpha','beta','gama'],

    initialize : function() {
        for ( var i in this.methods ) {
            this[this.methods[i]] = function() {
                console.log(this.methods[i]);
            }
        }
    }
}

var a = new ClassA();

When I call every method I expect to print the name of it, right? But here is what i get :

a.alpha(); // returns gama ?!?
a.beta();  // returns gama ?!?
a.gama();  // returns gama

But when my class looks like this :

var ClassB = function() {
    this.initialize();
}

ClassB.prototype = {

    methods : ['alpha', 'beta', 'gama'],

    initialize: function() {
        for ( var i in this.methods ) {
            this.addMethod(this.methods[i]);
        }
    },

    addMethod: function(method) {
        this[method] = function() {
            console.log(method);
        }
    }

}

var b = new ClassB();

b.alpha(); // returns alpha
b.beta();  // returns beta
b.gama();  // returns gama

Why is this happening ?

Answer 1

for ( var i in this.methods ) {
      this[this.methods[i]] = function() {
          console.log(this.methods[i]);
       }
}

Your problem lies here. When this loop ends, i is the last element. Each function uses the same i, so they are all the last element.

When you use addMethod you are making a closure to "capture" the correct value.

EDIT: When you call addMethod you are "copying" the value, instead of using the i value, which changes with each loop iteration.