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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
JavaScript实现刮刮乐效果
Nov 01 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+xml编程之xpath的应用实例
2015/01/24 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
js压缩利器
2007/02/20 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
SVG实现时钟效果
2018/07/17 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
python绘制中国大陆人口热力图
2018/11/07 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
UNIX文件系统分类
2014/11/11 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
情人节活动总结范文
2015/02/05 职场文书
入党个人总结范文
2015/03/02 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