scope - JavaScript context in anonymous functions - Stack Overflow

admin管理员组

文章数量:1302381

I want to set a function as a property of each element in an array, but call it with different arguments. I thought I'd solve it using an anonymous function:

for ( var i = 0; i < object_count; i++ ) {
    objects[i].callback = function(e,x,y){ cb(e,x,y,i) };
}

However, the function is called with the value that i has at the time. How would I preserve the context?

I want to set a function as a property of each element in an array, but call it with different arguments. I thought I'd solve it using an anonymous function:

for ( var i = 0; i < object_count; i++ ) {
    objects[i].callback = function(e,x,y){ cb(e,x,y,i) };
}

However, the function is called with the value that i has at the time. How would I preserve the context?

• javascript
• scope
• anonymous-function

Share Improve this question Follow edited Jun 11, 2015 at 14:59 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 4, 2011 at 15:58 TimTim 14.2k1010 gold badges7070 silver badges102102 bronze badges 5

• 1 Make i an argument instead of placing it in the function at declaration time? – Brad Christie Commented Feb 4, 2011 at 16:01
• Why do you provide i to cb() in the first place? the function will not be able to access other elements of the array unless it's a global array but in that case you wouldn't need this per element function. – Robert Koritnik Commented Feb 4, 2011 at 16:03
• @Brad: put that into an answer as Tim may be satisfied with your suggestion which does solve the problem, but he may have a different issue with his code. – Robert Koritnik Commented Feb 4, 2011 at 16:05
• Thanks for the ments. @Brad: The callback function is called from a library which is out of my control, and so I cannot add an argument. @Robert: cb() stores the state of an object on the server-side, and the only relevant data to store are x and y. – Tim Commented Feb 4, 2011 at 16:12
• @Robert: My assumption was there was a reason for it, I was more or less gathering input back as to why this wasn't already the case (thus I felt it wasn't an adequate answer). – Brad Christie Commented Feb 4, 2011 at 16:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

You can wrap the assignment in a function, or the right-hand side at least:

    objects[i].callback = (function(i) { return function(e, x, y) {
      cb(e, x, y, i);
    })(i);

The "outer" anonymous function is called right away, copying the loop variable "i" into an argument (which I also called "i"; some think it's confusing to do that while others say it's confusing not to do it, so you can decide :-) which is then used by the returned "inner" anonymous function.

Another approach to this problem would be to use a utility function for this purpose instead of a simple in-line anonymous function. In this case, it's made slightly tricky because you want "i" to be the last parameter of the actual callback function. The Functional JavaScript library has a cool utility that lets you "pre-populate" selected arguments of a function with fixed values, giving you a function that lets you pass in arguments to the non-fixed ones; it'd look something like this:

  objects[i].callback = (function(e, x, y, i) { return cb(e, x, y, i); }).partial(_, _, _, i);

Whether that's better or worse is a matter of style and opinion.

edit just had a little more coffee - I think that I was being a little silly thinking that I had to use "partial()" above. The fact that the inner (the "real" function) wants "i" at the end of the parameter list is really not relevant to the way things need to be set up. That above example could also be done like this:

   objects[i].callback = (function(i, e, x, y) { return cb(e, x, y, i); }).curry(i);

which is way less bizarre. (Either would work however. At least, I think they would. :-)

When you write

for (var i = something; ...) {
  a[i] = function() { x(i); }
}

The i in your functions will be the same for all functions (it's the very same variable you define in the scope of your for loop.

What you want to do is to have a variable that's specific for each function context. You could do something like this

for (var i = something; ...) {
  (function () {        // using an anonymous function, we create a private context
     var new_i = i;     // new_i has the value of 'i' but exists solely in this
                        // private context
     a[i] = function() { x(new_i); }
                        // the assigned function now refers a variable of the private
                        // context, which will be different on the following loop
                        // iterations
  })();
}

You can get more information on this topic by searching how closures and scope work in JavaScript.

本文标签： scopeJavaScript context in anonymous functionsStack Overflow