Defining javascript prototype functions through a loop

Question

I try to define prototype functions from an array. As in the following example : my black rabbit should say 'toto' but it doesn't say it ! Why ?

function Rabbit ( type ) {
    this.type = type ;
}

var funcs = ["says", "doesnt_say"];

for(var i=0;i<funcs.length;i++)
{
    var f = funcs[i];
    Rabbit.prototype[f] = function ( line ) {
        alert(" The " + this.type + " rabbit " 
              + f + "  '" + line + " '") ;
    };
}

var blackRabbit = new Rabbit ("black") ;
blackRabbit.says("toto");

Visible on http://jsfiddle.net/xou11bgu/

sorry I just updated the jsfiddle code with "doesnt_say" instead of "said" (the first code was a switch beetween 'says' and 'said') — flojug, Jul 13 '15 at 18:51

score 1 · Accepted Answer · answered Jul 13 '15 at 18:53

The problem is that the variable "f" is shared by all the functions you create, and it will end up having the value of the last function name.

You can use a function to construct the functions:

Rabbit.prototype[f] = function(f) {
    return function ( line ) {
        alert(" The " + this.type + " rabbit " 
              + f + "  '" + line + " '") ;
    };
}(f);

This is an instance of an extremely common JavaScript stumbling block; there are many, many other similar questions here on Stackoverflow, but they're hard to find because until you know what the problem is it's hard to know what you're looking for.

score 1 · Answer 2 · answered Jul 13 '15 at 18:54

You are using the variable f in the method, but that variable is shared by all methods and will contain the name of the last method.

You can use a function to create a scope where each method will gets its own variable f:

for(var i=0;i<funcs.length;i++) {
  (function(f){
    Rabbit.prototype[f] = function ( line ) {
      alert("The " + this.type + " rabbit " + f + " '" + line + "'") ;
    };
  })(funcs[i]);
}

Demo: http://jsfiddle.net/xou11bgu/4/

Defining javascript prototype functions through a loop

2 Answers2