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)
}
  • 这样子就可以完美符合我们的预期了,为什么闭包里要再返回一个匿名函数呢,我自己是这样理解的,返回了一个函数声明,所以代码执行到这个地方时,并不会执行函数内部的代码,只有当点击的时候,才会进行对这个函数的调用,有兴趣的可以自己测试下
上一篇:php 常用数组操作


下一篇:Java SpringMvc+hibernate架构中,调用Oracle中的sp,传递数组参数