位置: 编程技术 - 正文

Javascript闭包实例详解(js闭包实现)

编辑:rootadmin

推荐整理分享Javascript闭包实例详解(js闭包实现),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript 闭包,js闭包示例,javascript闭包运行原理,javascript 闭包,javascript闭包的作用,javascript闭包原理,js闭包实现,js闭包实现,内容如对您有帮助,希望把文章链接给更多的朋友!

什么是闭包

闭包是什么&#;闭包是Closure,这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是:

闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。

闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配当在一个函数内定义另外一个函数就会产生闭包上面的第二定义是第一个补充说明,抽取第一个定义的主谓宾——闭包是函数的‘局部变量'集合。只是这个局部变量是可以在函数返回后被访问。(这个不是官方定义,但是这个定义应该更有利于你理解闭包)

理解Javascript的闭包非常关键,本篇试图用最简单的例子理解此概念。

或者可以写成这样:

我们要提的问题是:为什么greet的内部函数能使用sth这个变量?

其内部大致运作如下:

→ 创建全局上下文→ 执行var sayHi = greet('hi');语句,创建greet上下文,变量sth存储在greet上下文中。→ 继续执行greet函数内的语句,返回一个匿名函数,虽然greet上下文从堆栈上消失,但sth变量依旧存在于内存的某个空间。→ 继续执行sayHi('darren');创建了sayHi上下文,并试图搜寻sth变量,但在sayHi这个上下文中没有sth变量。sayHi上下文会沿着一个作用域链找到sth变量对应的那个内存。 外层函数就像一个闭包,其内部函数可以使用外部函数的变量。

一个闭包的简单例子

以上,为什么结果不是0, 1, 2呢?

--因为i作为一个闭包变量,当前值为3,被内部函数使用。要实现想要的效果,可以在遍历的时候每一次遍历创建一个独立的上下文使其不受闭包影响。而自触发函数可以实现独立上下文。

本篇的两个例子正好体现了闭包的2个方面:一个是内部函数使用闭包变量,另一个是把内部函数写在自触发函数中从而避免受闭包影响。

做为局部变量都可以被函数内的代码访问,这个和静态语言是没有差别。闭包的差别在于局部变变量可以在函数执行结束后仍然被函数外的代码访问。这意味 着函数必须返回一个指向闭包的“引用”,或将这个”引用”赋值给某个外部变量,才能保证闭包中局部变量被外部代码访问。当然包含这个引用的实体应该是一个 对象,因为在Javascript中除了基本类型剩下的就都是对象了。可惜的是,ECMAScript并没有提供相关的成员和方法来访问闭包中的局部变 量。但是在ECMAScript中,函数对象中定义的内部函数() inner function是可以直接访问外部函数的局部变量,通过这种机制,我们就可以以如下的方式完成对闭包的访问了。

上述代码的执行结果是:Hello Closure,因为sayHello()函数在greeting函数执行完毕后,仍然可以访问到了定义在其之内的局部变量text。

好了,这个就是传说中闭包的效果,闭包在Javascript中有多种应用场景和模式,比如Singleton,Power Constructor等这些Javascript模式都离不开对闭包的使用。

ECMAScript闭包模型

ECMAScript到底是如何实现闭包的呢?想深入了解的亲们可以获取ECMAScript 规范进行研究,我这里也只做一个简单的讲解,内容也是来自于网络。

Javascript闭包实例详解(js闭包实现)

在ECMAscript的脚本的函数运行时,每个函数关联都有一个执行上下文场景(Execution Context) ,这个执行上下文场景中包含三个部分

文法环境(The LexicalEnvironment)变量环境(The VariableEnvironment)this绑定

其中第三点this绑定与闭包无关,不在本文中讨论。文法环境中用于解析函数执行过程使用到的变量标识符。我们可以将文法环境想象成一个对象,该对 象包含了两个重要组件,环境记录(Enviroment Recode),和外部引用(指针)。环境记录包含包含了函数内部声明的局部变量和参数变量,外部引用指向了外部函数对象的上下文执行场景。全局的上下文 场景中此引用值为NULL。这样的数据结构就构成了一个单向的链表,每个引用都指向外层的上下文场景。

例如上面我们例子的闭包模型应该是这样,sayHello函数在最下层,上层是函数greeting,最外层是全局场景。如下图:

因此当sayHello被调用的时候,sayHello会通过上下文场景找到局部变量text的值,因此在屏幕的对话框中显示出”Hello Closure”变量环境(The VariableEnvironment)和文法环境的作用基本相似,具体的区别请参看ECMAScript的规范文档。

闭包的样列

前面的我大致了解了Javascript闭包是什么,闭包在Javascript是怎么实现的。下面我们通过针对一些例子来帮助大家更加深入的理解闭包,下面共有5个样例,例子来自于JavaScript Closures For Dummies(镜像)。

例子1:闭包中局部变量是引用而非拷贝

因此执行结果应该弹出的而非。

例子2:多个函数绑定同一个闭包,因为他们定义在同一个函数内。

