可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
关于javascript闭包理解
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
0
点赞
0
评论
收藏
分享
举报
关于javascript闭包理解
佚名用户
关注
已关注
0
0
0
1256
发表于 2020-05-21 09:28:27
# ``` 关于javascript闭包理解 ``` ## **概念** ``` 当一个内部函数被调用,就会形成闭包,闭包就是能够读取其他函数内部变量的函数就是一个函数去访问了另外一个函数的中的变量的函数 ``` ## 案例 首先看下闭包的一个简单案例 ``` function A(){ function B(){ console.log(\\\"Hello haorooms!\\\"); } return B; } var c = A(); c();//Hello haorooms! ``` 这个例子是一个比较简单的闭包,解释如下: > (1)定义了一个普通函数A > > (2)在A中定义了普通函数B > > (3)在A中返回B(确切的讲,在A中返回B的引用) > > (4)执行A(),把A的返回结果赋值给变量 c > > (5)执行 c() 当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包。 ## 闭包的作用 在上述例子中,B定义在A中,因此B依赖于A,而外部变量 c 又引用了B, 所以A间接的被 c 引用,也就是说,A不会被回收,会一直保存在内存中。为了证明我们的推理,上面的例子稍作改进。也可以看我之前闭包文章中的例子:[http://www.haorooms.com/post/js_bb](http://www.haorooms.com/post/js_bb) 第一个案例。 ``` function A(){ var count = 0; function B(){ count ++; console.log(count); } return B; } var c = A(); c();// 1 c();// 2 c();// 3 ``` count是A中的一个变量,它的值在B中被改变,函数B每执行一次,count的值就在原来的基础上累加1。因此,A中的count一直保存在内存中。 这就是闭包的作用,有时候我们需要一个模块中定义这样一个变量:希望这个变量一直保存在内存中但又不会“污染”全局的变量,这个时候,我们就可以用闭包来定义这个模块。 ## 常见的闭包写法 前面我的文章中多次提及“自调用匿名函数”,例如:[http://www.haorooms.com/post/js_jquery_chajian](http://www.haorooms.com/post/js_jquery_chajian) 其实,大部分自调用匿名函数都是闭包的一种应用和写法。 例如下面的例子 ``` (function(document){ var viewport; var obj = { init:function(id){ viewport = document.querySelector(\\\"#\\\"+id); }, addChild:function(child){ viewport.appendChild(child); }, removeChild:function(child){ viewport.removeChild(child); } } window.jView = obj; })(document); ``` 以上代码可以改写成如下代码: ``` var f = function(document){ var viewport; var obj = { init:function(id){ viewport = document.querySelector(\\\"#\\\"+id); }, addChild:function(child){ viewport.appendChild(child); }, removeChild:function(child){ viewport.removeChild(child); } } window.jView = obj; }; f(document); ``` 在这段代码中似乎看到了闭包的影子,但 f 中没有任何返回值,似乎不具备闭包的条件,注意这句代码: ``` window.jView = obj; ``` obj 是在 f 中定义的一个对象,这个对象中定义了一系列方法, 执行window.jView = obj 就是在 window 全局对象定义了一个变量 jView,并将这个变量指向 obj 对象,即全局变量 jView 引用了 obj 。而 obj 对象中的函数又引用了 f 中的变量 viewport ,因此 f 中的 viewport 不会被回收,会一直保存到内存中,所以这种写法满足闭包的条件。 另外,我们把obj赋值给window.jView ,那么,我们在整个window中可以直接调用obj 中的函数,但是函数内部的变量不会被收回,例如我们调用obj的init函数可以这么写: ``` window.jView.init(\\\"haorooms\\\") ``` ## 小结 以上是对闭包最简单的理解。当然闭包还有更深入的理解。例如执行环境(execution context)、活动对象(activation object)以及作用域(scope)和作用域链(scope chain)的运行机制等等。当然,我们理解闭包先从简单开始,写的多了,理解的就越深了。本文也是对闭包的最简单的入门,希望通过这篇文章,大家对闭包有了一定的理解。
点击查看更多
全部评论
登录
|
注册
关于作者
佚名用户
TA的个人主页
关注
已关注
文章
0
粉丝
0
获赞
0
评论
0
访问
20873
防抖节流
理解数据可视
如何简单快速的做出一个中国地图,并且显示各个省份数据(数据随机虚构)
好用的前端插件-
Canvas和SVG对比
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接