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 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
Javascript缓存API
Jun 14 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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 IP及IP段进行访问限制的代码
2008/12/17 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php 生成WML页面方法详解
2009/08/09 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
PHP正则验证Email的方法
2015/06/15 PHP
分享10段PHP常用代码
2015/11/11 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
Jquery操作cookie记住用户名
2016/03/29 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
市场部管理制度
2014/02/02 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
专家推荐信范文
2015/03/26 职场文书
安全生产会议制度
2015/08/06 职场文书
2019各种保证书范文
2019/06/24 职场文书