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 相关文章推荐
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
angular select 默认值设置方法
Jun 23 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
取得父标签
2006/11/14 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
jquery获取radio值实例
2014/10/16 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
python实现简单登陆流程的方法
2018/04/22 Python
用Python逐行分析文件方法
2019/01/28 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python错误的处理方法
2020/06/23 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
生产总经理岗位职责
2013/12/19 职场文书
考试不及格检讨书
2014/01/09 职场文书
yy结婚证婚词
2014/01/10 职场文书
培训讲师邀请函
2014/01/10 职场文书
财政专业求职信范文
2014/02/19 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
和谐社区口号
2014/06/19 职场文书
锦旗标语大全
2014/06/23 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
golang定时器
2022/04/14 Golang