理解闭包

青旅半醒 2022-02-15 05:25 290阅读 0赞

## 一、闭包的概念 ##

很多书籍上都将嵌套函数中内部函数使用外部函数中定义的局部变量，返回内部函数实现对外部函数局部变量的使用作为闭包的定义，但实际上我们可以将嵌套函数中这种闭包的情况作为闭包的一种特殊情况。我们可以将闭包理解为是由函数和函数所声明的词法环境的结合。即一个函数引用了自由变量，且这个被引用的自由变量将和这个函数一同存在，即使是在该变量已经离开了创造它的环境时也不例外。从这一点上看，函数也可以看作是一个闭包。

## 二、闭包示例 ##

<!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<script> function foo(x){ var temp = 3; return function(y){ console.log(x+y+(++temp)) } } var bar = foo(2); bar(1); bar(2); bar(3); </script>
    </body>
    </html>

猜一下执行的结果？

看一下此时控制台的输出：  
![在这里插入图片描述][20190423205004410.jpg]  
我们加入三行代码来看下每次调用函数时每个变量的情况：

function foo(x){ 
    		var temp = 3;
    
    		return function(y){ 
    			console.log(x+y+(++temp))
    			console.log('x'+'='+x);
    			console.log('y'+'='+y);
    			console.log('temp'+'='+temp);
    		}
    	}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]  
可以看到，x作为外部函数传入的参数，一直没有发生变化；y是执行`var bar = foo(2)`调用foo方法接收到返回的匿名函数时传入给该内部匿名函数的参数，每次调用随着传入的值而发生改变；temp外部函数的一个局部变量，由于在内部函数中执行了`++temp`’，因此每次调用数值都会增加1。在这段代码中，`bar`指向了匿名函数，形成了一个闭包，该闭包是由：匿名函数function + 外部函数的变量x,temp共同构成的。因此，闭包实际上可以称为一个“闭包体”，因为它并不只是涉及到一个函数，还涉及到了它可以访问到的外部函数中的变量。

## 三、闭包的应用 ##

**1、可以使用匿名自执行函数模拟块级作用域**

由于JavaScript中只有全局作用域和局部作用域，因此为了能够方便的实现函数的调用，我们经常会将变量的声明赋给一个变量，但这样做容易污染全局变量，因此我们要尽量少的定义全局变量 。

func = function (){ 
    		console.log('Show me the code.')
    	};
    
    	func();

我们可以使用匿名自执行函数进行改写：

(function(){ 
    		console.log('Show me the code.');
    	})();

可以产生同样的效果，但是这段代码并没有传入参数，下面我们写一段传入参数的代码：

func = function (x,y){ 
    		sum = x + y;
    		console.log(sum)
    	};
    
    	func(3,5);

再用匿名自执行函数进行改写：

(function(x,y){ 
    		sum = x + y;
    		console.log(sum);
    	})(3,5);

发现效果是相同的，在这里使用匿名自执行函数实现了作用域的隔离（当然这不能算做真正意义上的闭包）。

**2、解决循环注册DOM事件的典型错误**

我们要实现一个“点击换行号”的功能，先来看一段代码：

<!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<h1>1</h1>
    	<h1>2</h1>
    	<h1>3</h1>
    	<h1>4</h1>
    	<h1>5</h1>
    </body>
    <script> var lis = document.querySelectorAll('li'); for(var i = 0; i < lis.length; i++){ lis[i].onclick=function(){ this.innerHTML=i; } } </script>
    </html>

看一下此时浏览器显示的效果：

![在这里插入图片描述][20190423211810978.gif]  
发现结果并不如我们预期，所有的行被点击时行号都成了5，问题出在哪里呢?

我们再来认真考虑下for循环这段代码：

for(var i = 0; i < lis.length; i++){ 
    		lis[i].onclick=function(){ //事件在被点击时触发
    			this.innerHTML=i;
    		}
    	}

