JavaScript 闭包

闭包概念:

当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作用域链不释放,造成内存泄漏。

 

什么时候才会触发闭包呢?

当两个函数互相嵌套,把里面的函数被保存到了外部(全局),里面的函数在外面执行的时候,一定能够调用里面的变量。

 

看下面这个例子:

a函数里面包含b函数,执行a的时候,返回了b函数,赋值给了外部变量demo,通过作用域及上下文的学习可理解到,因为a和b是引用关系,虽然a执行完后销毁了自己的AO,但是被b保留下来了,并将引用地址保留到了外部的变量。

上面的函数,可以用图解来说明其作用域及执行上下文关系:

a被定义和执行的状态图,如下图

b被定义的状态如下图

a执行完就释放了自己的AO,但是b还引用了a的AO,并保留到了外部(全局),如下图

闭包的作用:

  • 实现公有变量  eg:函数累加器
  • 可以做缓存(存储结构)  eg:eater
  • 可以实现封装,属性私有化。eg:Person()
  • 模块化开发,防止污染全局变量

看一个例子:

1-为什么返回的函数数组结果是 10 ?

理解核心:返回的是函数数组,数组中的每个元素都形成一个闭包(并共用同一个闭包),所以,当外部执行这个闭包时,预编译里的AO对象,它的 i 因for循环,最后值已经变为了 10。

2-这是不好的闭包例子,因为它输出了10个 10,怎么改成一个好的闭包,让它循环输出对应的0123456789;

//问题1-为什么输出 10 ?function test() {var arr = [];for (var i = 0; i < 10; i ++) {arr[i] = function () {document.write(i)}}return arr;}
//问题2-这是不好的闭包例子,因为它输出了10个 10,怎么改成一个好的闭包,让它循环输出对应的0123456789;var myArr = test();for(var j = 0; j < 10; j++){myArr[j]();}
------------------------------------------------------------------------------------
//修改后function test() {var arr = [];for (var i = 0; i < 10; i ++) {//下面是一个立即执行函数,j为形参,接收循环的每一个i,独立保存到了外部(function (j) {arr[j] = function () {document.write(j)}}(i))}return arr;}var myArr = test();for(var j = 0; j < 10; j++){myArr[j]();}

可以实现封装,属性私有化,如下代码

function Deng(name, wife) {var prepareWife = "xiaozhang";   this.name = name;this.wife = wife;this.devorce = function () {this.wife = prepareWife;}this.changePrepareWife = function (target) {prepareWife = target;}this.sayPreparewife = function () {console.log(prepareWife);}
}//创建邓哥这个角色,原配老婆叫xiaoliu
//当创建出来的时候,还带了三个闭包,三对一的闭包:devorce changePrepareWife sayPreparewife 
//怎么理解呢?
//这几个闭包是外人看不见的,只有邓哥自己知道,是邓哥的私有数据var deng = new Deng('deng', 'xiaoliu');//直接打印deng.prepareWife 是没有这个属性的
//只有他执行了changePrepareWife (改变了预备人选)再sayPreparewife (说出来),才知道他有其它妻子人选 

 

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

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

相关文章

[css] 如何隐藏没有静音、自动播放的音视频?

[css] 如何隐藏没有静音、自动播放的音视频&#xff1f; 浏览器已禁止打开页面时自动播放&#xff0c;可以用iframe先播触发播放权限&#xff0c;然后再播放 做一个opacity:0 的假隐藏个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但…

PyAutoIt 安装(Windows 版)

转载于:https://www.cnblogs.com/Crixus3714/p/9592635.html

[css] 你有使用过css的writing-mode属性吗?说说它有哪些应用场景?

[css] 你有使用过css的writing-mode属性吗&#xff1f;说说它有哪些应用场景&#xff1f; 用于规定文字的书写方式 horizontal-tb 从左到右从上到下(水平书写) vertical-rl 从上到下从右到左 (垂直书写) vertiacl-lr 从上到下从左到右 sideways-rl&#xff1a;内容垂直方向从上…

文案资源

策划与营销类网站 全球顶尖创意分享平台 OPEN YOUR MIND 数英网-数字媒体及职业招聘网站 SocialBeta | 领先的社交媒体和数字营销内容与招聘平台 梅花网&#xff0d;营销者的信息中心 视觉素材类网站 花瓣网_发现、采集你喜欢的一切 昵图网_原创素材共享平台www.nipic.co…

scp命令:服务器间远程复制代码

scp是secure copy的简写&#xff0c;用于在Linux下进行远程拷贝文件的命令&#xff0c;和它类似的命令有cp&#xff0c;不过cp只是在本机进行拷贝不能跨服务器&#xff0c;而且scp传输是加密的。可能会稍微影响一下速度。当你服务器硬盘变为只读 read only system时&#xff0c…

[css] 怎么使用css选择空链接?

[css] 怎么使用css选择空链接&#xff1f; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style type"text/css">a[href], a:not(href) {color: #ff3333;}<…

