JSlint错误’不要在循环中创建函数’。引出有关Javascript本身的问题

JSlint error 'Don't make functions within a loop.' leads to question about Javascript itself

我有一些代码在循环中调用匿名函数，类似于这个伪示例：

1
2
3
4

for (i = 0; i < numCards; i = i + 1) {
card = $('').bind('isPopulated', function (ev) {
var card = $(ev.currentTarget);
....

JSLint报告错误"不要在循环中创建函数"。我喜欢保持我的代码JSLint干净。我知道我可以将匿名函数移出循环并将其作为命名函数调用。除此之外，这是我的问题：

Javascript解释器是否真的会为每次迭代创建一个函数实例？或者只有一个函数实例"已编译"并且重复执行相同的代码？也就是说，将函数移出循环的JSLint"建议"实际上是否会影响代码的效率？

相关讨论

部分取决于您使用的是函数表达式还是函数声明。它们是不同的东西，它们发生在不同的时间，它们对周围的范围产生不同的影响。让我们从区别开始吧。

函数表达式是function生产，您将结果用作右手值＆nbsp;＆mdash;例如，您将结果分配给变量或属性，或将其作为参数传递给函数，等等。这些都是函数表达式：

1
2
3
4
5

setTimeout(function() { ... }, 1000);

var f = function() { ... };

var named = function bar() { ... };

(不要使用最后一个＆nbsp;＆mdash;这称为命名函数表达式＆mdash;实现有bug，特别是IE。)

相反，这是一个函数声明：

1	function bar() { ... }

它是独立的，你没有将结果用作右手值。

它们之间的两个主要区别：

评估函数表达式在程序流中遇到的位置。当控件进入包含范围(例如，包含函数或全局范围)时，将评估声明。

函数的名称(如果有的话)在函数声明的包含范围中定义。它不适用于函数表达式(禁止浏览器错误)。

你的匿名函数是函数表达式，因此禁止解释器进行优化(可以自由地进行)，它们将在每个循环中重新创建。因此，如果您认为实施将进行优化，那么您的使用就可以了，但将其分解为命名函数还有其他好处，并且＆nbsp;＆mdash;重要的＆NBSP;＆MDASH;不花任何你的钱。另外，请参阅casablanca的答案，了解为什么解释器可能无法优化在每次迭代时重新创建函数，具体取决于它检查代码的程度。

更大的问题是如果你在循环中使用函数声明，条件的主体等：

1
2
3
4
5
6

function foo() {
for (i = 0; i < limit; ++i) {
function bar() { ... } // <== Don't do this
bar();
}
}

从技术上讲，仔细阅读规范的语法表明这样做是无效的，尽管实际上几乎没有实现强制执行。实施的内容是多种多样的，最好远离它。

对于我的钱，最好的办法是使用单个函数声明，如下所示：

1
2
3
4
5
6
7
8
9

function foo() {
for (i = 0; i < limit; ++i) {
bar();
}

function bar() {
/* ...do something, possibly using 'i'... */
}
}

你得到相同的结果，实现不可能在每个循环上创建一个新函数，你可以获得具有名称的函数的好处，并且你不会丢失任何东西。

相关讨论

+1表示expr /语句差异。
循环中的声明并非真正无效。调用外部函数时，所有声明都会被实例化，因此无论是在循环内还是外部都没有区别。
@casablanca：如果您阅读规范中的语法，则无效。考虑条件情况尤其重要：if (a) { function foo() { ... } } else { function foo() { ... } }。这就是为什么如果你阅读语法它是无效的。 ;-)
+1，你有一些详细的JS知识，大部分都没有。我认为从技术上讲，你的最后一个例子也是无效的。函数声明仅在顶层严格有效。但它一切都很好。
对不起，我刚检查了规格，你说得对。但在我看来，如果语法允许它，它的行为方式与if (a) { var b; } else { var c; }相同，就像在函数开头声明了所有内容一样。
澄清：Mozilla(其他浏览器似乎做类似的事情)的方式似乎允许(非函数)块中的函数声明是通过引入ECMAScript的扩展名为函数声明(不要与函数声明混淆，并且不幸的是，很多人说"功能声明"，而不是"功能声明")。函数语句比函数声明更接近函数表达式。 kangax的优秀文章有详细信息：kangax.github.com/nfe/#function-statements
我绝对同意，除非函数声明有效，否则最好避免看起来像函数声明的任何内容。
@Claudiu：最后一个例子是有效的。函数声明可以嵌套在函数内部，而不是嵌入在控制流语句中。这是明确允许的。在进入包含范围(在本例中为函数)时评估声明。
@casablanca："但在我看来，如果语法允许它，它会表现得......就像在开始时宣布所有内容一样......"问题是如果你声明了两个foo函数不同的身体，哪一个优先？完全接受与var类比的观点，但它不能正常工作，因为var不能用来声明两个完全不同的东西。 (带有初始值设定项的var变为var [发生在作用域上]和赋值[发生在代码流程中];同样的事情不会发生在函数声明中。):-)
@Tim Down：感谢kangax链接，我没有把握它(但它是我在浏览器中了解NFE奇怪的地方)。
@ T.J。克劳德：啊，你说对了，我刚检查了规格。 FunctionBody包含SourceElements，其中包含SourceElement，其中包含Statement和FunctionDeclaration s
@ T.J.Crowder：啊，我现在看到了问题。 :)
在最后两个例子中，您是不是忘记了函数声明被提升到范围的顶部？在倒数第二个示例中，函数将从循环中拉出到顶部。在最后一个示例中，function bar() { ... }在循环之前被解释。至少这是我从这篇文章中学到的：sufficientlygood.com/JavaScript-Scoping-and-Hoisting.html为什么匿名函数被认为是表达式而不是声明？它们看起来更像是我的宣言！
@MKSafi：不，我不会忘记这一点。第一个，循环中有一个声明，只是无效的JavaScript(当前)。那里根本不允许声明。是的，在最后一个例子中，bar函数是在循环之前创建的 - 这就是我在那里使用它并说(实际上)"这就是我要做的事情"。重新表达与声明：如果它被用作右手值(因此，赋值或初始化的右侧，或传递给函数，或者它前面有一个运算符)，它就是一个表达式。如果没有，这是一个声明。
@ T.J.Crowder，我明白了。因此，当函数用于其值时，它就是一个表达式。否则，它只是被宣布。
@MKSafi：对。当然，声明必须有名称，而在表达式中，名称是可选的。不幸的是，命名函数表达式在IE8及更早版本中无法正常工作。

