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 相关文章推荐
模拟select的代码
Oct 19 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
使用js实现数据格式化
Dec 03 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
js比较日期大小的方法
2015/05/12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
python3操作微信itchat实现发送图片
2018/02/24 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python 生成图形验证码的方法示例
2018/11/11 Python
python实现随机漫步方法和原理
2019/06/10 Python
python面试题之列表声明实例分析
2019/07/08 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Python urllib.request对象案例解析
2020/05/11 Python
java关于string最常出现的面试题整理
2021/01/18 Python
法律专业推荐信范文
2013/11/29 职场文书
财务部岗位职责范本
2015/04/14 职场文书
讲座新闻稿
2015/07/18 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
pytorch 实现变分自动编码器的操作
2021/05/24 Python
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android