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,一经查实,立即删除!

相关文章

PyAutoIt 安装(Windows 版)

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

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

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

JavaScript中的回调函数(callback)

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

原型 原型链 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…

最详细的后缀数组

写在前面&#xff1a; 多余的我就不提了&#xff0c;只是觉得网上的博客吧流程&#xff0c;每个数组存的是下标还是值&#xff0c;都讲的不是很清楚&#xff08;让我这种蒟蒻很是困扰&#xff09; 相信到现在这种水平的都可以知道什么是倍增&#xff0c;为什么能倍增都比较清楚…

HTML5 Web 存储(localStorage和sessionStorage)

localStorage生命周期是永久&#xff0c;除非主动清除localStorage信息&#xff0c;否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端&#xff08;即浏览器&#xff09;中保存&#xff0c;不参与和服务器的通信。 // 1、保存数据到本地// 第一个参数是保存的…

面向对象之反射、包装、(定制)

什么是反射&#xff1f; 反射的概念是由Smith在1982年首次提出的&#xff0c;主要是指程序可以访问、检测和修改它本身状态或行为的一种能力&#xff08;自省&#xff09;&#xff0c; 这一概念的提出很快引发了计算机科学领域关于应用反射的研究。它首次被程序语言的设计领域所…

Error: Cannot find module 'webpack-cli'--解决方案

npm install webpack-cli -g 全局安装解决 今日赠语&#xff1a; 哈佛大学研究心理学表示&#xff1a; 1、床乱糟糟的人&#xff0c;比穿整洁的人&#xff0c;创造力平均要高出50% 2、经常迟到的人&#xff0c;比不迟到的人&#xff0c;幽默感平均要高出70% 3、饭量大的人&…

分享菜单效果

分享菜单效果&#xff1a; 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <title>分享菜单</title>6 <style>7 #div1{width: 100px; height: …

vue axios解决post传参数问题

我相信遇到这个问题的兄弟们&#xff0c;不带参数的情况下都是没有问题吧&#xff0c; 如果有问题&#xff0c;百度吧&#xff0c;好解决&#xff0c;答案都比较靠谱 这里主要针对带参数的情况&#xff0c;坑多 另外&#xff0c;我默认你用postman带参测试接口是没问题的 不…

Spring Boot实践——基础和常用配置

借鉴&#xff1a;https://blog.csdn.net/j903829182/article/details/74906948 一、Spring Boot 启动注解说明 SpringBootApplication开启了Spring的组件扫描和Spring Boot的自动配置功能。实际上&#xff0c; SpringBootApplication将三个有用的注解组合在了一起。 Spring的Co…

[css] 什么是hack?css的hack有哪些?

[css] 什么是hack&#xff1f;css的hack有哪些&#xff1f; 一、总结 1、CSS hack&#xff1a;由于不同厂商的浏览器&#xff0c;比如Internet Explorer,Safari,Mozilla Firefox,Chrome等&#xff0c;或者是同一厂商的浏览器的不同版本&#xff0c;如IE6和IE7&#xff0c;对CS…

Element组件 Drawer 抽屉的关闭问题

场景 我使用的Drawer 抽屉是从上往下开的效果&#xff0c;点击搜索图标&#xff0c;从上往下开没问题&#xff0c;输入关键字搜索&#xff0c;搜索出来的列表放置于搜索栏下面&#xff0c;所以使用了一个子组件 问题就来了 搜出来的列表item&#xff0c;点击任意一条&#x…

First Steps with TensorFlow代码解析

注&#xff1a;本文的内容基本上都摘自tensorflow的官网&#xff0c;只不过官网中的这部分内容在国内访问不了&#xff0c;所以我只是当做一个知识的搬运工&#xff0c;同时梳理了一遍&#xff0c;方便大家查看。本文相关内容地址如下&#xff1a; https://developers.google.c…

宝塔nginx运行vue项目刷新404问题解决

我的项目是webpack构建的&#xff0c;因为我做一切开发都想要希望要从一个标准的构建去编码 所以&#xff0c;我的项目在node下运行&#xff0c;开发&#xff0c;调试是没有一点问题的&#xff0c;npm run build也是完全OK的&#xff0c;vue路由是history模式 把build出来的d…

vscode设置中文,设置中文不成功问题

刚安装好的vscode界面显示英文&#xff0c;如何设置中文呢&#xff1f; 在locale.json界面设置”locale":"zh-cn"也未能实现界面为中文&#xff0c;在网上找了参考了&#xff0c;以下教程真实测试有效&#xff01; 首先&#xff1a; 下载插件&#xff1a;Chines…

网页Request Headers请求头和Response Headers响应头

Request Headers Accept:告诉服务器&#xff0c;客户机支持的数据类型 Accept-Encoding:告诉服务器&#xff0c;客户机支持的数据压缩格式 Cache-Control&#xff1a;缓存控制&#xff0c;服务器通过控制浏览器要不要缓存数据 Connection:处理完这次请求&#xff0c;是断开…

springboot+jpa+mysql+redis+swagger整合步骤

springbootjpaMySQLswagger框架搭建好之上再整合redis&#xff1a; 在电脑上先安装redis&#xff1a; 一、在pom.xml中引入redis 二、在application.yml里配置redis&#xff0c;单独说明&#xff1a;redis刚一开始安装好是没有设置密码的。否则&#xff0c;会报connection错误。…