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 相关文章推荐
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php实现搜索类封装示例
2016/03/31 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
js函数排序的实例代码
2013/07/01 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python多继承原理与用法示例
2018/08/23 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
基于python实现高速视频传输程序
2019/05/05 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python开发入门——set的使用
2020/09/03 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
小学生民族团结演讲稿
2014/08/27 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
小学大队长竞选稿
2015/11/20 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技