Would a Javascript interpreter really create an instance of the function per iteration?

它必须因为它不知道函数对象是否会在别处修改。请记住，函数是标准JavaScript对象，因此它们可以具有与任何其他对象类似的属性。当你这样做：

1	card = $('').bind('isPopulated', function (ev) { ... })

尽管如此，bind可以修改对象，例如：

1
2
3

function bind(str, fn) {
fn.foo = str;
}

显然，如果在所有迭代中共享函数对象，这将导致错误的行为。

相关讨论

嘘到JSLint。这就像头上的钝器一样。每次遇到function时都会创建一个新的函数对象(它是一个语句/表达式，而不是声明 - 编辑：这是一个白色的谎言。参见T.J.Crowders答案)。通常这是在闭包等循环中完成的。更大的问题是创建假闭包。

例如：

1
2
3
4
5

for (var i = 0; i < 10; i++) {
setTimeout(function () {
alert(i)
}, 10)
}

会导致"奇怪"的行为。这不是"在循环中创建函数而不是理解JS用于变量作用域和闭包的规则(变量没有绑定在闭包，作用域 - 执行上下文中)的问题。

但是，您可能希望在函数中创建闭包。考虑这个不太令人惊讶的代码：

1
2
3
4
5
6
7

for (var i = 0; i < 10; i++) {
setTimeout((function (_i) {
return function () {
alert(_i)
}
})(i), 10)
}

不好了！我还是创造了一个功能！

相关讨论

解释器实际上可以在每次迭代时创建一个新的函数对象，只是因为该函数可能是一个需要捕获其外部作用域中任何变量的当前值的闭包。

这就是为什么JSLint想要让你远离在紧密循环中创建许多匿名函数的原因。