事件执行的时机是在`h1`被点击后，而此时for循环早已执行完毕。而变量`i`是点击事件绑定的匿名函数的父函数(for循环)里的变量，并不是匿名函数的局部变量，因此每次for循环时值都被改变，for循环结束时`i`等于了5。

下面我们改写为匿名自执行函数解决这个问题：

for(var i = 0 ; i < lis.length; i++){ 
    		(function(i){ 
    			lis[i].onclick=function(){ 
    				this.innerHTML=i;
    			}
    		})(i)
    	}

看下此时浏览器中运行的效果：  
![在这里插入图片描述][20190423212817382.gif]  
发现已经可以正常显示，那使用匿名自执行函数为什么就可以避免上面的情况呢？这里非常重要的一点是：我们传给匿名函数的`i`变量是按值传递的，复制了变量值但不改变`i`的数值，因此保证了`i`不会发生改变。

**3、setTimeOut闭包的应用**

类似于上面的例子，我们希望一秒钟后输出从1到10的十个数字，先来看一段代码：

![在这里插入图片描述][20190423213503921.gif]  
发现输出的结果全部都是10，出现了与上面例子同样的问题，我们同样使用匿名自执行函数进行改写：

for(var i = 0; i < 10 ; i++){ 
    			(function(a){ 
    				setTimeout(function(){ 
    					document.write(a+'<br>');					
    				},1000);
    			})(i);
    		}

看下此时浏览器中运行的效果：

![在这里插入图片描述][20190423214051276.gif]  
这里需要注意的是：我们传入参数`i`时，接受参数的函数应该是外部的匿名函数，而不是内部绑定计时器事件的匿名函数，实际上这样做会导致输出`undefined`

for(var i = 0; i < 10 ; i++){
    			(function(a){
    				setTimeout(function(a){
    					document.write(a+'<br>');					
    				},1000);
    			})(i);
    		}

![在这里插入图片描述][20190423214359357.gif]  
外部和内部的匿名函数都写入形参`a`,内部匿名函数的形参`a`覆盖了外部传入的参数`a`，而内部匿名函数未定义`a`，因此为`undefined`

**4.闭包模拟私有变量**

JavaScript中没有Java中那样的私有变量的概念，但是我们可以用闭包进行模拟:

<!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<script> function Person() { var hobby = 'code'; this.getHobby = function () { return hobby; }; this.setHooby = function (newHobby) { hobby = newHobby; } } var per = new Person(); //不能使用p.hobby获取hobby属性，只能使用setHobby和getHobby方法 per.setHooby('read'); console.log(per.getHobby()); //read </script>
    </body>
    </html>

这里要注意：

也可以使用第二种方式模式私有变量：
    
    ```js
    function Person () { 
    			var hobby = 'code';
    
    			return { 
    				getHobby : function(){ 
    					return hobby;
    				},
    				setHooby : function(newHobby){ 
    					hobby = newHobby
    				}
    			}
    		}
    
    		var per = new Person();
    		per.setHooby('read');
    		console.log(per.getHobby());

## 四、闭包的缺点 ##

1.闭包会导致JavaScript执行效率下降，但由于Chrome浏览器的V8引擎已经对闭包做出了很多性能优化，因此这一点基本可以忽略。

2.闭包容易导致内存会驻留，如果是大量对象的闭包环境，要注意内存消耗的问题。

[20190423205004410.jpg]: /images/20220215/53656ff97e37479da3d1a0603d9227a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]: /images/20220215/7092c00ec2014b4db35a4500b765380e.png
[20190423211810978.gif]: /images/20220215/d181cd21758743b0acf492346e684a73.png
[20190423212817382.gif]: /images/20220215/e1d17bfa726f457db12d26b15b9fdc6f.png
[20190423213503921.gif]: /images/20220215/0236d81f31694c59bd54fca44e4ea327.png
[20190423214051276.gif]: /images/20220215/70fa34f5dc9a4d219112560d00ca0064.png
[20190423214359357.gif]: /images/20220215/9fb692444f21402cab32f1c15b37e28e.png