JS闭包用法实例分析


Posted in Javascript onMarch 27, 2017

本文实例讲述了JS闭包用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
//      第一,函数作为返回值
      function fn(){
        var max = 10;
        return function bar(x){
          if(x > max) {
            console.log(x);
          }
        };
      }
      var f1 = fn();
      f1(15);
    </script>
    <script type="text/javascript">
//      第二,函数作为参数被传递
      var max = 10;
      fn = function(x){
        if(x > max){
          console.log(x);//15
        }
      };
      (function(f){
        var max = 100;
        f(15);
      })(fn);
    </script>
    <script>
      function fn(){
        var max = 10;
        return function bar(x){
          if(if > max){
            console.log(x);
          }
        };
      }
      var f1 = fn();
        max = 100;
      f1(15);
    </script>
  </body>
</html>

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

全局上下文环境:max是undefined

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

fn()上下文环境:max是10

第三步,执行完var f1 = fn();,fn()调用完成。按理说应该销毁掉fn()的执行上下文环境,但是这里不能这么做。

注意,重点来了:因为执行fn()时,返回的是一个函数。函数的特别之处在于可以创建一个独立的作用域。

而正巧合的是,返回的这个函数体中,还有一个自由变量max要引用fn作用域下的fn()上下文环境中的max。

因此,这个max不能被销毁,销毁了之后bar函数中的max就找不到值了。因此,这里的fn()上下文环境不能被销毁,还依然存在与执行上下文栈中。

执行到max = 100;时,全局上下文环境将变为活动状态,但是fn()上下文环境依然会在执行上下文栈中。

另外,执行完max = 100;,全局上下文环境中的max被赋值为100。

全局上下文环境:max是100 fn()上下文环境:max是10

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

执行bar(15)时,max是自由变量,需要向创建bar函数的作用域中查找,找到了max的值为10。

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

使用闭包会增加内容开销,现在很明显了吧!

第五步,执行完f1(15);就是上下文环境的销毁过程,这里就不再赘述了。

闭包和作用域、上下文环境有着密不可分的关系,真的是“想说爱你不容易”!

另外,闭包在jQuery中的应用非常多,无论你是想了解一个经典的框架/类库,还是想自己开发一个插件或者类库,像闭包、原型这些基本的理论,是一定要知道的。否则,到时候出了BUG你都不知道为什么,因为这些BUG可能完全在你的知识范围之外。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
vue 2.0组件与v-model详解
Mar 27 #Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 #Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 #Javascript
javascript实现下雨效果
Mar 27 #Javascript
HTML的select控件美化
Mar 27 #Javascript
JS实现的点击表头排序功能示例
Mar 27 #Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 #Javascript
You might like
简单的PHP图片上传程序
2008/03/27 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
Python with的用法
2014/08/22 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python中退出多层循环的方法
2018/11/27 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
高中生操行评语
2014/04/25 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
《我是什么》教学反思
2016/02/16 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python