js面试题知识点全解(一闭包)

闭包使用场景:
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 }