1.首先我们有个需求是,有一段ul,循环给里面的li绑定事件;
页面布局这样子的,现在我们需要用到闭包来实现这样一个需求:
方法一:绑定事件放在立即执行函数中
function callback(text){
document.getElementById(text.id).innerHTML = 'hello world'
}
function setListMsg(text){
var list = [
{id:'li1',content:'条件一'},
{id:'li2',content:'条件二'},
{id:'li3',content:'条件三'},
]
for(var i = 0; i<list.length; i++){
(function(){
var item = list[i];
document.getElementById(item.id).innerHTML = item.content;
document.getElementById(item.id).onclick = function(){
callback(item)
}
})() //放立即执行函数,立即绑定,用每次的值绑定到事件上,而不是循环结束的值
}
}
setListMsg()
方法二:利用ES6的 let申请,作用域只在当前块中
function callback(text){
document.getElementById(text.id).innerHTML = 'hello world'
}
function setListMsg(text){
var list = [
{id:'li1',content:'条件一'},
{id:'li2',content:'条件二'},
{id:'li3',content:'条件三'},
]
for(var i = 0; i<list.length; i++){
let item = list[i];
document.getElementById(item.id).innerHTML = item.content;
document.getElementById(item.id).onclick = function(){
callback(item)
}
}
}
setListMsg()
- 闭包的概念:
闭包就是一种特俗的作用域,即静态作用域;简单的理解就是:子函数可以访问父函数内部的私有变量。 - 作用:
变量的值始终保存在内存中;
读取函数的内部变量;
方便调用上下文的局部变量,利于封装; - 缺点:
由于闭包的变量是始终保存在内存中,内存消耗会变大,导致网页性能问题。在IE浏览器中可能还会导致内存泄漏等问题;故在退出函数之前,将所有变量删除。