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 触发a链接点击事件解决方案
May 02 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
理解javascript正则表达式
Mar 08 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
python中时间模块的基本使用教程
2019/05/14 Python
python的等深分箱实例
2019/11/22 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
汽车维修工岗位职责
2014/02/12 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
表彰会主持词
2014/03/26 职场文书
学校教师读书活动总结
2014/07/08 职场文书
代办出身证明书
2014/10/21 职场文书
教师年度个人总结
2015/02/11 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书