javascript深入理解-从作用域链理解闭包

Scholer 发布于2019-08-26 13:57 / 1168人阅读

摘要：一概要红宝书对于闭包的定义闭包就是有权访问另外一个函数作用域中变量的函数。汤姆大叔在关于闭包对的文章的定义。解决办法改成闭包，方法就是返回一个函数，并且访问变量循环结束后的全局执行上下文没有变化。

一、概要

红宝书（P178）对于闭包的定义：闭包就是有权访问另外一个函数作用域中变量的函数。

MDN，对于闭包的定义：闭包就是指能够访问自由变量的函数。

那么什么是自由变量？自由变量就是在函数中使用，但既不是函数参数arguments，也不是函数的局部变量的变量，就是说另外一个函数作用域中的变量。

闭包组成？闭包 = 函数 + 函数能够访问的变量

文章首发地址于sau交流学习社区：https://www.mwcxs.top/page/57...

二、分析

举个栗子：

var a = 1;

function foo() {
    console.log(a);
}

foo();

foo函数可以访问到变量a，但是a并不是foo函数的局部变量，也不是foo函数的参数，所以a就是自由变量，那么函数foo+foo函数可以访问自由变量a不就是构成了一个闭包嘛。

我们再来看一个栗子：

function getOuter(){
  var date = "1127";
  function getDate(str){
    console.log(str + date);  //访问外部的date
  }
  return getDate("今天是："); //"今天是：1127"
}
getOuter();

其中date不是函数getDate的参数，也不是局部变量，所以date是自由变量。

总结起来就是两点：

1、是一个函数（比如：内部函数从父函数中返回）

2、能够访问上级函数作用域中的变量（哪怕上级函数的上下文已经销毁）

然后我们再来看一个栗子（来自《JavaScript权威指南》）来分析：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}

var foo = checkscope(); // foo指向函数f
foo();

这时候需要我们来分析一下这段代码中执行上下文栈和执行上下文的变化情况。

简要的分析一下执行过程：

1、进入全局代码，创建全局执行上下文，全局执行上下文压入执行上下文栈；

2、全局执行上下文初始化；

3、执行checkscope函数，创建sheckscope函数执行上下文，checkscope执行上下文被压入执行上下文栈；

4、checkscope执行上下文初始化，创建变量对象，作用域链，this等；

5、checkscope函数执行完毕，checkscope执行上下文从执行上下文栈中弹出；

6、执行f函数，创建f函数执行上下文，f执行上下文压入执行上下文栈；

7、f执行上下文初始化，创建变量对象，作用域链，this等；

8、f函数执行完毕，f函数上下文从执行上下文栈中弹出

那么问题来了，函数f执行的时候，checkscope函数上下文已经被销毁了，那函数f是如何取到scope变量的？

答：函数f执行上下文维护了一盒作用域链，作用域链会指向checkscope作用域，作用域链是一个数组，结构如下：

fContext = {
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
}

所以指向关系：当前作用域-->checkscope作用域-->全局作用域，即使checkscopeContext被销毁了，但是js依然会让checkscopeContext.AO（活动对象）继续存在内存中，f函数依然可以通过f函数的作用域链找到它，这就是闭包的关键。

注：AO 表示活动对象，储存了函数的参数、函数内声明的变量等

三、概念

上面分析介绍的是闭包的实践角度，其实闭包有很多种介绍，说法不一。

汤姆大叔在关于闭包对的文章的定义。ECMAScript中，闭包指的是：

1、从理论角度：所有的函数，因为它们都是创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就是相当于再访问自由变量，这个时候使用最外层的作用域。

2、从实践角度：以下函数才算闭包：

（1）即使创建它的上下文已经摧毁了，它依然存在（比如，内部函数中返回）

（2）在代码中引用了自由变量

四、面试必刷的题

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

如果知道是闭包，答案很明显，都是3。

循环结束后，全局执行上下文的VO是

globalContext = {
    VO: {
        data: [...],
        i: 3
    }
}

执行data[0]函数的时候，data[0]函数的作用域链为：

data[0]Context = {
    Scope: [AO, globalContext.VO]
}

由于其自身没有i变量，就会向上查找，所有从全局上下文查找到i为3，data[1] 和 data[2] 是一样的。

注：

