彻底理解js闭包并应用，吊打面试官！

本是古典何须时尚 2021-07-24 11:06 333阅读 0赞

**目录**

闭包

我的理解分为3点：

比较一下例1和例2

其实我们经常使用闭包

循环中闭包的使用

下面稍作修改就可以达到我们想要的效果

应用

欢迎指正！！

--------------------

# 闭包 #

给人的感觉是很熟悉却又抓不到的感觉，都知道它很神奇，用了这么多年闭包却也没有真正意义上去分析他、总结它，今天就来总结一下！

书中的定义：当函数可以记住并访问所在的作用域时，就产生了闭包（参考于“你不知道的JavaScript”）。

# 我的理解分为3点： #

1.  存在函数嵌套
2.  内部函数存在对外部函数的引用
3.  在当前作用域以外依然能够执行

前两点我认为是形成闭包的条件，第3点是闭包存在的意义或者说应用；下面用例1 分析一下：

function fruits(){
    			var n = 1;
    			function apple(){
    				console.log(n);
    			}
    			
    			apple();//执行apple
    		}
    		
    		fruits();//执行fruits

执行这段代码的话，会输出 1

看看这个是闭包吗？

首先apple函数嵌套在fruits里面，满足条件1存在函数嵌套；

其次在apple函数里面对fruits作用域里面的n进行了引用，满足条件2，并且最终的输出正确值1。

但我们注意apple函数的执行却是在fruits函数的作用域里面，我的理解是有闭包的条件，却没有闭包的应用或者说闭包的作用。

修改一下代码，就可以变成闭包，例2 ：

function fruits(){
    			var n = 1;
    			function apple(){
    				console.log(n);
    			}
    			//返回这个函数apple
    			return apple;
    		}
    		
    		var a = fruits();//执行fruits
    		//执行a 实际就是执行apple函数
    		a();

这里对例1稍微做了一些修改，就变成了例2，这例2的代码也同时满足之前讲的闭包条件1和2，存在函数嵌套，apple函数也对n进行了引用，注意：apple函数在fruits函数的最后返回了，那么var a = fruits(); 其实就是让a指向了apple函数，执行a就等于执行apple函数。

执行例2的代码，结果是 1，与例1结果是一样的，我们看语句 a() ，说明apple函数是在fruits函数作用域之外的作用域执行的（这里就是全局window），却能正确的引用到n，这就是闭包的效果。

# 比较一下例1和例2 #

在例1中fruits()执行完以后，fruits整个内部作用域会被回收，因为引擎有垃圾回收器来释放不在使用的内存空间。

在例2中fruits()执行完以后，内部作用域会一直存在，因为apple本身在使用这个内部作用域，依然持有对该作用域的引用，所以不会被回收。

# 其实我们经常使用闭包 #

只是可能没有太注意而已，在我们写过的代码中肯定有很多闭包的身影，比如定时器、事件监听、ajax请求等很多使用了回调函数的地方，实际上就是在使用闭包，如下例：

例3

function sayHello(name){
    	setTimeout(function(){
    		console.log('hello '+name);
    	},1000)
    }
    sayHello('大帅哥');
    
    //延时1秒后输出结果：hello 大帅哥

#  循环中闭包的使用 #

for(var i=1;i<=10;i++){
    	setTimeout(function(){
    		console.log(i);
    	},i*1000)
    }

看到这个段代码，我们的预期是每秒一次，分别输出1-10，但实际上是每秒一次输出11，总共10次11，为什么？

因为setTimeout是延时函数，是会在循环结束以后再执行，循环结束后 i 的值是11，那么每次当然就输出11了。

在循环中的10个函数都对 i 进行了引用，并且他们都用的是同一个 i，比如第一次循环的时候 console.log(i) 此时对 i 的引用是1，但是的当第2次循环的时候i被修改为2了，那么第1次循环对i的引用也是指向这个i的自己也是2，以此类推终止循环终止的时候i是11，而setTimeout里面的回调函数是在循环终止后才执行，所以每次都会是11了。

# 下面稍作修改就可以达到我们想要的效果 #

第1种方式（副本的方式）：

for(var i=1;i<=10;i++){
    	(function(){
    		var j=i
    		setTimeout(function(){
    			console.log(j);
    		},j*1000);
    	})()
    }

就是将循环里面的函数用自执行函数包裹起来，形成自己的作用域，然后在此作用域里面用copy一个副本 j，用来存储 i 的值，这样就可以达到想要的效果：

![20201219205132782.png][]

第2种方式（传参的方式）:

for(var i=1;i<=10;i++){
    	(function(j){
    		setTimeout(function(){
    			console.log(j);
    		},j*1000);
    	})(i)
    }

将 i 做为实参传入自执行函数中，此时 i 的值会被形参 j 引用，在这个新的作用域里面封闭起来，被回调函数引用，执行代码的话也能得到同样的结果。

第3中方式(let):

for(let i=1;i<=10;i++){
    		setTimeout(function(){
    			console.log(i);
    		},i*1000);
    }

因为let在循环的头部，每次迭代都会声明，let有自己的块级作用域。

# 应用 #

执行结果：

![20201219210723771.png][]

可以看到当执行phone()函数，会返回一个对象，此对象对外暴露了两个引用 call和msg，这个对象我们可以看做是API，在内部作用域里面的定义自己想要的变量等将会对外封闭，只有暴露的才可以被使用；所以我们当然可以在phone里面再添加其他的变量和函数，然后通过暴露的方式来进行添加、修改、删除等，而且在实际工作做我们也会经常这么做。

# 欢迎指正！！ #

[20201219205132782.png]: /images/20210724/ad8e2df4b34243488631018a4f53db63.png
[20201219210723771.png]: /images/20210724/f402fecf6a2a43eca099882050718464.png