javascript:将局部变量传递给匿名函数

Question

这个问题已经有答案了:

Javascript infamous Loop issue? [duplicate] (5 个回答)

已关闭 9 年前。

问题:如何访问shortcut或action或其他局部变量

相关:类似的问题但没有成功:

• Passing local variable to loader anonymous handler function
• how to pass local variables when assigning mouseover via anonymousfunction?
• javascript anonymous function parameter passing
• How to pass variable to anonymous function

Java 解决方案:设置final匿名函数中所需变量的修饰符

目标源代码:

//plugin.buttons is collection of button objects
for (var i in plugin.buttons) {
    var button = plugin.buttons[i];
    var icon = button.icon;
    var text = button.text;
    var shortcut = button.shortcut;
    var action = button.action; //action is a function ( or method )

    if (shortcut != null && shortcut.length > 0) {
        if ($.isFunction(action)) {
            console.log(shortcut); //it's valid shortcut
            //using jQuery hotkey plugin
            $('div[contenteditable]').bind('keydown', shortcut, function () {
                console.log(shortcut); //it's undefined
                action.call(); //it's undefined also
                return false;
            });
        }
    }
}

Answer 1

您可以将其传递为 event data

for (var i in plugin.buttons) {
    var button = plugin.buttons[i];
    var icon = button.icon;
    var text = button.text;
    var shortcut = button.shortcut;
    var action = button.action; //action is a function ( or method )

    if (shortcut != null && shortcut.length > 0) {
        if ($.isFunction(action)) {

            $('div[contenteditable]').on('keydown', {shortcut : shortcut}, function (e) {

                console.log(e.data.shortcut);

            });
        }
    }
}

但在这种情况下，真正的问题是 for 循环中没有特殊的作用域，因此在 for 循环中定义变量只会在每次迭代时覆盖相同的变量，这就是为什么它在事件处理程序中不起作用的原因稍后调用。

您必须将变量锁定在新范围内

for (var key in plugin.buttons) {
    (function(i) {
        var button = plugin.buttons[i];
        var icon = button.icon;
        var text = button.text;
        var shortcut = button.shortcut;
        var action = button.action; //action is a function ( or method )

        if (shortcut != null && shortcut.length > 0) {
            if ($.isFunction(action)) {
                console.log(shortcut); //it's valid shortcut
                //using jQuery hotkey plugin
                $('div[contenteditable]').bind('keydown', shortcut, function () {
                    console.log(shortcut); //it's undefined
                    action.call(); //it's undefined also
                    return false;
                });
            }
        }
    })(key);
}