javascript - 将 onchange 函数事件附加到变量

Question

我最近接触了闭包和匿名函数，我想知道我的代码是否是正确的方法(它有效!):

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

所以这是在“保存”当前“计数器”值 (1,2,3...) 的循环中。如果我没有返回函数，那么“counter”将始终是“counter”的最后一个值。

我使用该代码是否正确地处理了这个问题？还是有更好的方法来“捕获”当前计数器并将其附加到 onchange 事件？

谢谢!

Answer 1

是的，您正在正确地处理它，但是为了与实现实现最大程度的兼容性，您需要在函数两边加上括号:

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

每当您执行函数表达式并立即调用它时，您都需要这些括号，否则会出现解析歧义。

---

更新:

虽然您的方法很好，但值得指出的是它有点浪费。 ;-) 它在循环的每次迭代中创建两个 函数，外部匿名函数和内部匿名函数。这两个功能都存在(除非实现优化，你知道某些引擎不会有)。取而代之的是，您可以只为每个循环加上一个工厂函数:

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

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

如果 makeHandler 仍然足够接近您不会迷路的循环，有些人可能认为它更容易阅读(我当然这么认为)。

使用工厂函数还为您提供了不关闭范围内任何else 的机会，尽管您必须将工厂函数放在更远的地方(例如，在一个包含良好的范围内)。

您也可以考虑使用通用的 curry功能，如 the one provided by Prototype . 不传递调用时参数的通用 curry 如下所示:

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

但是通常也传递运行时参数会更有帮助(但也更昂贵)。这是一个廉价而肮脏的(未优化；可以显着减少调用时间开销的优化):

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

这两种情况的优点是您不会关闭任何可以避免的新内容。

---

题外话:另外，技术上，你依赖于分号插入的恐怖(你的 末尾应该有一个分号return 语句)，我一直提倡不要依赖。不过，在这个例子中相当安全。 ;-)