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

Question

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

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

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

有没有办法在函数中首次定义或附加到事件时使用变量的当前值？

（请不要建议我在其中硬编码元素而不是 nextID。如果我愿意，我可以。）

Answer 1

您可以创建一个 IIFE，它将 nextID 的初始值绑定到该函数处理程序。目前我们正在创建一个闭包，其中变量值的范围限定为内部返回函数。

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

Answer 2

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

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(var i = 0; i < 10; i++) {} 这样的 for 不会创建作用域，一旦循环结束，i 在当前作用域中可用，它将包含 10.

我建议您查看下一个版本的 ECMA-Script (ECMA-Script 6) 的 let 关键字部分，它将让我们创建块作用域的变量。

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

How to capture current value of an outside variable when function is defined

javascript

jquery

function

anonymous-function