理解闭包定义&&使用

what 闭包？

• 红宝书(p178)上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数
• MDN 对闭包的定义：闭包是指那些能够访问自由变量的函数。

（其中自由变量，指在函数中使用的，但既不是函数参数arguments也不是函数的局部变量的变量，其实就是另外一个函数作用域中的变量。）

闭包产生的原因?

首先要明白作用域链的概念，其实很简单，在ES5中只存在两种作用域————全局作用域和函数作用域，当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链，值得注意的是，每一个子函数都会拷贝上级的作用域，形成一个作用域的链条

闭包有哪些表现形式?

• 返回一个函数
• 作为函数参数传递

使用场景

① 返回值

function fn(){
    var name="lijq";
    return function(){
        return name;
    }
}
var fncopy = fn();
console.log(fncopy())  //lijq

② 函数赋值

var fn2;
function fn(){
    var name="lijq";
    //将函数赋值给fn2
    fn2 = function(){
        return name;
    }
}
fn()  //要先执行进行赋值，
console.log(fn2())  //执行输出lijq

③ 函数参数

function fn(){
    var name="lijq";
    return function callback(){
        return name;
    }
}
var fn1 = fn() //执行函数将返回值（callback函数）赋值给fn1，
 
function fn2(f){
    //将函数作为参数传入
    console.log(f());//执行函数，并输出
}
fn2(fn1)//执行输出lijq

④ IIFE

(function(){
    var name="hello";
    var fn1= function(){
        return name;
    }
    //直接在自执行函数里面调用fn2，将fn1作为参数传入
    fn2(fn1);
})()
function fn2(f){
    //将函数作为参数传入
    console.log(f());//执行函数，并输出
}

⑤ 循环赋值

//每秒执行1次，分别输出1-10
for(var i=1;i<=10;i++){
    // IIFE
    (function(j){
        //j来接收
        setTimeout(function(){
            console.log(j);
        },j*1000);
    })(i) //i作为实参传入
}
// 也可以使用let 替换var

⑥ getter/setter

function fn(){
    var name='lijq'
    setName=function(val){
        name = val;
    }
    getName=function(){
        return name;
    }

    //将setName，getName作为对象的属性返回
    return {
        setName,
        getName
    }
}
var fn1 = fn();//返回对象，属性setName和getName是两个函数
console.log(fn1.getName());//lijq
fn1.setName('lijq-change');//setter修改闭包里面的name
console.log(fn1.getName());//lijq-change

⑦ 缓存cache

// 比如求和操作，如果没有缓存，每次调用都要重复计算，采用缓存已经执行过的去查找，查找到了就直接返回，不需要重新计算    
var fn=(function(){
  var cache={};//缓存对象
  var calc = function(arr){//计算函数
      var sum=0;
      //求和
      for(var i=0;i

⑧ 迭代器

var arr =['a1', 'b2', 123];
function incre(arr){
    var i=0;
    return function(){
        //这个函数每次被执行都返回数组arr中 i下标对应的元素
         return arr[i++] || 'done';
    }
}
var next = incre(arr);
console.log(next());//a1
console.log(next());//b2
console.log(next());//123
console.log(next());//done