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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
JS+css3实现幻灯片轮播图
Aug 14 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 数组实例说明
2008/08/18 PHP
php四种基础算法代码实例
2013/10/29 PHP
微信支付扫码支付php版
2016/07/22 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Python中extend和append的区别讲解
2019/01/24 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python 随机按键模拟2小时
2020/12/30 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
电子专业毕业生自荐信
2014/05/25 职场文书
人才市场接收函
2015/01/30 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记