闭包

闭包的作用:

闭包的本质是一个函数 闭包可以访问函数内部变量 闭包的存在会使内部变量保留在内存中 闭包的应用:

  1. 模仿块级作用域
  2. 存储变量(js GC原理,基于javascript中函数作用域链的特点,内部函数保留了对外部函数的活动变量的引用,所以变量不会被释放), 用于保存比较重要或者计算耗费很大的值。
  3. 封装私有变量(不直接访问变量)

在了解闭包的作用之前,我们先了解一下 Javascript 中的 GC 机制:

在 Javascript 中,如果一个对象不再被引用,那么这个对象就会被 GC 回收,否则这个对象一直会保存在内存中。

在下述例子中,B 定义在 A 中,因此 B 依赖于 A ,而外部变量 C 又引用了 B , 所以A间接的被 C 引用。

也就是说,A 不会被 GC 回收,会一直保存在内存中。: 例子:

function A() {var count = 0;function B() {count ++;console.log(count);}return B;
}
var C = A();
C();// 1
C();// 2
C();// 3
复制代码

() 等价于 (A())(),为了访问函数内部的函数,并且隐藏内部的函数信息得到需要的结果。 高级写法:匿名函数的写法

(function (s){...})(s)等价于function A(){
function B(s){
...
}
return B;
};
//相对于
function(s){...} === B === A();
B(s) === (function(s){...})(s)= (A())(s);
复制代码

这里很明显可以看到外面可以访问函数内部的变量,这是闭包的一个很重要的功能。

什么是闭包?所谓闭包就是利用函数的局部作用域的特性(函数内部的函数可以访问函数的变量,而内部函数里的变量函数无法访问)来实现外部函数通过闭包获取函数内部变量的一个过程,同时也不需要暴露内部的具体情况。而利用GC特性,我们通过闭包可以保存一些需要长时间保持的数据。

setTimeout

可能有人会说,切,setTimeout有啥可说啊~~~不好意思,可能本人见识短浅,setTimeout这里还是有几点可以说到说到。

在讲setTimeout之前,先看个经典的例子:

for(var i=0; i<=5; i++){setTimeout(function(){console.log(i);}, i*1000);
}
复制代码

大家应该都知道,由于js的运行机制setTimeout属于异步任务。setTimeout 会挂起微任务,由于var不存在块级作用域,所以最终的i都是同一个i,i === 5循环结束,i+1 === 6,然后打印。所以结果是6,6,6,6,6,6。 那么如何乖乖的让这个打印出0到5呢?目前我想到了三种情况:

  1. 闭包: 既然var没有块级作用域,那就用闭包模拟块级作用域。(实质是利用函数的局部作用域)
for(var i=0; i<=5; i++){(function(j){setTimeout(function(){console.log(j);}, i*1000);})(i)
}
复制代码
  1. let: let的块级作用域。
for(let i=0; i<=5; i++){setTimeout(function(){console.log(i);}, i*1000);
}
复制代码

3)setTimeout传参:可能有些人知道,可能有的人并不知道。

for(var i=0; i<=5; i++){setTimeout(function(j){console.log(j);}, i*1000, i);
}
复制代码

其实setTimeout内部同样是用到了闭包传参给回调函数,所以,我们可以使用setTimeout传参实现这个。

引申一下:

setTimeout是不是只能传一个参数,NO、NO、NO,肯定不是,用脚想想都不可能(考虑到实用性,通用性),那么怎么传?不买关子了,看例子:

 var i = 1;     setTimeout(function(j,k,l){console.log(j,k,l);}, i*1000, i,2*i, 3*i);
复制代码

打印结果:

我们可以大胆的猜测,setTimeout从第三个参数开始,可以传多个参数给回调函数。

不放心的话,可以去MDN里仔细的了解一下:developer.mozilla.org/zh-CN/docs/…

如果觉得这么一个的写传入的参数,或者是参数的个数不明确,该怎么传?此时es6里的扩展运算符...可以排上用途了:

 var i = 1;     setTimeout(function(...args){console.log(args[0],args[1], args[2]);}, i*1000, ...[i, 2*i, 3*i]);
复制代码

以上便是关于闭包与setTimeout的一点点总结,欢迎大家积极支持不对和不完整的地方。(轻点喷,谢谢啦!)

