Question

我正在研究Javascript中的闭包 mozilla.org。有一个叫做常见错误的部分完全让我感到震惊。我不知道它到底在说什么。

代码如下，

<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>
function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();

文字显示在帮助中

只会显示最后的帮助“您的年龄（您必须年满16岁）” 解决方案是在setupHelp

之外重写showHelp函数

function makeHelpCallback(help) {
  return function() {
    showHelp(help);
  };
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
  }
}

setupHelp();

我不明白解决问题的机制。由于我从不使用javascript访问DOM，而是使用jQuery，我在jQuery中重写了该函数

function makeHelpCallback(i) {
    return function () {
        $("#help").text(i);
    };
}
(function () {
    var helpText = [
    { 'id': 'email', 'help': 'Your e-mail address' },
    { 'id': 'name', 'help': 'Your full name' },
    { 'id': 'age', 'help': 'Your age (you must be over 16)' }
    ];

    for (var i = 0; i < helpText.length; i++) {
        var item = helpText[i];
        $("#"+item.id).focus(function () {
            new makeHelpCallback(item.help)();
        });
    }
})();

但这个bug并没有消失。据我所知，jQuery没有onfocus处理程序，不可能将处理程序绑定到同一级别的侦听器。它必须在function（）{}下。而且我无法达到Javascript所能达到的效果。

那么无论如何都要编写相当于Javascript代码的代码吗？

正如解释所说，它不起作用，因为听众共享相同的环境。无论它意味着什么，onfocus = function（）{showHelp（item.help）}分别执行三次。他们应该受到相应的约束。他们为什么会这样？因为showHelp是一个静态对象？如果是这样，添加新修饰符应该可以完成。而makeHelpCallback（item.help）也共享相同的环境。但它的确有效。为什么为什么???

为了您的测试方便，我们附上了完整的HTML代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p id="help">Helpful notes will appear here</p>
    <p>E-mail:
        <input type="text" id="email" name="email"></p>
    <p>Name:
        <input type="text" id="name" name="name"></p>
    <p>Age:
        <input type="text" id="age" name="age"></p>

    <script src="Scripts/jquery-1.9.1.min.js"></script>

    <script>
        function makeHelpCallback(i) {
            return function () {
                $("#help").text(i);
            };
        }
        (function () {
            var helpText = [
            { 'id': 'email', 'help': 'Your e-mail address' },
            { 'id': 'name', 'help': 'Your full name' },
            { 'id': 'age', 'help': 'Your age (you must be over 16)' }
            ];

            for (var i = 0; i < helpText.length; i++) {
                var item = helpText[i];
                $("#" + item.id).focus(function () {
                    makeHelpCallback(item.help)();
                });
            }
        })();
    </script>
</body>
</html>

Answer 1

我会在下面给你答案，但我建议你试着自己解决。一些提示：

您究竟要传递给focus方法？

您的函数变量是如何定义的？请记住，您需要了解何时执行您的功能。

在您的代码中：

$("#"+item.id).focus(function () {
        new makeHelpCallback(item.help)();
    });

将函数传递给focus，稍后调用此函数（当焦点事件发生时），循环结束后将item变量设置为最后一项。你应该做的是传递一个函数，它有自己的局部变量，当你调用focus时绑定它。这是makeHelpCallback的重点！你的代码应该是这样的：

 $("#"+item.id).focus(makeHelpCallback(item.help));

makeHelpCallback返回一个函数，在这里，如果你更清楚的话，将它全部写入内容：

$("#"+item.id).focus((function (i) {
    // this function is executed immediately
    // i is bound to the correct item.
    return function () {
        $("#help").text(i);
    };
})());

Answer 2

一个简单的例子更容易理解：

var i;
var funcsToRun = [];
for (i = 0; i < 3; ++i) {
  funcsToRun.push(function() { alert(i); });
}
funcsToRun[0](); // "3"
funcsToRun[1](); // "3"
funcsToRun[2](); // "3"

这是因为警报使用的“i”是闭包的一部分，并且粘在变量“i”上，当你执行函数时，变量“i”的值为3。但是：

var i;
var funcsToRun = [];
for (i = 0; i < 3; ++i) {
  funcsToRun.push(
    (function(idx) {
      return function() { alert(idx); };
    })(i)
  );
}
funcsToRun[0](); // "0"
funcsToRun[1](); // "1"
funcsToRun[2](); // "2"

这是有效的，因为您不是将警报附加到变量“i”，而是将其附加到“idx”，它会立即作为循环内部的“i”值而非之后的值进行评估。所以内部函数立即运行，但只返回alert(0)而不是alert(i)的另一个函数。

使用这种思路，您可以将其应用于更大的范例。

Answer 3

感谢Joe的简化示例。我想我可以抓住它。我试着将Joe的例子放入程序序列中。让我知道我错了。

var i;
var funcsToRun = [];

//for loop begins
i = 0
//i = 0
funcsToRun.push(function() { alert(i); }); // function(){ alert(i)} is not executed. i remains i.
i++ //i = 1
funcsToRun.push(function() { alert(i); });
i++ //i = 2
funcsToRun.push(function() { alert(i); });
i++ //i = 3 loop stopped. although the for loop completes, i remains in memory. It is not destroyed albeit its completion.

funcsToRun[0](); // function(){alert(i)} executes this moment, and i is 3 now.
funcsToRun[1](); // "3"
funcsToRun[2](); // "3"

Answer 4

最后我用jQuery实现了结果

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p id="help">Helpful notes will appear here</p>
    <p>
        E-mail:
        <input type="text" id="email" name="email">
    </p>
    <p>
        Name:
        <input type="text" id="name" name="name">
    </p>
    <p>
        Age:
        <input type="text" id="age" name="age">
    </p>

    <script src="Scripts/jquery-1.9.1.min.js"></script>

    <script>

        (function () {
            var helpText = [
            { 'id': 'email', 'help': 'Your e-mail address' },
            { 'id': 'name', 'help': 'Your full name' },
            { 'id': 'age', 'help': 'Your age (you must be over 16)' }
            ];

            for (var i = 0; i < helpText.length; i++) {
                var item = helpText[i];
                $("#" + item.id).focus(function (msg) {
                    return function () { $("#help").text(msg); }
                }(item.help));
            }
        })();
    </script>
</body>
</html>

谢谢乔和大卫

如何解决jQuery中的这个常见错误？

4 个答案: