JavaScript 闭包的使用场景


Posted in Javascript onSeptember 17, 2020

一、闭包

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部变量的函数。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

比如下面的代码:

function f1() {
 var n = 999;
 function f2() {
 console.log(n);
 }
 return f2;
}
var result = f1();
result();//999

函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。

这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,就可以在f1外部读取它的内部变量了。

二、闭包的使用场景

1.setTimeout

原生的setTimeout传递的第一个函数不能带参数,通过闭包可以实现传参效果。

function f1(a) {
 function f2() {
  console.log(a);
 }
 return f2;
}
var fun = f1(1);
setTimeout(fun,1000);//一秒之后打印出1

2.回调

定义行为,然后把它关联到某个用户事件上(点击或者按键)。代码通常会作为一个回调(事件触发时调用的函数)绑定到事件。

比如下面这段代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>测试</title>
</head>
<body>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-12">12</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-20">20</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-30">30</a>

 <script type="text/javascript">
  function changeSize(size){
   return function(){
    document.body.style.fontSize = size + 'px';
   };
  }

  var size12 = changeSize(12);
  var size14 = changeSize(20);
  var size16 = changeSize(30);

  document.getElementById('size-12').onclick = size12;
  document.getElementById('size-20').onclick = size14;
  document.getElementById('size-30').onclick = size16;

 </script>
</body>
</html>

当点击数字时,字体也会变成相应的大小。

3.函数防抖

在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

实现的关键就在于setTimeOut这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现。

如下代码所示:

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
function debounce(fn,delay){
 let timer = null //借助闭包
 return function() {
  if(timer){
   clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
   timer = setTimeOut(fn,delay) 
  }else{
   timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
  }
 }
}

4.封装私有变量

如下面代码:用js创建一个计数器

方法1:

function f1() {
 var sum = 0;
 var obj = {
  inc:function () {
   sum++;
   return sum;
  }
};
 return obj;
}
let result = f1();
console.log(result.inc());//1
console.log(result.inc());//2
console.log(result.inc());//3

在返回的对象中,实现了一个闭包,该闭包携带了局部变量x,并且,从外部代码根本无法访问到变量x。

方法2:

function f1() {
 var sum = 0;
 function f2() {
  sum++;
  return f2;
 }
 f2.valueOf = function () {
  return sum;
 };
 f2.toString = function () {
  return sum+'';
 };
 return f2;
}
//执行函数f1,返回的是函数f2
console.log(+f1());//0
console.log(+f1()())//1
console.log(+f1()()())//2

所有js数据类型都拥有valueOf和toString这两个方法,null除外
valueOf()方法:返回指定对象的原始值。
toString()方法:返回对象的字符串表示。
在数值运算中,优先调用了valueOf,字符串运算中,优先调用toString
sum+' '是一个字符串类型的数据

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

Javascript 相关文章推荐
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
js倒计时抢购实例
Dec 20 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 #Javascript
js实现简单的随机点名器
Sep 17 #Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 #Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 #Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 #Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 #Javascript
原生js+css实现tab切换功能
Sep 17 #Javascript
You might like
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
javascript中xml操作实现代码
2011/11/21 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
Python中的random()方法的使用介绍
2015/05/15 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
python的re正则表达式实例代码
2018/01/24 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
光盘行动倡议书
2014/02/02 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
求职信的正确写法
2014/07/10 职场文书
工程承包协议书
2014/10/20 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
贫困证明怎么写
2015/06/16 职场文书
2016高考寄语集锦
2015/12/04 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS