javascript - 为什么不鼓励在 JavaScript 的循环中创建函数?

标签 javascript html

<分区>

我是一个绝对的新手,我刚刚在 JavaScript: The Good Parts 中读到这篇文章。

在讨论作用域的章节中,它说“重要的是要理解内部函数可以访问外部函数的实际变量而不是复制以避免以下问题。 “然后下面的两个例子看起来像这样:

//不好的例子

var add_the_handlers = function (nodes) {
    var i;
    for (i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = function (e) {
            alert(i);
        };
    }
 };

//结束坏例子

var add_the_handlers = function (nodes) {
    var helper = function (i) {
        return function (e) {
            alert(i);
        };
    };
    var i;
    for (i = 0; i < nodes.length; i += 1) {
        modes[i].onclick = helper(i);
    }
};

根据作者的说法,第二个示例更好,因为它没有在函数内部使用循环,否则会造成计算上的浪费。但我不知所措,不知道如何处理它们。我如何将他的理论付诸实际应用?任何人都可以说明这两个示例结合 HTML 吗?

最佳答案

问题在于闭包。内部函数可以访问在这些函数外部定义的变量 i。执行完循环的所有迭代后,变量 i 将保存 nodes.length 的值。因此,当您单击 nodes[0] 时,警报会显示 nodes.length,这不是您所期望的。 (您可能希望警报显示 0。)当您单击 nodes[1]nodes[2] 等时同样如此. 所有这些的警报都会显示 nodes.length

关于javascript - 为什么不鼓励在 JavaScript 的循环中创建函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41710992/

相关文章:

javascript - 如何从下拉菜单中更改 DIV 的背景颜色?

javascript - html5隐藏所有div并在按钮点击时显示一个

javascript - 在容器中仅显示 8 行文本

javascript - 如何在内容占位符中使用 JavaScript 设置标签文本属性?

html - 是否可以使用 CSS 在图像 map 上设置鼠标悬停样式?

html - Logo 不响应 Bootstrap 3

javascript - 获取嵌套在另一个 iframe chrome 扩展中的 iframe

javascript - 使用 pagemod 添加一些 js 到 contentscript

javascript - 使用 javascript 迭代带有文本框的 div 并更改 id

html - 在不同的文件夹中调用 css 代码