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 相关文章推荐
Textarea与懒惰渲染实现代码
Jan 04 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
犀利的js 函数集合
2009/06/11 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
成品仓管员工作职责
2013/12/29 职场文书
年终晚会活动方案
2014/08/21 职场文书
高中军训的心得体会
2014/09/01 职场文书
课程设计的心得体会
2014/09/03 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
简短清晨问候语
2015/11/10 职场文书