构造函数内部原理 包装类

构造函数内部原理 在函数体最前面隐式得加上this {}执行 this.xxx xxx;隐式的返回this 包装类 定义一个原始数字或字符串&#xff0c;在JS里面&#xff0c;其实有两种方法 var num 123; var str abcd;var num new number(123); var str new string(abcd); 但是这两…

[css] 说说你对table-layout的理解,它有什么运用场景?

[css] 说说你对table-layout的理解&#xff0c;它有什么运用场景&#xff1f; table-layout 值为 fixed时单元格的宽度只与表格&#xff0c;单元格的宽度有关&#xff0c;与内容无关 table-layout 值为 auto 时&#xff0c;单元格的宽度为当前列的最长行有的宽度来计算 如果想…

Centos7安装部署Zabbix3.4

1.关闭selinux和firewall 1.1检测selinux是否关闭 [rootlocalhost ~]# getenforce Disabled #Disabled 为关闭 1.1.1临时关闭[rootlocalhost ~]# setenforce 0 #设置SELinux 成为enforcing模式1.1.2永久关闭 [rootlocalhost ~]# vi /etc…

[css] 颜色hsla的字母分别表示什么?

[css] 颜色hsla的字母分别表示什么&#xff1f; H&#xff1a;Hue(色调)。0(或360)表示红色&#xff0c;120表示绿色&#xff0c;240表示蓝色&#xff0c;也可取其他数值来指定颜色。取值为&#xff1a;0 - 360 S&#xff1a;Saturation(饱和度)。取值为&#xff1a;0.0% - 10…

JavaScript中的回调函数(callback)

前言 callback&#xff0c;大家都知道是回调函数的意思。如果让你举些callback的例子&#xff0c;我相信你可以举出一堆。但callback的概念你知道吗&#xff1f;你自己在实际应用中能不能合理利用回调实现功能&#xff1f; 我们在平时的学习中容易犯不去深究的病&#xff0c;功…

javascript构造函数类和原型prototype定义的属性和方法的区别

1、把方法写在原型中比写在构造函数中消耗的内存更小&#xff0c;因为在内存中一个类的原型只有一个&#xff0c;写在原型中的行为可以被所有实例共享&#xff0c; 实例化的时候并不会在实例的内存中再复制一份 而写在类中的方法&#xff0c;实例化的时候会在每个实例中再复制一…

[css] 如何禁用移动的选择高亮?

[css] 如何禁用移动的选择高亮&#xff1f; *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-sele…

原型 原型链 call / apply

原型定义&#xff1a; 原型是function对象的一个属性&#xff0c;它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象&#xff0c;可以继承原型的属性和方法。原型也是对象。 利用原型特点和概念&#xff0c;可以提取共有属性。对象如何查看原型 ——> 隐…

Open-Falcon 监控系统监控 MySQL/Redis/MongoDB 状态监控

背景&#xff1a; Open-Falcon 是小米运维部开源的一款互联网企业级监控系统解决方案&#xff0c;具体的安装和使用说明请见官网&#xff1a;http://open-falcon.org/&#xff0c;是一款比较全的监控。而且提供各种API&#xff0c;只需要把数据按照规定给出就能出图&#xff0c…

[css] 使用css实现悬浮提示文本

[css] 使用css实现悬浮提示文本 <div class"tips-demo" data-tips"提示文本">演示文本</div><style> .tips-demo {position: fixed;bottom: 15px;right: 15px; }.tips-demo:after {content: attr(data-tips);position: absolute;top: 0…

JavaScript之继承模式,命名空间,对象枚举

继承发展史 1-传统形式 → 原型链 过多的继承了没用的属性&#xff08;很好理解&#xff0c;不用代码演示了&#xff09; 2-借用构造函数 不能继承借用构造函数的原型&#xff08;很好理解&#xff0c;不用代码演示了&#xff09;每次构造函数都要夺走一个函数&#xff08;很…

delphi dxBarManager 的dxBarEdit 输入问题

Developer Express 6 想做像office2007那样界面.问题:dxBarManager1 里面添加了cxBarEditItem1 这是个文本框,运行可以输入内容,但是当焦点失去时,刚刚输入的内容没了.只能每次输完内容后一定要按回车才能保存内容.这里面所有能改变值的控件都是这样子的,有没有什么办法可以在控…

[css] 怎么设置可点击的元素上强制手型?

[css] 怎么设置可点击的元素上强制手型&#xff1f; cursor 属性个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

什么是KYC,KYC认证的重要性

KYC&#xff0c;是英语Know Your Customer的简称&#xff0c;这段词汇用翻译直接生硬的翻译过来意思是&#xff1a;了解你的客户。词义翻译的非常的直接。不过却缺乏一些诗意。我们在万能的度娘上键入KYC得到的解释是&#xff1a;是金融机构、银行、交易所等企业必须进行的一项…