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 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
浅谈Web Storage API的使用
Jun 23 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
JS date对象的减法处理实现代码
2010/12/28 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
angular4自定义组件详解
2017/09/28 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Python多进程机制实例详解
2015/07/02 Python
Python字符编码判断方法分析
2016/07/01 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python中turtle库的使用实例
2019/09/09 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
党章学习思想汇报
2014/01/14 职场文书
食品安全工作方案
2014/05/07 职场文书
优质服务演讲稿
2014/05/14 职场文书
小学母亲节活动总结
2015/02/10 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
MySQL 全文检索的使用示例
2021/06/07 MySQL