在事件闭包中访问可变变量答案

【问题标题】：Accessing mutable variable in an event closure在事件闭包中访问可变变量
【发布时间】：2013-06-20 15:45:04
【问题描述】：

我正在尝试使用mousetrap Javascript 插件以类似的方式处理一些击键，所以我想将它们编码如下：

    var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );

    }

但是，很明显，i 是可变的。但是，我不确定如何在响应中与事件参数竞争的地方编写闭包。关于如何处理这种情况的建议？

【问题讨论】：

您想在属性处理程序中使用该事件吗？在这种情况下，我不太理解“竞争”。
向我们展示您的尝试。事件参数有什么问题？闭包 IEFE 应该返回接受 e 参数的处理函数。

标签： javascript closures dom-events mousetrap

【解决方案1】：

如何在响应中与事件参数竞争的地方编写闭包

在整个循环体周围使用闭包（如@dandavis 演示的那样），或仅在处理程序周围使用它：

…
    Mousetrap.bind(
        [   'command+' + iKey,
            'command+' + iKeyUpper,
            'ctrl+' + iKey,
            'ctrl+' + iKeyUpper],
        (function(_i) { // of course you can use the name `i` again
            return function( e ) {
                console.log( "you clicked: " + _i );
            };
        })(i) // and pass in the to-be-preserved values
    );

【讨论】：

【解决方案2】：

您需要将 i 变量包装在本地范围内，这样它就不会与 for 循环中的“i”同步：

   var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
      (function(i){
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );
      }(i));
    }

另一种选择是使用函数式数组方法，因为它们使用函数，所以总是有自己的范围，并且它们本质上为您提供元素值和元素索引：

 var keys = [ 'b', 'i', 'u'];
   keys.map(function(iKey, i){
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            function( e ) {
                console.log( "you clicked: " + i );
        }); // end bind()    

   }); // end map()

第二个示例将在 IE9+ 中开箱即用，但您可以使用简单的插入式 Array 方法兼容包使其在任何地方工作，通常包含在 IE shims 中...

【讨论】：