原来JavaScript的闭包是这么回事

正如标题所述,JavaScript闭包对我来说一直是个谜。我阅读过很多篇相关文章,我在工作中也使用了闭包,有时候我自己使用了闭包却不自知。最近我参加了一个讲座,在那儿终于有人给我解释清楚了。本文中我也将尝试用他们的方法来解释闭包。

在开始之前

在理解闭包之前,需要先理解一些概念,执行上下文就是其中的一个。

有篇文章很好地解释了执行上下文,以下内容引用自这篇文章:

在运行JavaScript代码时,它的运行环境是非常重要的,运行环境可能是如下几种中的一种:

全局代码——首次执行代码的默认环境。

函数代码——每当执行流程进入函数体时。

(...)

(...),我们将执行上下文定义当前代码的执行环境或作用域。

换句话说,当我们启动程序时,我们从全局执行上下文开始。我们在全局执行上下文中声明一些变量,这些变量为全局变量。当程序调用函数时,会发生以下几个步骤:

JavaScript创建一个新的本地执行上下文。

本地执行上下文将拥有自己的变量集。

新的执行上下文被抛到执行栈上。我们可以将执行栈视为一种用于跟踪程序执行位置的机制。

函数会在遇到return语句或结束括号}时结束执行,并发生以下情况:

本地执行上下文从执行栈中跳出。

函数将返回值发送给调用上下文。调用上下文是调用此函数的执行上下文,它可以是全局执行上下文或另一个本地执行上下文。调用上下文将负责处理返回值,返回值可以是对象、数组、函数、布尔值或其他任何东西。如果函数没有return语句,则返回undefined。

本地执行上下文被销毁,这个很重要。在本地执行上下文中声明的所有变量都将被删除,它们不再可用,这就是为什么它们被称为局部变量。

一个很基础的例子

在开始进入闭包之前,让我们看一下下面这段代码。

1: let a = 3 2: function addTwo(x) { 3: let ret = x + 2 4: return ret 5: } 6: let b = addTwo(a) 7: console.log(b)

为了理解JavaScript引擎的工作原理,让我们详细介绍一下。

在第1行,我们在全局执行上下文中声明一个新变量a,并将它的值赋为数字3。

在第2行到第5行,我们在全局执行上下文中声明了一个名为addTwo的新变量,并为其分配了一个函数定义,{}之间的内容被分配给了addTwo。函数内部的代码不会被执行,只是存储在变量中以备将来使用。

第6行,我们在全局执行上下文中声明了一个新变量,并将其标记为b。声明变量后,它的值为undefined。

接下来,仍然是第6行,我们看到了一个赋值运算符。我们准备为变量b分配一个新值。接下来,我们看到一个被调用的函数。当你看到一个变量后面跟着圆括号(...)时,就表示在调用一个函数。从函数返回的任何内容都将被分配给变量b。

但首先我们需要调用被标记为addTwo的函数。JavaScript将在其全局执行上下文内存中查找名为addTwo的变量。它找到了,也就是在步骤2(或第2-5行)中定义的那个。变量addTwo包含了一个函数定义。请注意,变量a被作为参数传递给该函数。JavaScript在其全局执行上下文内存中搜索变量a,找到它,发现它的值为3,然后将数值3作为参数传递给该函数。准备执行该函数。

现在切换执行上下文,创建了一个新的本地执行上下文,我们将其命名为“addTwo执行上下文”。执行上下文被推送到调用栈。我们在本地执行上下文中做的第一件事是什么?

你可能会想说,“在本地执行上下文中声明了一个新的变量ret”。但其实不是这样的,我们首先需要查看函数的参数。在本地执行上下文中声明了一个新变量x,又因为3被作为参数传递进来,所以变量x被赋值为3。

下一步:在本地执行上下文中声明新的变量ret,其值设置为undefined。(第3行)

仍然是第3行,需要执行一个加法运算。首先,我们需要x的值,JavaScript会尝试查找变量x,它首先查看本地执行上下文。它找到了,值为3。第二个操作数是数值2,加法的结果(5)被赋给变量ret。

第4行,我们返回变量ret的内容。在本地执行上下文中进行另一个查找。ret包含值5。函数返回数值5,函数结束执行。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/c447d03ec21c8cafb2e1d8273e639831.html