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 相关文章推荐
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
js如何取消事件冒泡
Sep 23 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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读取html并截取字符串的简单代码
2009/11/30 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
canvas知识总结
2017/01/25 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
详解python中的json的基本使用方法
2016/12/21 Python
windows下python安装小白入门教程
2018/09/18 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python日志模块logbook使用方法
2019/09/19 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python多线程获取返回值代码实例
2020/02/17 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python库安装速度过慢解决方案
2020/07/14 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
设计师求职信模板
2014/05/06 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
作弊检讨书范文
2015/05/06 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
医院员工辞职信范文
2015/05/12 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书