定义函数时如何捕获外部变量的当前值

Question

通常，我会以编程方式将处理程序附加到DOM中依赖于以后可能会更改的变量的元素上。

nextID = "#content-" + dataElement.elementBack;
something.on("change", function (e) {
    $(nextID).css({left: 0, position:'fixed', zindex: -1});
});

到该函数被触发时，nextID的值已更改并且作用于错误的元素。

在第一次定义变量或将其附加到事件时，是否可以使用该函数的当前值？

（请不要建议我在其中硬编码该元素，而不是nextID。如果可以的话，我可以这样做。）

Answer 1

解决方法是使用自调用函数 ：

nextID = "#content-" + dataElement.elementBack;

(function(nextID) {
    something.on("change", function (e) {
        $(nextID).css({left: 0, position:'fixed', zindex: -1});
    });
})(nextID);

函数在JavaScript中创建新的作用域，并且由于您将nextID用作参数，因此nextID将成为作用域，并且将在触发change事件时捕获并可用。

这是因为JavaScript不会为函数以外的任何其他语言构造创建作用域。 例如， for for(var i = 0; i < 10; i++) {}将不会创建作用域，并且一旦循环结束， i在当前作用域中可用，它将包含10 。

我建议您看一下下一版ECMA-Script（ECMA-Script 6）的let关键字部分，它将使我们创建基于块的变量。

Answer 2

你可以创建一个初始值绑定IIFE nextID该功能的处理程序。 当前，我们正在创建一个闭包，其中变量值的范围仅限于内部返回的函数。

nextID = "#content-" + dataElement.elementBack;
something.on("change", (function(nextID) { 
    return function (e) {
        $(nextID).css({left: 0, position:'fixed', zindex: -1});
       }
    })(nextID)
);