JavaScript闭包与作用域链实例分析


Posted in Javascript onJanuary 21, 2019

本文实例讲述了JavaScript闭包与作用域链。分享给大家供大家参考,具体如下:

闭包定义

闭包指的是有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数A内部创建另一个函数B,那么函数B就是一个闭包,可以访问函数A作用域中的所有变量。

JavaScript的闭包与作用域链密不可分,因此本文可以和JavaScript的作用域链相对照分析,一定可以对JavaScript的闭包和作用域链有更深的理解。

下面我们仍然以createComparisonFunction为例进行闭包的分析。

//step1: define createComparisonFunction
function createComparisonFunction(propertyName){
  return function(object1, object2){
    var value1 = object1[propertyName];
    var value2 = object2[propertyName];
    if (value1 < value2) {
      return -1;
    } else if (value1 > value2) {
      return 1;
    } else {
      return 0;
    }
  };
}
//step2: call createComparisonFunction
var compareName = createComparisonFunction("name");
var compareAge = createComparisonFunction("age");
//step3: call compare
var object1 = {
  name : "Nicholas",
  age : 25
};
var object2 = {
  name : "Greg",
  age : 27
};
var result1 = compareName(object1, object2); // 1
var result2 = compareAge(object1, object2); // -1
//step4: dereference closure for recycle memory
compareName = null;
compareAge = null;

在这个例子中,匿名函数function(object1, object2)是一个闭包,能访问createComparisonFunction作用域里的所有变量,自然也包含propertyName属性, 因为propertyName参数的不同,导致比较的属性也有所不同,从而函数执行结果也有不同。

闭包与变量

从JavaScript的作用域链中,我们了解到JavaScript是通过作用域链来确定函数执行环境的作用域的,这种机制会引出一个值得注意的副作用,即闭包只能取得包含函数中任何变量的最后一个值。闭包是通过引用外部函数的活动对象来访问该活动对象中的所有变量,因此在外部函数执行过程中,这些变量的值可能会变化,但是在外部函数执行完毕之后,外部函数的活动对象便不会再改变,因此在执行闭包的时候,闭包通过作用域链访问到外部函数的活动对象中的所有变量都只可能是在外部函数执行完毕之后,外部函数的活动对象中最后所保存的值。我们通过一个例子来说明这种副作用。

function createFunctions(){
  var result = new Array();
  for (var i = 0; i < 10; i++){
    result[i] = function(){
      return i;
    };
  }
  return result;
}
var functions = createFunctions();
for(var i = 0; i < functions.length; i++){
  console.log(functions[i]());
}

输出的结果是

10 10 10 10 10 10 10 10 10 10

从表面上看,似乎每个函数都应该返回自己的索引值,但实际上,每个函数都返回10。因为每个函数的作用域链中都保存着createFunctions函数的活动对象,所以他们引用的都是这个createFunctions函数的活动对象中的变量i,在createFunctions函数返回之后,变量i的值是10,此时每个函数都引用着保存变量i的同一个变量对象,所以每个函数内部i的值都是10。

我们以调用functions[3]()为例,图解一下:

JavaScript闭包与作用域链实例分析

Closure函数的Function对象的作用域链引用的createFunctions的活动对象中保留的变量i的值为10。所以不管是functions[3]()还是functions[5](),其运行时上下文的作用域链引用的createFunctions的活动对象都是同一个活动对象,该活动对象中保留的变量i的值是10。

如何避免这种局面?我们可以通过创建另一个匿名函数让闭包的行为符合预期。

function createFunctions(){
  var result = new Array();
  for (var i = 0; i < 10; i++){
    result[i] = function(num){
      return function(){
        return num;
      }
    }(i);
  }
  return result;
}
var functions = createFunctions();
for(var i = 0; i < functions.length; i++){
  console.log(functions[i]());
}

输出的结果是

0 1 2 3 4 5 6 7 8 9

这个代码片段与前面的代码的区别在于立即调用了一个匿名函数function(num),使得闭包function()引用的是function(num)的活动对象,访问的是该活动对象中的变量num而不是createFunctions活动对象中的变量i,而在立即调用function(num)的num是索引值0,1,2…9。

我们仍旧以调用functions[3]()为例,图解一下:

JavaScript闭包与作用域链实例分析

在执行createFunctions函数的时候,会依次调用function(0), function(1) … function(9), 生成function(0), function(1) … function(9)这10个function(num)的活动对象,而result[0], result[1] … result[9]这10个匿名函数对象的作用域链分别引用这10个function(num)的活动对象,而其中的变量num的值也对应的为0, 1 … 9。

所以不管是functions[3]()还是functions[5](),其运行时上下文的作用域链都会引用在执行createFunctions函数时候所执行的function(3)或者function(5)这些function(num)函数的活动对象,这些活动对象都是不同的活动对象,其中保留的num值分别为3, 5。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
document.all与WEB标准
May 13 Javascript
js查错流程归纳
May 04 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
js中事件对象和事件委托的介绍
Jan 21 #Javascript
JavaScript作用域链实例详解
Jan 21 #Javascript
Jquery的Ajax技术使用方法
Jan 21 #jQuery
js变量声明var使用与不使用的区别详解
Jan 21 #Javascript
Vue中Axios从远程/后台读取数据
Jan 21 #Javascript
vue项目中实现的微信分享功能示例
Jan 21 #Javascript
在vue项目中引入highcharts图表的方法
Jan 21 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
JS模拟多线程
2007/02/07 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Python3.6简单反射操作示例
2018/06/14 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
造型师求职自荐信
2013/09/27 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
贫困证明书范文
2015/06/16 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
用python实现监控视频人数统计
2021/05/21 Python
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS