JavaScript中匿名函数循环传参数(不触发函数的执行)

• 我们都知道定义函数的方式有两种，一种是函数声明，另一种是函数表达式，函数声明的语法是这样的:

function functionName(arg0, arg1, arg2) {
    // 函数体
}

• 函数表达式有几种不同的表达方式，下面是最常见的一种形式:

var functionName = function(arg0, arg1, arg2) {
    // 函数体
}

• 我们也有见到这样的写法

(functioin(arg0, arg1){})(arg0, arg1)

• 对于上面的写法，我们可以这样理解，第一个括号的内容，我们可以认为是匿名函数的函数名，第二个括号用来传参数，这样一看，是不是很像函数的调用呀，事实上，也就是这样

回归正题，如何在循环中给匿名函数传参，并且是在不触发执行的情况下

• 假定有一个for循环，你需要根据索引给数组中的某个元素绑定click事件，并且需要把索引也传到绑定的事件中，我们该怎么做呢？

for (var i = 0; i <= 10; i++) {
    var item = arr[i] // arr是预先定义好的一个数组
    item.onclick = function () {
        console.log(i)
    }
}

• 这样子的预期输出应该都是10，于是我们换用下面这种写法

for (var i = 0; i <= 10; i++) {
    var item = arr[i]
    item.onclick = (function (index) {
        console.log(index)
    })(i)
}

• 这样子使用函数表达式的写法，虽然能够输出1，2，3，...，但是却是，代码一执行，就输出了，这并不是我们想要的结果，我们的预期是，只有当点击的时候，才输出，于是乎，我们来看看到底应该怎么写

for (var i = 0; i <= 10; i++) {
    var item = arr[i]
    item.onclick = (function (index) {
        return function () {
            console.log(index)
        }
    })(i)
}

• 这样子就可以完美符合我们的预期了，为什么闭包里要再返回一个匿名函数呢，我自己是这样理解的，返回了一个函数声明，所以代码执行到这个地方时，并不会执行函数内部的代码，只有当点击的时候，才会进行对这个函数的调用，有兴趣的可以自己测试下