闭包与setTimeout相关推荐

  1. JavaScript基础系列---闭包及其应用

    闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...

  2. 在for循环中运行setTimeout

    先看一段代码 for (var i=0; i<10; i++) { setTimeout(console.log(i), i*1000 );} 答案:0.1.2.3.4.5.6.7.8.9 再比 ...

  3. 前端的常见的面试试题

    Javascript有哪些打开一个页面的方式? 1.超链接<a href="http://www.100sucai.com/" title="100素材网" ...

  4. 2021Web前端中高级面试题复盘

    一.HTML基础 1.常见浏览器的内核 (1)IE: trident 内核 (2)Firefox:gecko 内核 (3)Safari: webkit 内核 (4)Opera: 以前是 presto ...

  5. 前端WEB开发面试题整理

    2019独角兽企业重金招聘Python工程师标准>>> HTML部分 1 .Doctype 作用? 严格模式与混杂模式如何区分?它们有何意义? ( 1 ).声明位于文档中的最前面,处 ...

  6. 前端开发工程师面试题2

    前端开发工程师面试题2 1.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1). 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. ...

  7. 前端工程师自检清单(JavaScript基础)

    知识体系来源于一名[合格]前端工程师的自检清单 winter在他的<重学前端>课程中提到: 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没 ...

  8. 最新Web前端面试题-HTML-CSS-Javascript

    一.HTML基础 1.常见浏览器的内核 (1)IE: trident 内核 (2)Firefox:gecko 内核 (3)Safari: webkit 内核 (4)Opera: 以前是 presto ...

  9. 欢聚时代2017前端笔试C卷

    1.使用了"use strict"后,以下哪些描述错误 正确答案: A B C   "use strict"; var x = 17; with (obj) { ...

  10. for循环中的var和let的区别

    for (var i = 0; i < 3; i++) {setTimeout(function () {console.log(i) // 3s 后输出 3次3}, 30 * 100)cons ...

最新文章

  1. OpenGL编程轻松入门(四)
  2. 吴恩达团队:神经网络如何正确初始化?
  3. ecplise 安装subclipse
  4. [librosa]0.8版本后不再支持write_wav
  5. 获取mongodb数据变更_支持mysql、MongoDB数据变更订阅/监听分发
  6. jQuery 一些小技巧
  7. Ember Charts – 基于 Ember D3 的图表库
  8. 利用VBA在EXCLE2010和2007中找回2003式的经典菜单和工具栏
  9. junsansi 列表(4) - 三思笔记,ORACLE学习轨迹~~~~ - ITPUB个...
  10. python将数据保存为pdf
  11. 芝诺数解|「十一」千里姻缘一“线”牵—重庆网络婚恋分析报告
  12. IBC-身份标识密码技术
  13. Python Decorator的来龙
  14. 腾讯云上攻防战事(一)| 云上听风,不战而屈人之兵
  15. 快狐未能连接服务器,航海王强者之路好友福袋开启详细介绍_快狐快狐视频app...
  16. 深入产品线的配置管理
  17. UIWebView中添加活动指示器,来化解用户等待心理
  18. 前端面试查漏补缺--(二) 垃圾回收机制
  19. 《Sony Vegas Pro 12标准教程》——第1章 基础篇——基础知识 1.1 影视剪辑的概念...
  20. 经典残局html,微信欢乐斗地主3月残局1-100关全攻略 3月残局图文攻略大全

热门文章

  1. Atitit 收入理论大总结 4位一体 4象限理论 财政收入理论 6位一体
  2. atitit.错误:找不到或无法加载主类 的解决 v4 qa15.doc
  3. paip.提升性能---协程“微线程”的使用.
  4. paip.提升用户体验------c++ Qt5 实现程序图标以及动态托盘闪烁图标
  5. (转)比特币核心钱包(Bitcoin Core)入门使用教程
  6. 阿里巴巴集团 CTO 约你聊聊这些事
  7. 持续图片滚动字幕html,使用JavaScript实现连续滚动字幕效果的方法
  8. 【优化分类】基于matlab粒子群算法优化支持向量机分类(多输入多分类)【含Matlab源码 1559期】
  9. 【图像压缩】基于matlab小波变换图像压缩【含Matlab源码 879期】
  10. 【疾病分类】基于matlab SVM农作物叶子虫害识别与分类【含Matlab源码 624期】