如何解决JavaScript循环中为Photoshop插件按钮绑定事件的索引关联问题？

问题描述 #

在为Photoshop插件编写代码绑定按钮点击事件时，无论点击哪个按钮，最终都会调用数组中最后一个action对象的runAction方法。代码示例如下：

actionObject = [];
actionObject[0] =  {name: "A1", id: "95ce"};
actionObject[1] =  {name: "B2", id: "9dk2"};
// ...
actionObject[10] =  {name: "H6", id: "9334"};

for (i = 0; i < actionObject.length; i++ ){
    console.log("#btn" + actionObject[i].name);
    var action = actionObject[i];
    $("#btn" + action.name).click(async function () {
        await ExecuteAsModal(() => runAction(action));
    });
}

点击任意按钮时，始终使用action={name: "H6", id: "9334"}调用runAction。

根因分析 #

这是JavaScript中变量作用域与闭包的经典问题：

• 使用var声明的action变量属于函数作用域，而非块级作用域。整个循环中只有一个action变量，所有点击事件的回调函数都引用同一个变量。
• 当循环执行完毕后，action已经指向数组的最后一个元素。此时点击按钮触发回调时，读取的是这个已经更新后的变量值。

解决方案 #

方案1：使用let代替var声明变量 #

let具有块级作用域，每次循环迭代都会创建一个新的action变量绑定，确保每个回调函数引用的是当前迭代的action对象：

for (let i = 0; i < actionObject.length; i++ ){ // 循环变量i也建议用let
    console.log("#btn" + actionObject[i].name);
    let action = actionObject[i]; // 用let替代var
    $("#btn" + action.name).click(async function () {
        await ExecuteAsModal(() => runAction(action));
    });
}

方案2：使用立即执行函数表达式(IIFE)创建闭包 #

通过IIFE为每个迭代创建独立的作用域，将当前action作为参数传入，确保回调函数捕获的是当前迭代的变量值：

for (var i = 0; i < actionObject.length; i++ ){
    console.log("#btn" + actionObject[i].name);
    var action = actionObject[i];
    // 用IIFE包裹，传入当前action
    (function(currentAction) {
        $("#btn" + currentAction.name).click(async function () {
            await ExecuteAsModal(() => runAction(currentAction));
        });
    })(action);
}

方案3：使用forEach遍历数组 #

forEach的回调函数会为每个元素创建独立的作用域，天然避免闭包共享变量的问题：

actionObject.forEach(function(action) {
    console.log("#btn" + action.name);
    $("#btn" + action.name).click(async function () {
        await ExecuteAsModal(() => runAction(action));
    });
});

以上三种方案都能解决问题，其中方案1是最简洁现代的写法，推荐优先使用。

内容的提问来源于stack exchange，提问作者dandan21