Javascript之闭包

闭包

简单来说就是函数套函数，MDN 对闭包的定义为：

闭包是指那些能够访问自由变量的函数。

那么什么是自由变量呢

自由变量是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。

这么来看是不是清晰了很多，来看一个简单的例子：

var a = 1;
​
function func() {
  console.log(a);
}
​
func(); 

func 函数中访问的 a 既不是函数的参数也不是函数内定义的局部变量，所以 a 是一个自由变量。所以func函数就是一个闭包。

？？？？

这么一个函数就成闭包了？

是的，在《JavaScript权威指南》中就有说明：从技术的角度讲，所有的JavaScript函数都是闭包。

是不是突破了自己的常识，别着急。在 ECMAScript 规范中对必报的定义是这样的

1.从理论角度：所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域。2.从实践角度：以下函数才算是闭包：1.即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）2.在代码中引用了自由变量

所以我们平时关注的都是实践角度的闭包。

案例分析

接下来我们就以上一篇的例子来分析实践角度的闭包

function func(value){
    getValue = function(){
        console.log(value);
  };
    return this
}
            
function getValue(){
    console.log(5);
}
​
func(1).getValue(); 

在上一篇文章中**Javascript之执行上下文**对这一段代码的运行过程有非常详细的分析，在这里就不做过多的赘述，有兴趣的同学可以先阅读这篇文章，顺手也可以点个赞，价格关注，最好还能关注一下公众号。这里只做简单的概述：

1.进入全局代码，创建全局执行上下文，全局执行上下文被压入执行上下文栈栈并初始化
2.执行 func 函数，创建 func 函数执行上下文，func 执行上下文入栈
3.func 执行上下文初始化，创建变量对象、作用域链、this等
4.func 函数执行完毕，func 执行上下文出栈
5.执行 getValue 函数，创建 getValue 函数执行上下文，getValue 执行上下文入栈
6.getValue 执行上下文初始化，创建变量对象、作用域链、this等
7.getValue 函数执行完毕，getValue 函数上下文出栈
8.全局执行上下文出栈，代码运行结束

那么我们知道在第6，7步之间，运行 getValue 函数，输出 value 的值时，这个 value 的值来自于 func 执行上下文。但是这个时候的 func 执行上下文明明已经运行结束，出栈销毁了，为什么还能找到 value 的值呢。

我们来看 getValue 的执行上下文：

getValueContext = {
  AO: {
      arguments: { // 数组
          length: 0
      }
  },
  Scope: [ AO, funcContext.AO, globalContext.VO ],
  this: undefined
} 

我们可以看到 getValueContext 的作用域链中存在 funcContext.AO ，所以他才能顺着作用域链去找 func 函数的执行上下文，再观察示例代码的执行过程可以发现，getValue 函数的创建时在 funcContext 出栈之前的，因此在 funcContext 出栈之前的它的活动变量已经被保存在了 getValue 的 [[scope]] 属性中，当funcContext 出栈并被销毁时，Javascript 发现它的活动变量也就是 funcContext.AO 还存在被引用的情况，因此即使 funcContext 被销毁了， funcContext.AO 仍然活跃在内存当中，因此在 getValueContext 仍然可以沿着作用域找到 value 属性。那么这个 value 既不是 getValue 函数的参数也没有定义在其函数内部，所以对于 getValue 而言它是一个自由变量

再回头看看实践中闭包的定义：

1.funcContext 被销毁但是 getValue 仍然存在
2.getValue 中使用了 value 这个自由变量

所以 getValue 是一个典型的闭包。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享