JS闭包的9大经典使用场景

痛定思痛。 2022-10-09 12:26 157阅读 0赞

# 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.函数参数 #

function fn(){ 
    	    var name="hello";
    	    return function callback(){ 
    	        return name;
    	    }
    	}
    	var fn1 = fn()//执行函数将返回值（callback函数）赋值给fn1，
    	 
    	function fn2(f){ 
    	    //将函数作为参数传入
    	    console.log(f());//执行函数，并输出
    	}
    	fn2(fn1)//执行输出fn2

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

# 4.IIFE（自执行函数） #

(function(){ 
    	    var name="hello";
    	    var fn1= function(){ 
    	        return name;
    	    }
    	    //直接在自执行函数里面调用fn2，将fn1作为参数传入
    	    fn2(fn1);
    	})()
    	function fn2(f){ 
    	    //将函数作为参数传入
    	    console.log(f());//执行函数，并输出
    	}

直接在自执行函数里面将封装的函数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作为实参传入
    	}

如果不采用闭包的话，会有不一样的情况。

# 6.getter和setter #

function fn(){ 
    	    var name='hello'
    	    setName=function(n){ 
    	        name = n;
    	    }
    	    getName=function(){ 
    	        return name;
    	    }
    	
    	    //将setName，getName作为对象的属性返回
    	    return { 
    	        setName:setName,
    	        getName:getName
    	    }
    	}
    	var fn1 = fn();//返回对象，属性setName和getName是两个函数
    	console.log(fn1.getName());//getter
    	fn1.setName('world');//setter修改闭包里面的name
    	console.log(fn1.getName());//getter

第一次输出 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.首次区分（相同的参数，函数不会重复执行） #

var fn = (function(){ 
    	 var arr=[];//用来缓存的数组
    	 return function(val){ 
    	     if(arr.indexOf(val)==-1){ //缓存中没有则表示需要执行
    	         arr.push(val);//将参数push到缓存数组中
    	         console.log('函数被执行了',arr);
    	         //这里写想要执行的函数
    	     }else{ 
    	         console.log('此次函数不需要执行');
    	     }
    	     console.log('函数调用完打印一下，方便查看已缓存的数组：',arr);
    	 }
    	})();
    	
    	fn(10);
    	fn(10);
    	fn(1000);
    	fn(200);
    	fn(1000);

执行结果如下：  
     ![在这里插入图片描述][20210624201928920.jpg]

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

# 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);

输出结果：  
      ![在这里插入图片描述][20210624201657408.jpg]

[20210624201928920.jpg]: /images/20221005/0545501ec2c64d55a16bbb04d44456a3.png
[20210624201657408.jpg]: /images/20221005/0b20f214e9744f0381c0d07278e2042b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关经典js闭包题

下面是自己积累的几道经典JS闭包题每一道都很有代表性，可能有的题解释的不到位，大家可以参考着结果先自己想一想，如果能够把这几道闭包题搞清楚，那么你在函数闭包上的成长一

- 日理万妓/ 2023年06月29日 02:20/ 0 赞/ 143 阅读

相关 JS 闭包经典使用场景和含闭包必刷题

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群 ![ff25f2a7ad39af188ab04417b1e0b39a.png][] 来

ゝ一纸荒年。/ 2023年01月21日 07:21/ 0 赞/ 23 阅读

相关闭包的使用场景，使用闭包需要注意什么

![4512b55b102b72ff4d6ca1c563a11653.png][] 闭包什么是闭包闭包很简单，就是能够访问另一个函数作用域变量的函数，更简单的

以你之姓@/ 2022年11月17日 10:23/ 0 赞/ 311 阅读

相关理解JavaScript闭包9大使用场景

![format_png][] 来源 | http://www.fly63.com/article/detial/9974?type=2 1、返回值（

曾经终败给现在/ 2022年10月27日 01:44/ 0 赞/ 161 阅读

相关 js闭包经典问题的理解

文章目录 JS闭包的作用错误示例引用和复制举例说明作用域闭包 -------------------- JS闭包

迷南。/ 2022年10月19日 15:59/ 0 赞/ 267 阅读

相关 JS闭包的9大经典使用场景

1.返回值（最常用） //1.返回值最常用的 function fn(){ var name="hello";

痛定思痛。/ 2022年10月09日 12:26/ 0 赞/ 158 阅读

相关【JS】997- 深入理解 JS 闭包的 9 大使用场景

![ca0544a5e7dba78bae40ed0884bf8a10.png][] 本文链接：http://www.fly63.com/article/deti

迷南。/ 2022年10月09日 04:56/ 0 赞/ 159 阅读

相关 JS闭包的9大经典使用场景

![f9b5dbf906b340dd8d6955d96842f0c3.png][] 作者：fly63 http://www.fly63.com/article/det

你的名字/ 2022年10月06日 15:59/ 0 赞/ 204 阅读

相关深入理解js闭包的9大使用场景

本文链接：http://www.fly63.com/article/detial/9974 作者：fly63 1.返回值（最常用）

╰半橙微兮°/ 2022年10月06日 12:59/ 0 赞/ 148 阅读

相关 js经典闭包题

面试官：会闭包么？ you：木问题！！！面试官：那么做做下面的题吧？ you：。。。（一脸懵逼中...） //经典闭包 functio

妖狐艹你老母/ 2021年09月18日 02:42/ 0 赞/ 460 阅读