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 22 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
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/10/03 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
网页自动跳转代码收集
2009/09/27 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
原生javascript实现图片放大镜效果
2017/01/18 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python实现截屏的函数
2015/07/26 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
教师找工作推荐信
2013/11/23 职场文书
小学音乐教学反思
2014/02/05 职场文书
党组织公开承诺书
2014/03/29 职场文书
初中学生期末评语
2014/04/24 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang