js的闭包

function a(){var n = 0;this.inc = function () {n++; console.log(n);};
}
var c = new a();
c.inc();    //控制台输出1
c.inc();    //控制台输出2

什么是闭包?这就是闭包!!有权访问另一个函数作用域内变量的函数都是闭包。当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。

这里 inc 函数访问了构造函数 a 里面的变量 n,所以形成了一个闭包。

function a(){var n = 0;function inc(){n++; console.log(n);}return inc;
}
var c = a();
c();    //控制台输出1
c();    //控制台输出2

执行过程:

var c=a();这里的a()返回的是函数inc,那这句等同于var c = inc;c()相当于inc();函数名只是一个标识(指向函数的指针),而()才是执行函数。

为什么要用闭包?

js的每个函数都是一个个小黑屋,它可以获取外界信息,但是外界却无法直接看到里面的内容。将变量 n 放进小黑屋里,除了 inc 函数之外,没有其他办法能接触到变量 n,而且在函数 a 外定义同名的变量 n 也是互不影响的,这就是所谓的增强“封装性”。而之所以要用 return 返回函数标识 inc,是因为在 a 函数外部无法直接调用 inc 函数,所以 return inc 与外部联系起来,第一个代码中的 this 也是将 inc 与外部联系起来而已。

常见的陷阱

function createFunctions(){var result = new Array();for (var i=0; i < 10; i++){result[i] = function(){return i;};}return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){console.log(funcs[i]());
}

原本想要输出0~9,但是最后的结果是10个10,为什么呢?

这里的陷阱就是:函数带()才是执行函数! 单纯的一句 var f = function() { alert('Hi'); }; 是不会弹窗的,后面接一句 f(); 才会执行函数内部的代码。上面代码翻译一下就是:

var result = new Array(), i;
result[0] = function(){ return i; }; //没执行函数,函数内部不变,不能将函数内的i替换!
result[1] = function(){ return i; }; //没执行函数,函数内部不变,不能将函数内的i替换!
...
result[9] = function(){ return i; }; //没执行函数,函数内部不变,不能将函数内的i替换!
i = 10;
funcs = result;
result = null;console.log(i); // funcs[0]()就是执行 return i 语句,就是返回10
console.log(i); // funcs[1]()就是执行 return i 语句,就是返回10
...
console.log(i); // funcs[9]()就是执行 return i 语句,就是返回10

为什么只垃圾回收了 result,但却不收了 i 呢? 因为 i 还在被 function 引用着啊。这就是闭包的神奇之处,内部作用域依然存在,因此没有被回收。result依然持有对该作用域的引用,这个引用就叫做闭包!

更改方法:

function createFunctions(){var result = new Array();for (var i=0; i < 10; i++){result[i] = function(x){return function(){return x;}}(i);}return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){console.log(funcs[i]());
}

没有直接把闭包赋值给数组,而是定义了一个匿名函数,并通过立即执行该匿名函数的结果赋值给数组,并带了for循环的参数i进去,让x能找到传入的参数值为0-10,这就解释了函数参数是按值传递的,所以会将变量i的当前值复制给参数x。而这个匿名函数内部又创建并返回了一个访问x的闭包。这样以来result数组中的每个函数都有自己x变量的一个副本,所以会符合我们的预期输出不同的值。

闭包的应用场景

闭包应用的两种情况:函数作为返回值,函数作为参数传递

1、函数作为返回值

function fn(){var max=10;return function bar(x){if (x>max){console.log(x);}};  
}
var f1=fn();
f1(15);

bar函数作为返回值,赋值给f1变量。执行f1(15)时,用到了fn作用域下的max变量的值。

2、函数作为参数被传递

var max = 10;
var fn=function(x){if(x>max){console.log(x);}
};
(function(f){var max = 100;f(15);
})(fn);

fn函数作为一个参数被传递进入另一个函数,赋值给f参数。执行f(15)时,max变量的取值是10,而不是100,因为要去创建这个函数的作用域取值,而不是“父作用域”。

当一个函数被调用完成之后,其执行上下文环境将被销毁,其中的变量也会被同时销毁。但有些情况下,函数调用完成之后,其执行上下文环境不会接着被销毁。这就是需要理解闭包的核心内容。如下:

第一步,代码执行前生成全局上下文环境,并在执行时对其中的变量进行赋值。此时全局上下文环境是活动状态。

 

第二步,执行第17行代码时,调用fn(),产生fn()执行上下文环境,压栈,并设置为活动状态。

第三步,执行完第17行,fn()调用完成。按理说应该销毁掉fn()的执行上下文环境,但是这里不能这么做。注意,重点来了:因为执行fn()时,返回的是一个函数。函数的特别之处在于可以创建一个独立的作用域。而正巧合的是,返回的这个函数体中,还有一个自由变量max要引用fn作用域下的fn()上下文环境中的max。因此,这个max不能被销毁,销毁了之后bar函数中的max就找不到值了。

因此,这里的fn()上下文环境不能被销毁,还依然存在与执行上下文栈中。——即,执行到第18行时,全局上下文环境将变为活动状态,但是fn()上下文环境依然会在执行上下文栈中。另外,执行完第18行,全局上下文环境中的max被赋值为100。如下图:

第四步,执行到第20行,执行f1(15),即执行bar(15),创建bar(15)上下文环境,并将其设置为活动状态。

执行bar(15)时,max是自由变量,需要向创建bar函数的作用域中查找,找到了max的值为10。这个过程在作用域链一节已经讲过。

这里的重点就在于,创建bar函数是在执行fn()时创建的。fn()早就执行结束了,但是fn()执行上下文环境还存在与栈中,因此bar(15)时,max可以查找到。如果fn()上下文环境销毁了,那么max就找不到了。

这里明显可以看到,使用闭包会增加内容开销!

第五步,执行完20行就是上下文环境的销毁过程。

总结

闭包就是一个函数引用另外一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。这是优点也是缺点,不必要的闭包只会徒增内存消耗!另外使用闭包也要注意变量的值是否符合你的要求,因为他就像一个静态私有变量一样。

转载于:https://www.cnblogs.com/lmjZone/p/9400300.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368001.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

远程管理口怎么看地址_红烧羊肉怎么样做才能滋味浓郁,咸甜适口,且回味有奶香?看这里...

原汁原味红烧羊肉此菜在制作上不同于其他红烧羊肉时要放入香料去膻&#xff0c;但在选料上很讲究&#xff0c;也就是说食材的好坏决定菜的好坏。选用一年生的崇明母山羊制作&#xff0c;膻味很小&#xff0c;肉质软嫩细腻&#xff0c;且带有一股淡淡奶香&#xff0c;因此不必放…

css段落文字(中英文混杂)实现两端对齐

案例如下&#xff1a; 混合使用汉字和英文的段落默认如下&#xff1a; 两边是不对齐的(一般情况下&#xff0c;我们对这种情况不做处理&#xff0c;除非需求或者设计非要我们实现两端对齐)。 对齐之后如下&#xff1a; 实现思路 一般的两端对齐是使用text-align:justify&…

44集合:蒜头军学英语

转载于:https://www.cnblogs.com/passion-sky/p/8424769.html

android病毒下载地址,LINE病毒查杀

LINE病毒查杀是免费通话、免费传讯「LINE」的周边应用程序之一。它能保护智能手机上个人信息的安全&#xff0c;使其免于病毒或恶意程序的侵害。您只要执行几个简单的步骤就能确认手机状态或完成病毒扫描。LINE病毒查杀界面LINE病毒查杀软件功能1、智能手机上的病毒将无所遁形!…

android app的签名,Android APP的签名

Android APP的签名Android项目以它的包名作为唯一的标识&#xff0c;如果在同一部手机上安装两个包名相同的APP&#xff0c;后者就会覆盖前面安装的应用。为了避免Android APP被随意覆盖&#xff0c;Android要求对APP进行签名。下面介绍对APP进行签名的步骤1、选择builder菜单下…

5.6.50 mysql 用什么驱动_日均5亿查询量的京东订单中心,为什么舍弃MySQL用ES?

京东到家订单中心系统业务中&#xff0c;无论是外部商家的订单生产&#xff0c;或是内部上下游系统的依赖&#xff0c;订单查询的调用量都非常大&#xff0c;造成了订单数据读多写少的情况。我们把订单数据存储在MySQL中&#xff0c;但显然只通过DB来支撑大量的查询是不可取的。…

可搜索的文件? 是的你可以。 选择AsciiDoc的另一个原因

Elasticsearch是一个基于Apache Lucene的灵活&#xff0c;功能强大的开源&#xff0c;分布式实时云搜索和分析引擎&#xff0c;可提供全文搜索功能。 它是面向文档且无架构的。 Asciidoctor是一个纯Ruby处理器&#xff0c;用于将AsciiDoc源文件和字符串转换为HTML 5 &#xff…

Jquery 获取table当前行内容

$("a[namecheckOriginal]").click(function () { var parent $(this).parent().parent().find("td"); var moduleEnum parent.eq(7).text(); if(moduleEnum""){ } alert(moduleEnmu);}); 转载于:https://www.cnblogs.com/austi…

监视和检测Java应用程序中的内存泄漏

因此&#xff0c;您的应用程序内存不足&#xff0c;您日夜不停地分析应用程序&#xff0c;以期捕获对象中的内存漏洞。 后续步骤将说明如何监视和检测您的内存泄漏&#xff0c;以确保您的应用程序安全。 1.怀疑内存泄漏 如果您怀疑有内存泄漏&#xff0c;可以使用一种方便的方…

点a链接写邮件小技巧

无意间发现这个技巧&#xff0c;分享一下&#xff01; 当点击mailto的邮件链接的时候&#xff0c;需要填写标题和内容&#xff0c;如果你想规定一个邮件标题格式&#xff0c;那这个可以帮助你。 代码&#xff1a; <a href"mailto:haozidaqianduan.com?subject投稿&a…

javascript 分时函数 分批次添加DOM节点 timeChunk

创建1000个webqq的qq好友列表, 一个好友用一个节点来表示 * timeChunk var timeChunk function(a, fn, sz, done) {var obj, t, len a.length;var start function() {for (var i 0; i < Math.min(sz || 1, a.length); i) {var obj a.shift();fn.call(this, obj);}}retu…

uvm 形式验证_这究竟属于下一代验证的方法、语言还是工具?||路科验证

来源&#xff1a;内容由 公众号 路科验证 &#xff08;ID&#xff1a;Rocker-IC&#xff09;编辑部 原创&#xff0c;谢谢&#xff01;首先声明&#xff0c;便携式激励标准(PortableStimulus Standard, PSS)不是一种方法论&#xff0c;而是一种语言。使用语言我们可以有序地传递…

redis 版的 hello world

为 redis 添加一个命令&#xff0c;效果如下图&#xff1a; 在 Server.h 中加入命令处理函数的声明&#xff1a; void meCommand(client *c); 在 Server.c 的命令表中加入&#xff1a; struct redisCommand redisCommandTable[] {{"me",meCommand,1,"rF",…

unity中单位是米还是厘米_401场地清理是什么,由施工单位做还是甲方做?造价中如何体现?...

场地清理是对公路用地范围及借土场范围内施工场地的清理、拆除和挖掘&#xff0c;以及必要的平整场地等有关作业。一、工作内容根据路基工程项目分表可以看出场地清理主要包括三方面内容&#xff1a;1、清理与拆除(1)清除表土路基范围内的树根、腐殖土、草皮或地表土不符合路基…

华为鸿蒙系统是否上线,华为官方:鸿蒙系统2.0上线,手机能否搭载鸿蒙操作系统?...

原标题&#xff1a;华为官方&#xff1a;鸿蒙系统2.0上线&#xff0c;手机能否搭载鸿蒙操作系统&#xff1f;华为官宣鸿蒙已经过去有一年多的时间了。近日有消息称&#xff0c;在今年九月份华为即将举办开发者大会&#xff0c;届时正式发布鸿蒙2.0操作系统&#xff0c;相比之前…

图解 继电器模组接线图_交流接触器,继电器的知识你了解多少?(值得收藏)...

↑↑↑↑↑领取福利的小伙伴&#xff0c;先点击上方关注我们哦(文章字体较小&#xff0c;请点击放大后查看)交流接触器(Alternating Current Contactor)广泛用作电力的开断和控制电路。型号与参数交流接触器的型号很多&#xff0c; CJ0、CJ10系列交流接触器较为常用&#xff0c…

折线图表android,Android 折线图表MPAndroidChart的实现

昨日夜观天象&#xff0c;今日忽见北斗星陨落&#xff0c;《Android 折线图表》应运而生。single.pngmany.png一.本篇采用MPAndroidChart&#xff0c;大体实现步骤可分为两步&#xff1a;1.配置基本属性(包括X,Y轴)2.设置折线数据并添加复制代码二. 第一步&#xff0c;配置基本…

我最喜欢的Java高级开发人员书籍

我上一篇博客文章 &#xff08;我对高级Java开发人员的十个最喜欢的在线资源&#xff09;的想法是由Xiaoran Wang发表的针对高级Java开发人员的十大网站的启发。 Wang还写了一篇名为《面向Java高级开发人员的十大书籍》的文章。 正如关于高级Java开发人员的最佳网站上的帖子一样…

pyplot绘制图片_matplotlib系列之pyplot

pyplot对象包含了一系列用于绘图的函数&#xff0c;使得它工作起来就像MATLIB一样。它的功能例如&#xff1a;创建一个figure对象绘制一片绘图区域在区域中绘制线条或者点也可以绘制labels使用pyplot对象快速的生成一幅图片import matplotlib.pyplot as pltplt.subplot(121)plt…

字符串-----KMP竟然是18禁

今天学了一下午字符串&#xff0c;讲到结束也没讲KMP。有人问老师为什么不讲&#xff0c;老师来一句&#xff1a;字符串noip不考&#xff0c;而且还是18禁&#xff0c;自然不讲。【手动滑稽】 所以我也不讲。【微笑】 1.表达式树 表示35*8 最后计算的符号是根节点&#xff0c;是…