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 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
javascript求日期差的方法
2016/03/02 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
python编程的核心知识点总结
2021/02/08 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
业绩倒数第一的检讨书
2014/09/24 职场文书
八项规定整改方案
2014/10/01 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
合同补充协议书
2016/03/24 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python