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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
学习ExtJS table布局
Oct 08 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
javascript实现电商放大镜效果
Nov 23 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的类树(支持无限分类)
2006/10/09 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
深入php数据采集的详解
2013/06/02 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
php集成开发环境详解
2019/09/24 PHP
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
python计算最大优先级队列实例
2013/12/18 Python
讲解Python中的递归函数
2015/04/27 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
Python callable内置函数原理解析
2020/03/05 Python
海飞丝的广告词
2014/03/20 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
欢迎标语大全
2014/06/21 职场文书
家长会欢迎词
2015/01/23 职场文书
Python的三个重要函数详解
2022/01/18 Python