js闭包的9个使用场景


Posted in Javascript onDecember 29, 2020

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

执行结果如下:

js闭包的9个使用场景

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

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

输出结果:

js闭包的9个使用场景

以上就是js闭包的9个使用场景的详细内容,更多关于js 闭包使用场景的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 #Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 #Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 #Vue.js
vue实现简易的双向数据绑定
Dec 29 #Vue.js
elementui实现预览图片组件二次封装
Dec 29 #Javascript
利用node.js开发cli的完整步骤
Dec 29 #Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 #Javascript
You might like
php Try Catch异常测试
2009/03/01 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP如何将XML转成数组
2016/04/04 PHP
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
zTree节点文字过多的处理方法
2017/11/24 Javascript
js实现开关灯效果
2020/03/30 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
用python 制作图片转pdf工具
2015/01/30 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
linux面试题参考答案(9)
2016/01/29 面试题
什么是servlet链?
2014/07/13 面试题
团委书记的竞聘演讲稿
2014/04/24 职场文书
机电专业求职信
2014/06/14 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
民事调解书范文
2015/05/20 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