理解js闭包10大使用场景，大厂面试官好自为之！

朴灿烈づ我的快乐病毒、 2021-09-04 08:25 195阅读 0赞

**目录**

闭包可以说无处不在，所以闭包的几个常用场景，很值得研究一番，如果对闭包还有疑问，可以翻看我之前 闭包 的文章。

1.返回值（最常用）

2.函数赋值

3.函数参数

5.循环赋值

6.getter和setter

7.迭代器（执行一次函数往下取一个值）

8.首次区分（相同的参数，函数不会重复执行）

9.缓存

10.节流函数

理解了闭包的使用场景，好自为之的就是面试官了，哈哈！

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

## 闭包可以说无处不在，所以闭包的几个常用场景，很值得研究一番，如果对闭包还有疑问，可以翻看我之前[ 闭包][Link 1]的文章。 ##

### 1.返回值（最常用） ###

//1.返回值 最常用的
    		function fn(){
    			var name="hello";
    			return function(){
    				return name;
    			}
    		}
    		var fnc = fn();
    		console.log(fnc())//hello

这个很好理解就是以闭包的形式将 name 返回。

### 2.函数赋值 ###

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

在闭包里面给fn2函数设置值，闭包的形式把name属性记忆下来，执行会输出 hello。

### 3.函数参数 ###

用闭包返回一个函数，把此函数作为另一个函数的参数，在另一个函数里面执行这个函数，最终输出 hello

4.IIFE（自执行函数）

直接在自执行函数里面将封装的函数fn1传给fn2，作为参数调用同样可以获得结果 hello

### 5.循环赋值 ###

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

如果不采用闭包的话，会有不一样的情况，可以看我自己 [闭包][Link 1] 的文章。

### 6.getter和setter ###

![20201224181105281.png][]  第一次输出 hello 用setter以后再输出 world ，这样做可以封装成公共方法，防止不想暴露的属性和函数暴露在外部。

### 7.迭代器（执行一次函数往下取一个值） ###

var arr =['aa','bb','cc'];
    		function incre(arr){
    			var i=0;
    			return function(){
    				//这个函数每次被执行都返回数组arr中 i下标对应的元素
    				 return arr[i++] || '数组值已经遍历完';
    			}
    		}
    		var next = incre(arr);
    		console.log(next());//aa
    		console.log(next());//bb
    		console.log(next());//cc
    		console.log(next());//数组值已经遍历完

### 8.首次区分（相同的参数，函数不会重复执行） ###

执行结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

可以明显的看到首次执行的会被存起来，再次执行直接取。

### 9.缓存 ###

//比如求和操作，如果没有缓存，每次调用都要重复计算，采用缓存已经执行过的去查找，查找到了就直接返回，不需要重新计算
    	 
    	 var fn=(function(){
    	 	var cache={};//缓存对象
    	 	var calc=function(arr){//计算函数
    	 		var sum=0;
    	 		//求和
    	 		for(var i=0;i<arr.length;i++){
    		 		sum+=arr[i];
    		 	}
    		 	return sum;
    	 	}
    	 	
    	 	return function(){
    	 		var args = Array.prototype.slice.call(arguments,0);//arguments转换成数组
    	 		var key=args.join(",");//将args用逗号连接成字符串
    		 	var result , tSum = cache[key];
    		 	if(tSum){//如果缓存有	
    		 		console.log('从缓存中取：',cache)//打印方便查看
    		 		result = tSum;
    		 	}else{
    		 		//重新计算，并存入缓存同时赋值给result
    			 	result = cache[key]=calc(args);
    			 	console.log('存入缓存：',cache)//打印方便查看
    		 	}
    		 	return result;
    	 	}
    	 })();
    	fn(1,2,3,4,5);
    	fn(1,2,3,4,5);
    	fn(1,2,3,4,5,6);
    	fn(1,2,3,4,5,8);
    	fn(1,2,3,4,5,6);

输出结果：

![20201224181618830.png][]

### 10.节流函数 ###

节流函数的作用是在限定的时间内函数只执行一次，比如：

1.按钮提交（可以避免重复提交，当然不只这种方法，将按钮设置为不可用也可以）。

2.scroll、mousehover、mousemove等触发频率高的时候。

主要的原理就是在闭包内设置一个标记，在限定的时间内这个flag设置为true，函数再次点击则不让执行，setTimeout函数执行以后将flag设置为flase，就可以继续执行 。

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <style>
            *{
            	margin:0;padding:0;
            }
            </style>
            </head>
            <body>
           		<div class="box" id="div_box" >
           			<button onclick="fn1()">test</button>
           		</div>
            </body>
            
    <script>
    //节流函数
    function throttle(fn,delay){
    	var flag=false;
    	var timer=null;
    	return function(){
    		var args=[].slice.call(arguments,0);//将参数转成数组
    		var context=this;
    		if(flag){//如果在限定的时间内 flag是true 则直接返回，不让执行
    			return;
    		}
    		flag=true; //函数正在控制中
    		//执行函数
    		fn.apply(context,args);
    		clearTimeout(timer);//清除定时器
    		timer =setTimeout(function(){
    			flag=false;//延时时间过了以后，放开函数控制
    		},delay)
    		
    	}	
    }
    function fn(){
    	console.log(123);
    }
    
    var fn1 = throttle(fn,2000);//绑定节流函数 
    
    
    </script>
    </html>

这里限定了按钮的点击时间，2000毫秒之内只有第一次会被执行，多次点击的话无效。

### 理解了闭包的使用场景，好自为之的就是面试官了，哈哈！ ###

[Link 1]: https://blog.csdn.net/dkm123456/article/details/111409295
[20201224181105281.png]: /images/20210724/0cba6918644641e8a28619351b989a61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/3ec8be2e97734e6ca0a1a05e0e59d21b.png
[20201224181618830.png]: /images/20210724/84f27a9eeb9541e689221fe657c1cbe2.png