likes
comments
collection
share

Javascript之闭包

作者站长头像
站长
· 阅读数 61

书接上文

上一篇我们整体回顾了一下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 是一个典型的闭包。

总结

尽管闭包在事件中随处可见，但是其实我们并不需要太过于关注它的概念。我们知道闭包能为函数提供一个私有作用域，产生很多灵活的作用（比如防抖、节流、解决var没有块级作用域的问题），但是也可能会造成内存泄漏的问题，因此我们需要知道闭包产生的原因，能够让我们尽可能避开他会造成的负面影响。最后再打个广告，关注公众号程序猿青空，不定期分享各种优秀文章、学习资源、学习课程，能在未来（因为现在还没啥东西）享受更多福利。

转载自:https://juejin.cn/post/7200303038077501497
评论
请登录