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

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

本文关键字：变量 外部 何捕获 函数 定义      更新时间：2023-09-26

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

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

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

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

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

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

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脚本（ECMA脚本6）的let关键字部分，它将允许我们创建块范围的变量。

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

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