将onchange函数事件附加到变量 [英] Attaching onchange function event to variable

问题描述

我最近进入了闭包和匿名函数，我想知道我的代码是否是正确的方法（它工作！）：<​​/ p>

  newInput.onchange = function（x）{
 return function（）{
 PassFileName（x）; 
} 
}（counter）; 
  

所以这是一个循环，保存当前的计数器 3 ...）。如果我没有返回函数，那么'counter'将总是'counter'的最后一个值。

我正确地接近这个代码？或者有更好的方法来捕获当前计数器并将其附加到onchange事件？

谢谢！

解决方案

是的，你正在接近它，但为了最大程度地兼容实现，你需要在函数的左右括号：

  newInput.onchange =（function（x）{
 // ^ --- here 
 return function（）{
 PassFileName ）; 
} 
}）（counter）; 
 // ^ --- and here 
  

更新：

虽然你的方法很好，但值得指出的是，这有点挥霍。 ;-)它在你的循环的每次迭代，外部匿名函数和内部匿名函数上创建两个函数。这两个功能坚持（禁止实现优化，你知道有些引擎不会有）。相反，你可以只有一个循环加一个工厂函数：

  //在循环中
 newInput.onchange = makeHandler（x）; 
 
 //循环之外
 function makeHandler（x）{
 return function（）{
 PassFileName（x）; 
}; 
} 
  

有些人可能会更容易阅读code> makeHandler 仍然足够接近你不会失去循环的循环。

使用工厂函数也可以在范围内不会关闭任何 else 的机会，但是你必须将工厂函数放在更远的地方（例如，在一个完整的范围内）。

您还可以考虑使用通用的 curry 功能，例如 Prototype提供的。 传递呼叫时参数的通用 curry 看起来像这样：

  function curry（f）{
 var args = arguments; 
 return function（）{
 f.apply（undefined，args）; 
}; 
} 
  

但通常更有帮助>也传递运行时参数。这里是一个便宜（不优化;优化调用时间开销可以明显减少）：

 函数curry f）{
 var args = Array.prototype.slice.call（arguments，1）; 
 return function（）{
 f.apply（undefined，
 args.concat（Array.prototype.slice.call（arguments）））; 
}; 
} 
  

这两种情况的优点是，

： >，你依赖于分号插入的恐怖（在 return 语句结尾处应该有一个分号），我一直主张不依赖。在这个例子，虽然很漂亮darned安全。 ; - ）

I recently got into closures and anonymous functions, and I'm wondering if my code is the right way to do it (it works!):

newInput.onchange = function(x){
     return function(){
          PassFileName(x);  
     }
}(counter);

so this is in a loop that "saves" the current 'counter' value (1,2,3...). If I didn't have the return function, then 'counter' will always be the last value of 'counter'.

Am I approaching this correctly with that code? or is there a better way to "capture" the current counter and attach it to an onchange event?

thank you!

解决方案

Yes, you're approaching it correctly, but for maximum compatibility with implementations, you need to put parentheses around the function:

    newInput.onchange = (function(x){
//                      ^--- here
         return function(){
              PassFileName(x);  
         }
    })(counter);
//   ^--- and here

Whenever you're doing a function expression and calling it immediately, you need those parens because there's a parsing ambiguity otherwise.

---

Update:

While your approach is fine, it's worth pointing out that it's a bit profligate. ;-) It creates two functions on every iteration of your loop, the outer anonymous one, and the inner anonymous one. Both of those functions stick around (barring implementation optimisations, which you know Some Engines won't have). Instead, you could have just one per loop plus one factory function:

// In the loop
newInput.onchange = makeHandler(x);

// Outside the loop
function makeHandler(x){
     return function(){
          PassFileName(x);  
     };
}

Some may consider it easier to read (I certainly do), provided the makeHandler is still close enough to the loop that you don't lose track.

Using a factory function also offers you the opportunity of not closing over anything else in scope, although then you have to put the factory function further away (e.g., in a well-contained scope).

You might also consider a generic curry function, like the one provided by Prototype. A generic curry that doesn't pass on call-time arguments looks like this:

function curry(f) {
    var args = arguments;
    return function() {
        f.apply(undefined, args);
    };
}

But it's usually more helpful (but more expensive) to have one that does pass on the runtime arguments as well. Here's a cheap-and-dirty (not optimised; with optimisation call-time overhead can be markedly reduced):

function curry(f) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function() {
        f.apply(undefined,
                args.concat(Array.prototype.slice.call(arguments)));
    };
}

The advantage in both cases is that you're not closing over anything new that you can avoid.

---

Off-topic: Also, technically, you're relying on the horror that is semicolon insertion (there should be a semicolon at the end of your return statement), which I always advocate not relying on. Pretty darned safe in this example, though. ;-)

这篇关于将onchange函数事件附加到变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！