js闭包问题理解

闭包是js的一个难点也是它的一个特色，是我们必须掌握的js高级特性，那么什么是闭包呢？它又有什么用呢？

js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的。

闭包有3个特性：

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

闭包存在两种的主要形式：

1、函数作为返回值

function fn(){
    var str = 'abc';
    return function(){
        return str
    }
}
var fn1 = fn();
console.log(fn1) //abc

在这段代码中，fn()中的返回值是一个匿名函数，这个函数在fn()作用域内部，所以它可以获取fn()作用域下变量str的值，将这个值作为返回值赋给全局作用域下的变量fn1,实现了在全局变量下获取到局部变量中的变量的值

• 经典闭包循环

function fn(){
    var num = 3;
    return function(){
        var n = 0;
        console.log(++n);
        console.log(++num);
    }
}
var fn1 = fn();
fn1(); //1 4
fn1()//1 5

一般情况下，在函数fn执行完后，就应该连同它里面的变量一同被销毁，但是在这个例子中，匿名函数作为fn的返回值被赋值给了fn1，这时候相当于fn1=function(){var n = 0 ... }，并且匿名函数内部引用着fn里的变量num，所以变量num无法被销毁，而变量n是每次被调用时新创建的，所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁，于是乎最后就剩下孤零零的num，于是这里就产生了内存消耗的问题

• 定时器与闭包

for(var i=0;i<5;++i){
        setTimeout(()=>{
            console.log(i,'000')
        },100)
}

image_01.png

for(var i=0;i<5;++i){
    (function(i){
        setTimeout(()=>{
            console.log(i,'000')
        },100)
    })(i)
}

image_02.png

引入闭包来保存变量i，将setTimeout放入立即执行函数中，将for循环中的循环值i作为参数传递，100毫秒后同时打印出1 2 3 4 5

2、闭包作为参数传递

image_03.png