例子3:当在一个循环中赋值函数时,这些函数将绑定同样的闭包

testList的执行结果是弹出item3 undefined窗口三次,因为这三个函数绑定了同一个闭包,而且item的值为最后计算的结果,但是当i跳出循环时i值为4,所以list[4]的结果为undefined.

例子4:外部函数所有局部变量都在闭包内,即使这个变量声明在内部函数定义之后。

执行结果是弹出”Hello Alice”的窗口。即使局部变量声明在函数sayAlert之后,局部变量仍然可以被访问到。

例子5:每次函数调用的时候创建一个新的闭包

闭包的应用

Singleton 单件:

这个单件通过闭包来实现。通过闭包完成了私有的成员和方法的封装。匿名主函数返回一个对象。对象包含了两个方法,方法1可以方法私有变量,方法2访 问内部私有函数。需要注意的地方是匿名主函数结束的地方的'()',如果没有这个'()'就不能产生单件。因为匿名函数只能返回了唯一的对象,而且不能被 其他地方调用。这个就是利用闭包产生单件的方法。

整理Javascript基础语法学习笔记 1、什么是变量字面意思:变量是可变的量;编程角度:变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物

Bootstrap每天必学之缩略图与警示窗 1、缩略图缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将

整理Javascript数组学习笔记 1、什么是数组数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值。scripttype="text/javascript"varmy

标签: js闭包实现

本文链接地址:https://www.jiuchutong.com/biancheng/386322.html 转载请保留说明!

上一篇:javascript高级编程之函数表达式 递归和闭包函数(《javascript高级程序设计》)

下一篇:整理Javascript基础语法学习笔记(javascript基本语句)

  • 土地增值税扣除成本
  • 一般纳税人服务费税率
  • 应交地方教育费附加税率是多少
  • 新企业会计准则2021
  • 货物运输发票抵税多少
  • 如何开银行卡账户
  • 个体工商户核定征收税率
  • 足浴按摩开票明细一栏写什么
  • 更换电脑后个税信息如何导入
  • 营改增前未完工的老项目可以开专票吗
  • 财产租赁所得适用什么税率
  • 银行每年存款任务
  • 社会保险基金管理局是干什么的
  • 材料成本差异分配率
  • 凭证可以部分冲销吗
  • 装卸费收取的税收筹划是怎样的?
  • 公司账上没钱还假发工资违法吗
  • 前期认证相符且不符合
  • 出口旧设备最新政策
  • 债券溢价发行会计分录举例
  • 房地产增值税结转收入的条件是什么
  • 国家基建项目规划
  • 苹果手机录音怎么转换成mp3格式
  • win10系统还原会删除其他盘的文件吗
  • 打开软件窗口后如果没有出现属性面板可执行
  • 电子商务公司的简介
  • 固定资产的折旧是什么意思
  • 小宝宝耸肩膀缩脖子
  • cmos电池低是什么意思
  • 自己怎么做电脑系统
  • php编写登陆界面
  • 反射动态创建对象
  • 如何把文档转换成二维码
  • PHP:apache_child_terminate()的用法_Apache函数
  • Olehelp.exe - Olehelp是什么进程 有什么用
  • PHP:oci_fetch_assoc()的用法_Oracle函数
  • 计提坏账可以冲回吗
  • php异常处理和错误处理
  • 华硕11代笔记本装win10
  • 公司与公司的往来款清帐需要交税吗
  • react reducer详解
  • windowsserver2008r2密码重置
  • 安装多版本chrome
  • yolov5m
  • Java+JSP+Mysql+Tomcat实现Web图书管理系统
  • 什么是CHATGPT
  • 学长学姐面试要注意哪些细节
  • 事业结余期末余额在借方
  • 下列项目的进项税额可以从销售税额中抵扣的是
  • 经营租入的设备属于什么会计要素
  • 合同取得成本的账务处理
  • 小微企业财政政策
  • mysql登录报1045
  • 为什么盈利要利息呢
  • 外贸出口企业如何申报增值税
  • 增值税发票上注明的价款包含增值税吗
  • 将固定资产转为投资性房地产账务处理
  • 应发工资计入什么科目
  • 资本公积现金流量表里放在哪里
  • 资本化期间专门借款利息费用需将
  • 首次购买金税盘及服务费的账务处理
  • 经营一家淘宝店需要多少钱
  • 展览展示服务费计入什么科目
  • 小规模纳税人不超过10万免增值税
  • 经营性应付项目减少对经营活动现金
  • 在win7系统中如何用快捷键复制文件或文件夹
  • wind10怎么恢复wind7
  • centos什么命令都说找不到
  • sesvc.exe是什么进程
  • win10每周更新
  • win10移动版和win10区别
  • cocos2dx ui编辑器
  • 深入理解计算机系统
  • Unity3d C# HttpWebRequest 异步下载文件
  • android回调函数
  • CLASS_CONFUSION JS混淆 全源码
  • 购进货物计入什么科目
  • 乡村振兴与文化遗产保护研究
  • 会计建账时一般需要哪几本账
  • 国家个人所得税征收标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设