js闭包循环原因_浅谈JavaScript闭包和作用域问题

当你声明一个变量的时候，一般是这样的：

var a = 'a string';var b = new String('a string');复制代码

但这个时候你用typeof函数检测这两个变量的类型，就会发现以下结果：

console.log(typeof a);//stringconsole.log(typeof b);//object复制代码

这是为什么呢？

这就要说到javaScript的变量存储，变量存储有两种方式：

其一：简单的值类型(undefined、number、string、boolean)存储在栈里。

其二：引用类型(函数、数组、对象、null)存储在堆里，栈里储存他们的内存地址(如下图)。

String，Number，Boolean等类都派生自Object对象，因此通过 new 关键字构造的她们都属于对象，而不是简单的值类型。

例子里的变量b，通过String构造函数声明，则b的__proto__指向String函数的prototype对象，因而b也继承有String函数的prototype的所有属性。

而变量a的声明方法是直接通过等号赋值，则变成了一个简单的值类型，存储在栈中。

作用域和上下文环境

乍一听这个名词我们可能有点不太能理解，我们先这么浅薄地理解：

作用域是函数的一块“领地”，上下文环境保存作用域内的参数名和值，例如：

var a = 1,    foo = function(b){        console.log(a+b);    };foo(2);复制代码

1、 因为我们的代码在全局环境内执行，在执行代码之前(即预编译)，将先创建全局上下文环境，再把全局上下文环境压入 上下文栈 :

全局上下文环境aundefinedfooundefinedthiswindow

2、然后我们执行代码(到调用foo函数之前)，然后为变量赋值：

全局上下文环境a1foofunctionthiswindow

3、 然后我们调用foo函数，我们的上下文环境就要转到foo函数内部，并把foo函数执行上下文环境压入 上下文栈 ，：

foo函数执行上下文环境b2arguments[2]thiswindow

这时候 上下文栈 内有两个上下文环境：全局上下文 和 foo函数执行上下文。

但是在执行的时候，我们发现foo函数的作用域里没有变量a，我们要到哪里取呢？

答案是创建这个函数的作用域里取，foo函数是全局创建的，因此我们就回到全局作用域里找变量a。

然后看到全局上下文环境中，有变量a，它的值是1。

a + b == 1 + 2 == 3

因此，最后控制台输出：3

4、到此为止，foo函数执行完毕，foo函数执行上下文环境出栈销毁，最后留下全局上下文环境：

把整个过程连在一起，就是下面这张图：

作用域和上下文的区别

作用域只是一个“地盘”，一个抽象的概念，其中没有变量。

要通过作用域对应的执行上下文环境来获取变量的值。

同一个作用域下，不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值。

所以，作用域中变量的值是在执行过程中产生的确定的，而作用域却是在函数创建时就确定了。

闭包

概念

了解到我们的先导知识后，我们最后来看闭包，闭包有两种情况：

1. 函数作为返回值function fn(){ return function foo(){ console.log('闭包'); } } //调用fn立即执行foo 复制代码
2. 函数作为参数被传递/* * @params n,m number型 * @return 返回两个数相加额结果 */ function add(n,m){ return n+m; } //闭包 (function fn(f){ var n = 1,m = 2; f(n,m); // 调用add函数 })(add); // add函数作为参数f传入 复制代码

闭包的重点其实就在于，函数执行完毕之后，上下文环境不会被销毁，例如：

我们会发现，在给变量f赋值的时候函数fn()就执行完了，按理说，上下文环境应该销毁，我们应该访问不到a。

但其实fn的上下文环境并没有出栈，fn函数的上下文环境依旧可以访问到。

这也是为什么说闭包会导致内存泄漏和增加内存开销。

应用场景

那在什么场景下可以用到闭包呢

1、模拟私有变量

var Counter = function() {        var privateCounter = 0;        function changeBy(val) {            privateCounter += val;        }        return {            increment: function() {                changeBy(1);            },            decrement: function() {                changeBy(-1);            },            value: function() {                return privateCounter;            }        }       };        var counter1 = Counter();// 上下文环境一    var counter2 = Counter();// 上下文环境二，与环境一不共享变量复制代码