1、for 循环不会创建一个执行上下文，所有不会有 AO， i 的值是在全局对象的 AO 中，代码初始的时候为：

globalContext = {
    VO: {
        data: [...],
        i: 0
    }
}

2、data[0] 是一个函数名，data[0]() 表示执行这个函数，当执行函数的时候，循环已经走完了；

3、函数能够读取到的值跟函数定义的位置有关，跟执行的位置无关。

解决办法：

改成闭包，方法就是data[i]返回一个函数，并且访问变量i

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = (function (i) {
      return function(){
          console.log(i);
      }
  })(i);
}

data[0]();    // 0
data[1]();    // 1
data[2]();    // 2

循环结束后的全局执行上下文没有变化。

执行 data[0] 函数的时候，data[0] 函数的作用域链发生了改变：

data[0]Context = {
    Scope: [AO, 匿名函数Context.AO, globalContext.VO]
}

匿名函数执行上下文的AO为：

匿名函数Context = {
    AO: {
        arguments: {
            0: 0,
            length: 1
        },
        i: 0
    }
}

data[0]Context 的 AO 并没有 i 值，所以会沿着作用域链从匿名函数 Context.AO 中查找，这时候就会找 i 为 0，找到了就不会往 globalContext.VO 中查找了，即使 globalContext.VO 也有 i 的值(值为3)，所以打印的结果就是0

五、思考题

把for循环中的var i = 0，改成let i = 0。结果是什么，为什么？

var data = [];

for (let i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

或者这样：

var data = [];

var _loop = function _loop(i) {
    data[i] = function () {
        console.log(i);
    };
};

for (var i = 0; i < 3; i++) {
    _loop(i);
}

data[0]();
data[1]();
data[2]();

六、参考

https://github.com/mqyqingfen...

GPU云服务器云服务器深入理解javascript js闭包的理解深入理解系列深入理解linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109884.html

【进阶2-2期】JavaScript深入之从作用域链理解闭包

摘要：使用上一篇文章的例子来说明下自由变量进阶期深入浅出图解作用域链和闭包访问外部的今天是今天是其中既不是参数，也不是局部变量，所以是自由变量。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第7天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计...

simpleapples 2019-08-23 13:47 评论0 收藏0
【进阶2-3期】JavaScript深入之闭包面试题解

摘要：闭包面试题解由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起的一个副作用就是如果内部函数在一个循环中，那么变量的值始终为最后一个值。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第8天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了...

alanoddsoff 2019-08-23 13:47 评论0 收藏0
JavaScript中的闭包

摘要：闭包引起的内存泄漏总结从理论的角度将由于作用域链的特性中所有函数都是闭包但是从应用的角度来说只有当函数以返回值返回或者当函数以参数形式使用或者当函数中自由变量在函数外被引用时才能成为明确意义上的闭包。文章同步到github js的闭包概念几乎是任何面试官都会问的问题,最近把闭包这块的概念梳理了一下,记录成以下文章。什么是闭包我先列出一些官方及经典书籍等书中给出的概念,这些概念虽然...

HmyBmny 2019-08-21 17:07 评论0 收藏0
javascript系列--javascript深入理解--作用域，作用域链，闭包的面试题解

摘要：一概要作用域和作用域链是中非常重要的特性，关系到理解整个体系，闭包是对作用域的延伸，其他语言也有闭包的特性。作用域链的作用他保证了变量对象的有序访问。一、概要作用域和作用域链是js中非常重要的特性，关系到理解整个js体系，闭包是对作用域的延伸，其他语言也有闭包的特性。那什么是作用域？作用域指的是一个变量和函数的作用范围。 1、js中函数内声明的所有变量在函数体内始终是可见的； 2...

anRui 2019-08-23 17:50 评论0 收藏0
形象化模拟作用域链，深入理解js作用域、闭包

摘要：至此作用域链创建完毕。好了，通过深入理解作用域链，我们能跟好的理解的运行机制和闭包的原理。前言理解javascript中的作用域和作用域链对我们理解js这们语言。这次想深入的聊下关于js执行的内部机制，主要讨论下，作用域，作用域链，闭包的概念。为了更好的理解这些东西，我模拟了当一个函数执行时，js引擎做了哪些事情--那些我们看不见的动作。关键词：执行环境作用域作用域链变...

txgcwm 2019-08-21 17:48 评论0 收藏0