JavaScript 小记之闭包(Closures)

Closures are functions that refer to independent (free) variables.

闭包是以静态方式/词法方式进行存储所有父作用域的一个函数

在JavaScript高级程序设计里面通过一个 createComparisonFunction() 函数和这个函数的作用域链之间的关系图说得很明白为什么闭包可以访问外部函数的变量, 是因为闭包的作用域链不仅包括自己本地的活动对象, 还包括外部函数作用域链所指向的活动对象.

在JavaScript高级程序设计, JavaScript精粹都有一个类似的例子在循环里创建闭包.

(为了测试, 做了一点点修改)

 1 var fn = function() {
 2     var result = [];
 3     for(var i = 0; i < 3; i++) {
 4         result[i] = function() {
 5             console.log(i);
 6         };
 7     }
 8     return result;
 9 };
10
11 var list = fn();
12 list[0]();　　　//3
13 list[1]();　　　//314 list[2]();　　　//3

 1 var fn = function() {
 2     var result = [];
 3     for(var i = 0; i < 3; i++) {
 4         result[i] = (function(num) {
 5             return function() {
 6                 console.log(num);
 7             };
 8         })(i);
 9     }
10     return result;
11 };
12
13 var list = fn();
14 list[0]();　　　//0
15 list[1]();　　　//1
16 list[2]();　　　//2

当时为了让自己可以了解得更彻底自己也把作用域链画了出来希望对部分同学有用

第一个函数作用域关系图:

从第一个函数的作用域关系图可以看出之所以数组里的每个函数都打印3是因为每个函数在各自本地的活动对象里都找不到 i 所以继续往上找在外部函数的活动对象里找到了i 但是此时的i 在循环结束后值为3 所以每个函数打印均为3

第二个函数作用域关系图:

第二个函数把一个立即执行的函数赋给了result数组, 并传入了i 所以此时result[x]的活动对象里就多一个变量num 值为 i (函数参数按值传递) 所以返回的函数打印num时根据作用域链找到了result[x] 活动对象里的num 并打印出 num的值

通过画这两个函数的作用域链关系图, 就可以清楚地弄懂闭包的工作原理, 也就不会对闭包那么害怕啦!

PS. 上面两个例子在JSLint 里都是会报错的: Don’t make functions within a loop

所以大家在实际的程序当中就不要这样使用可以在循环外变量定义函数后再在循环里使用

最后附上 sublime-text 3 怎么安装SublimeLinter 的教程 http://www.sublimelinter.com/en/latest/installation.html

如有错误欢迎指正 : )

转载于:https://www.cnblogs.com/Lmovingon/p/4219568.html

JavaScript 小记之闭包(Closures)相关推荐

[译]Javascript中的闭包(closures)
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
JavaScript小记（持续更新）
注意:(2020.01.14) 后续将都在我的学习笔记文档 - JavaScript小记中进行更新,该文章不再更新,请持续关注上述网页学习js遇到的疑问和js基础都记录在这里,持续更新中. 2019 ...
让你分分钟学会Javascript中的闭包
Javascript中的闭包前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...
深入理解javascript原型和闭包（16）——完结
之前一共用15篇文章,把javascript的原型和闭包. 首先,javascript本来就"不容易学".不是说它有多难,而是学习它的人,往往都是在学会了其他语言之后,又学java ...
深入理解javascript原型和闭包（17）——补this
本文对<深入理解javascript原型和闭包(10)--this>一篇进行补充,原文链接:http://www.cnblogs.com/wangfupeng1988/p/3988422. ...
深入理解javascript原型和闭包（3）——prototype原型
既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(深入理解 ...
【进阶2-3期】JavaScript深入之闭包面试题解
(关注福利,关注本公众号回复[资料]领取优质前端视频,包括Vue.React.Node源码和实战.面试指导) 本周正式开始前端进阶的第二期,本周的主题是作用域闭包,今天是第8天. 本计划一共28期,每 ...
【javascript笔记】关于javascript中的闭包
最开始看<javascript高级程序设计>的时候就看到了javascript中的闭包,在第七章第二节....好大概知道了,过了段时间,好了又忘了... 我们来看这本书里面关于闭包是怎么描 ...
解析面试常问题之JavaScript中的闭包概念及应用，顺便普及一下大家口中常说的内存泄漏问题
JavaScript中的闭包是一个面试中经常被考到的问题,大家可能都对这个概念多多少少都有一些模糊的概念或者一点都不了解,那么今天就来给大家讲解一下. 公众号:前端印象不定时有送书活动,记得关注~ ...

JavaScript 小记之闭包(Closures)

JavaScript 小记之闭包(Closures)相关推荐

最新文章

热门文章

JavaScript 小记 之 闭包(Closures)

JavaScript 小记 之 闭包(Closures)相关推荐

最新文章

热门文章

JavaScript 小记之闭包(Closures)

JavaScript 小记之闭包(Closures)相关推荐