每个闭包有自己的上下文环境，上文的例子中，创建了两个私有成员，变量privateCounter和函数changeBy。

这两个变量都必须要用Counter.increment，Counter.decrement 和 Counter.value这三个方法中的一个调用，这就实现了私有成员。

2、函数防抖

/**     * @function debounce 函数防抖     * @param {Function} fn 需要防抖的函数     * @param {Number} interval 间隔时间     * @return {Function} 经过防抖处理的函数     * */    function debounce(fn, interval) {        let timer = null; // 定时器        return function() {            // 清除上一次的定时器            clearTimeout(timer);            // 拿到当前的函数作用域            let _this = this;            // 拿到当前函数的参数数组            let args = Array.prototype.slice.call(arguments, 0);            // 开启倒计时定时器            timer = setTimeout(function() {                // 通过apply传递当前函数this，以及参数                fn.apply(_this, args);                // 默认300ms执行            }, interval || 300)        }    }复制代码

3、函数节流

/** * @function throttle 函数节流 * @param {Function} fn 需要节流的函数 * @param {Number} interval 间隔时间 * @return {Function} 经过节流处理的函数 * */function throttle(fn, interval) {    let timer = null; // 定时器    let firstTime = true; // 判断是否是第一次执行    // 利用闭包    return function() {        // 拿到函数的参数数组        let args = Array.prototype.slice.call(arguments, 0);        // 拿到当前的函数作用域        let _this = this;        // 如果是第一次执行的话，需要立即执行该函数        if(firstTime) {                    // 通过apply，绑定当前函数的作用域以及传递参数            fn.apply(_this, args);            // 修改标识为null，释放内存            firstTime = null;        }        // 如果当前有正在等待执行的函数则直接返回        if(timer) return;        // 开启一个倒计时定时器        timer = setTimeout(function() {            // 通过apply，绑定当前函数的作用域以及传递参数            fn.apply(_this, args);            // 清除之前的定时器            timer = null;            // 默认300ms执行一次        }, interval || 300)    }}复制代码

4、setTimeout场景

for(var i = 0; i < 5 ; i++ ){    setTimeout(function(){console.log(i)},100);}复制代码

我们知道js是单线程的，setTimeout则是异步方法，因此每次遍历碰到setTimeout，就把里面的代码放到待执行栈里，等for循环遍历结束，再执行。

而因为i是用var定义的值类型，直接存储在栈内，每一次循环，i的值都被新值覆盖，因此最后一次循环结束，i=5。

然后才开始执行五次console.log(i);

即得到输出：5 5 5 5 5。

要解决这个问题，第一个方法是使用自执行函数提供闭包条件，再把i值保存到闭包中。

自执行函数会立即执行，因此setTimeout函数不会被压入待执行栈而立即执行。

for(var i = 0; i < 5 ; i++ ){    (function(i){        setTimeout(function(){console.log(i)},100);    })(i)}// => 0 1 2 3 4复制代码

还有一种方法是把var改成let，此中原理也可参照扩展阅读中var和let的区别。

扩展

var和let的区别

1. 作用域var 的作用域在整个函数let 的作用域在{}内，例如：function fn(flag){ if(flag){ let i = 'success'; } console.log(i) } fn(true); //VM167:5 Uncaught ReferenceError: i is not defined 复制代码我们发现，i 的作用域在 if 语句里，一旦 if 语句执行结束，i 就被销毁，因此，当代码执行到console.log(i)的时候，自然找不到变量。把let给改成var，函数就能够正常运行。

2. 变量提升var 在函数声明的时候就创建了空间，并被赋值为undefined。(function fn(){ console.log(a); // =>undefined var a = 1; console.log(a); // =>1 })() 复制代码执行的顺序相当于：1、var a = undefined; 2、console.log(a); // =>undefined 3、a = 1; 4、console.log(a); // =>1 let 则只有到执行到声明语句的时候才创建空间。(function fn(){ console.log(a); let a = 1; console.log(a); })() //Uncaught ReferenceError: a is not defined 复制代码执行的顺序是：1、console.log(a)2、找不到a3、抛出异常Uncaught ReferenceError: a is not defined