闭包使用场景:
1.函数作为返回值,如下场景
function F1(){
var a = 100 //*变量
//返回一个函数(函数作为返回值)
return function(){
console.log(a) //a是定义的时候 的作用域,不是执行的时候的作用域,为100
}
}
//f1得到一个函数
var f1 = F1()
var a = 200 //全局作用域,不影响函数内作用域
f1()
2.函数作为参数传递
function F1(){
var a = 100 //*变量
return function(){
console.log(a) //*变量,父作用域寻找
}
}
var f1 = F1()
function F2(fn){
var a =300
fn()
}
F2(f1) //输出100
3.实际开发中闭包的应用:
闭包实际应用中主要用于封装变量,收敛权限
function isFirstLoad(){
var _list = [] //放在函数内部,封装变量,使外部无法修改
return function (id){
if (_list.indexOf(id) >= 0){ //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。
return false
}else{
_list.push(id)
return true
}
}
} //使用
var firstLoad = isFirstLoad()
firstLoad(10) //true
firstLoad(10) //false
firstLoad(20) //true
实例:创建10个a标签,点击哪个弹出哪个数字
错误写法:
//错误写法
var i,a
for( i = 0; i<10; i++){
a = document.createElement('a')
a.innerHTML=i+'<br/>'
a.addEventListener('click',function(e){
e.preventDefault() //preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
alert(i) //i都是10,i是*变量,要去父作用域(全局作用域)获取值,此时i已执行完,值为10
})
document.body.appendChild(a)
}
正确写法:
var i
14 for( i = 0; i<10; i++){
15 (function(i){
16 var a = document.createElement('a')
17 a.innerHTML=i+'<br/>'
18 a.addEventListener('click',function(e){
19 e.preventDefault() //preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
20 alert(i)
21 })
22 document.body.appendChild(a)
23 })(i) //创建一个自执行函数
24 }