mysql闭包表应用场景_闭包经典使用场景之一

闭包经典使用场景之一：通过循环给页面上多个dom节点绑定事件。

题目：现在有个HTML片段，要求编写代码，点击编号为几的链接就弹出其编号

• 编号1，点击我请弹出1
• 2
• 3
• 4
• 5

一般不知道这个题目用闭包的话，会写出下面的代码：

for(var i = 0; i < list.length; i++) {

list[i].addEventListener('click', function(){

alert(i)

}, true)

}

或者

for(var i = 0; i < list.length; i++) {

list[i].onclick = function() {

alert(i)

}

}

结果是点击每一项都弹出5 。原因是onclick事件是异步触发的，当事件被触发时，for循环早已结束，此时变量i的值已经是5！故当onclick事件顺着作用域链从内向外查找变量i时，找到的值总是5。

var list = document.getElementsByTagName('li')

for(var i = 0; i < list.length; i++) {

list[i].addEventListener('click', function(i){

return function() {

alert(i+1)

console.log(i+1)

}

}(i), true)

}

在闭包作用下，定义事件函数的时候，每次循环的i值都封闭起来，这样在函数执行时，会查找定义时的作用域链，这个作用域链里的i值是在每次循环中都被保留的，因此点击不同的li会alert出不同编号。

下面总结onclick事件的6种解决办法：

1、加一层闭包，返回一个函数作为响应事件

var list = document.getElementsByTagName('li')

for(var i = 0; i < list.length; i++) {

list[i].onclick = function(j) {

return function() { // 返回一个函数 alert(j+1)

console.log(j+1)

}

}(i)

}

2、用Function实现，实际上每产生一个函数实例就会产生一个闭包

var list = document.getElementsByTagName('li')

for(var i = 0; i < list.length; i++) {

list[i].onclick = new Function("alert(" + i +")")

// new一次就产生一个函数实例}

3、用Function实现，注意与法2的区别

var list = document.getElementsByTagName('li')

for(var i = 0; i < list.length; i++) {

list[i].onclick = Function("alert(" + i +")")

}

4、加一层闭包，i以局部变量形式传递给内层函数

var list = document.getElementsByTagName('li')

for(var i = 0; i < list.length; i++) {

(function() {

var temp = i // 调用时局部变量 list[i].onclick = function() {

alert(temp+1)

console.log(temp+1)

}

})()

}

5、加一层闭包，i以函数参数形式传递给内层函数

var list = document.getElementsByTagName('li')

for(var i = 0; i < list.length; i++) {

(function(j) {

list[i].onclick = function() {

alert(j+1)

console.log(j+1)

}

})(i)

}

6、将变量i保存在匿名函数自身

var list = document.getElementsByTagName('li')

for(var i = 0; i < list.length; i++) {

(list[i].onclick = function() {

alert(arguments.callee.i + 1)

console.log(arguments.callee.i + 1)

}).i = i

}

7、将变量保存在每个元素对象li上

var list = document.getElementsByTagName('li')

for(var i = 0; i < list.length; i++) {

list[i].i = i

list[i].onclick = function() {

alert(this.i + 1)

console.log(this.i + 1)

}

}

8. 先在循环之外创建一个辅助函数让其再返回一个绑定了当前i值的函数

var list = document.getElementsByTagName('li')

var helper = function(i) {

return function() {

alert(i+1)

console.log(i+1)

}

}

for(var i = 0; i < list.length; i++) {

list[i].onclick = helper(i)

}