闭包详细图解

前言

在我们了解了执行上下文EC之后,我们应该知道了,js执行的正常流程。但是我们在工作、面试时经常会遇到闭包这个奇怪的东西,今天我们就来详细的了解一下。闭包是如何形成的,闭包在ECS中是如何执行的。

正文

作用域和作用域链

讲闭包之前我们需要先了解作用域和作用域链。

作用域: 表示一个变量的可用范围,从而避免不同范围的变量之间相互干扰。

作用域分为两种:

  • 全局作用域:在浏览器端全局作用域就是window,他可以重复使用,随处可用。但是全局作用的定义的变量容易被污染
  • 函数作用域:函数声明的时候会自动创建函数作用域对象scope,他指向函数声明时的作用域。而每个函数调用时创建的AO对象前会先创建当前函数的作用域,并创建parent对象通过函数声明时的作用域对象scope指向他函数的父级作用域。他不会污染全局,但是不会重复使用。函数执行完毕后会随着函数执行上问出栈=>AO对象销毁而销毁

作用域链

变量取值到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值,就会向通过parent对象去父作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。

闭包

为什么会使用闭包?

我们先总结下全局变量和局部变量的优缺点。

  • 全局变量:可以重用、但是会造成全局污染而且容易被篡改
  • 局部变量:仅函数内使用不会造成全局污染也不会被篡改、不可以重用
    从上面可以看出全局变量和局部变量的优缺点刚好是相对的。闭包的出现正好结合了全局变量和局部变量的优点。

闭包是怎么形成,在ECS如何执行的呢?

我们以一下代码为例:

function add(){
  var n = 0
  return function(){
    n++
    console.log(n)
  }
}
const num = add()
num()
num()
num()

代码开始执行时

首先创建全局执行上下文,并将全局执行上下文压入执行上下文栈底。

那么全局执行上下文活动对象AO=>window对象中会有以下内容


image

执行顺序:

  • 全局函数add => 内存地址 => add(){....}
  • 全局变量num => undefined
    函数在声明时会自动创建一个scope对象指向创建时的作用域(AO活动对象),此时作用域是window,所以声明的add函数的socpe指向window

add()执行

image

执行顺序:

  • add执行上下文入栈,创建add活动对象AO
    • add函数AO对象中有:
    • 局部变量n => 0
    • parent => window对象(parent根据add函数声明时scope)
  • add执行返回一个函数,函数声明创建scope对象指向当前作用域 => add活动对象AO
  • 返回的函数,函数被全局变量num引用

add()执行完成,出栈

image.png

add()执行完成。add的执行上下文出栈。

此时问题来了。

add()执行上下文已经出栈了。但是add的活动对象AO没有被释放!

为什么呢? 根据图片的我标注出来的红线,这里形成了一个循环引用。所有add的活动对象AO无法被释放。这样就形成了一个闭包。

num()执行

image

执行顺序:

  • num执行上下文入栈。创建num活动对象AO
    • num函数AO对象中:
    • parent => add函数AO对象(parent根据num函数声明时scope)
  • 执行n++,发现当前函数作用域中没有n变量,则根据作用域链向上查找。找到add的AO中有n变量。n++

num()执行完成,出栈

image

num()执行完成。num的执行上下文出栈。num的活动对象AO被垃圾回收。
接下来的num()执行,和上述步骤相同。

到这里闭包函数是如何执行也就解释清楚了。

闭包的缺点

通过上面的分析。我们发现没生成一个闭包就会有一个活动对象AO常驻内存,不会被销毁,所以有可能会导致内存溢出。

如何取消闭包

通过上面的分析。我们发现生成闭包就是因为有一个循环引用。导致活动对象AO无法被销毁垃圾回收。所以我们如果想要取消闭包,只需要打断循环引用就好了: num = null。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 下面就来说说闭包的一些基本概念和具体的形成过程。 什么是闭包? 闭包就是既能重用一个变量,又可以保护变量不被污染的...
    hans_431c阅读 1,026评论 0 1
  • 一、闭包的定义 闭包是指有权访问另一个函数作用域中的变量的函数 --《JavaScript高级程序设计》 函数对象...
    沐向阅读 353评论 0 0
  • 文 / 景朝霞来源公号 / 朝霞的光影笔记ID / zhaoxiajingjing图 / 自己画 ❥❥❥❥点个赞,...
    鲸鲸景鲸叻阅读 591评论 0 0
  • 前言 闭包是JS中重要的内容,对大多数人来说都会觉的闭包本身很好理解,不就是一个函数嵌套一个函数吗?但是再深入解释...
    蛙哇阅读 1,004评论 0 1
  • 在前端开发中闭包是一个很重要的知识点,是面试中一定会被问到的内容。之前我对闭包的理解主要是"通过闭包可以在函数外部...
    CodeMT阅读 185评论 0 0