javascript - 在内部 JavaScript 函数中包含外部对象

Question

我发现了一些似乎与此相关的问题，但就我的理解而言，我的有所不同，所以这里是。 我极大地简化了我的代码，甚至用注释替换了一行，但概念是相同的......

function myFunction(options) {
    var button;
    options.widgets.forEach(function (w) {
        button = document.createElement("button");
        //add button to the DOM
        aListOnMyPage.addEventListener("selectionchanged", function (args) {
            var a = button;
        });
    });
}

因此，对于每个小部件，我创建一个新对象，然后将事件监听器添加到页面上的列表中，该列表的函数需要引用我创建的 DOM 元素(按钮)。 我看到的行为是我的按钮在创建事件监听器时正确设置，但是当监听器的事件触发时，按钮始终是对我创建的最后一个按钮的引用。 也许是因为已经晚了，但我无法理解为什么会这样。谁能帮我澄清一下吗？

Answer 1

当然可以。

你的问题实际上是范围。让我们看一下您编写的代码:

function myFunction(options) {
    var button;
    options.widgets.forEach(function (w) {
        button = document.createElement("button"); // UH-OH...
        //add button to the DOM
        aListOnMyPage.addEventListener("selectionchanged", function (args) {
            var a = button;
        });
    });
}

注意到呃哦？您已声明 button 应等于 document.createElement("button")，但由于您没有使用 var 关键字，因此您声明了一个全局变量，而不是多个局部变量。这意味着每次循环运行时，监听器都会引用一个全局变量，这会导致出现问题。

确保在这里使用局部变量，如下所示:

function myFunction(options) {
    options.widgets.forEach(function (w) {
        var button = document.createElement("button"); 
        //add button to the DOM
        aListOnMyPage.addEventListener("selectionchanged", function (args) {
            var a = button;  
        });
    });
}

这应该会大大改善你的情况。至少，我希望它能帮助你更进一步。祝你好运。