jslint - 不要在循环中创建函数

Question

参考本主题:不要在循环中创建函数. - jslint错误

你如何在for循环中处理jquery .each(function(){...}？知道我需要在"each"函数中使用"for"的上下文.当然我可以将每个必需的参数映射到a函数在循环外声明的函数,但从我的角度来看,它会影响可读性.

有什么想法吗？

提前致谢.

Answer 1

好吧,你可以在你的循环中保持for的上下文,因为for中的所有内容实际上都与在开始时声明的函数在同一个上下文中.

所以让我们以Frits为例,但首先让我们首先让JSLint完全满意(减去循环错误中调用的函数).

/*global console*/
var my_func, i, list;
for (i = 0; i < list.length; i+= 1) {
    my_func = function (i) {
        console.log(i);
    };
    my_func(i);
}

请注意,每次迭代循环时,都要重新声明该my_func函数.那不酷!为什么一遍又一遍地重新声明相同的功能？

早先声明它,如下所示:

/*global console*/
var my_func, i, list;

my_func = function (i) {
    console.log(i);
};

for (i = 0; i < list.length; i+= 1) {
    my_func(i);
}

成功.现在,您不需要为每次迭代创建一个函数.而且,由于JSLint通过将所有var声明推送到顶部来帮助您实现,您仍然可以获得相同的上下文.

编辑:正如@Flame指出的那样,你不必早期使用jQuery声明函数each并且可以使用匿名函数,但是提前声明并不是一个坏主意,特别是如果你要在多个each调用中重用逻辑.主要的理解是1.)早期的声明实践仍然有优势,2)jQuery仍然会向你的函数发送参数(这里,我们正在调用的东西index),尽管JSLint 不会(和不应该抱怨eachs中使用的匿名函数(这里是jQuery酱).

如果你习惯于匿名$.each(function() {});构造,它最初会变得更不直观,但它也同样容易.

/*global alert, $ */
$( "li" ).each(function( index ) {
    alert( index + ": " + $(this).text() );
});

... 变成...

/*global $, alert */
var fnOutside = function(index) {
    alert( index + ": " + $(this).text() );
};
$( "li" ).each(fnOutside);

这可能会让人简单地混淆,因为函数调用没有参数,但是jQuery正在将"index"参数推送到函数中.你可以抓住上下文arguments数组,看看它是否仍然被推入那里,如果你想留下命名.

小提琴特异性IgE

也就是说,for构造不会创建新的闭包.这可能让你担心.没问题!

Answer 2

循环中函数的问题是：this，

for (var i = 0; i < list.length; i+= 1) {
    function my_func(i) {
        console.log(i);
    }
    my_func(i);
}

将被解释为：

var my_func;
for (var i = 0; i < list.length; i+= 1) {
    my_func = function (i) {
        console.log(i);
    }
    my_func(i);
}

因为变量提升。所有声明都将移至作用域的顶部（即函数）。所以在 for 循环中定义函数实际上没有意义。

如果您想在 for 循环中绑定到计数器，只需创建一个闭包即可。

需要明确的是：

$("..").each(function () {
    for(..) {
    }
});

很好。

for(..) {
    $("..").each(function () {

    });
}

不好，因为它相当于：

var my_func;
for(..) {
    my_func = function () {
        // ..
    }
    $("..").each(my_func);
}