聊一聊js闭包以及常见的运用场景

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浏览器中可能还会导致内存泄漏等问题；故在退出函数之前，将所有变量删除。