无法创建javascript闭包

Question

trying to create functions in test.tgt the same as the functions in test.src except that they will will have a context.

test.src.fn() => test.work.fn.call(context)

here is the test bed

var fn1 = function() { console.log( 'fn1' ); }; 
var fn2 = function() { console.log( 'fn2' ); }; 
var context = { a: 1 };
var test = {
  tgt: {},
  src: { one: fn1, two: fn2 },
  init: function() {
    for( var i in test.src ) {
      test.tgt[i] = function(arg) { test.src[i].call(test.cxt,arg); };
    }
  }
}
test.init();
test.src.one() => 'fn1'
test.tgt.one() => 'fn2'   ouch!!

the problem is that test.src[i] is not evaluated until the function is executed.

how do I get the "real" test.src[i] inside the newly created function?

Answer 1

Try creating a closure for each iteration of the loop:

var fn1 = function() { console.log( 'fn1' ); }; 
var fn2 = function() { console.log( 'fn2' ); }; 
var context = { a: 1 };
var test = {
  tgt: {},
  src: { one: fn1, two: fn2 },
  init: function() {
    for( var i in test.src ) {
      test.tgt[i] = (function(index){return function(arg) { test.src[index].call(test.cxt,arg); };}(i));
    }
  }
}
test.init();
test.src.one() // => 'fn1'
test.tgt.one() // => 'fn1'

Answer 2

This is a classic Javascript issue. You assume that i in the context of the for loop should be captured as the value when the function was created, but instead it is the last value of i. To get round this, you can locally capture it like so:

test.tgt[i] = (function(local_i){
    return function(arg) { test.src[local_i].call(test.cxt,arg); };
})(i);

So you wrap it in a function context which is executed immediately and the inner function gets the correct value of i for that iteration.

Answer 3

All functions you created inside init have shared closure, so they share i variable, thus it is always the last. Try this:

init: function() {
    for( var i in test.src ) {
      (function(idx) { 
          test.tgt[idx] = function(arg) {test.src[idx].call(test.cxt,arg); };
      }(i));
    }
}