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 Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
JS实现滑动导航效果
Jan 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
js数组的操作详解
2013/03/27 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
师范应届生教师求职信
2013/11/05 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
企业统计员岗位职责
2013/12/13 职场文书
投标保密承诺书
2014/05/19 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python