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下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 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/11/01 PHP
php多文件上传实现代码
2014/02/20 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery禁用右键示例
2014/04/28 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
浅谈Postman解决token传参的问题
2018/03/31 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python实现查看系统启动项功能示例
2018/05/10 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python os模块简单应用示例
2019/05/23 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python如何对链表操作
2020/10/10 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
检讨书范文300字
2015/01/28 职场文书
北京爱情故事观后感
2015/06/12 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
2016年党员承诺书范文
2016/03/24 职场文书