让前端飞JavaScriptjs主要技术文章

我从来不理解JavaScript闭包，直到有人这样向我解释它..

2019-02-12  本文已影响2898人  Fundebug
js_closure.png

摘要： 理解JS闭包。

Fundebug经授权转载，版权归原作者所有。

正如标题所述，JavaScript闭包对我来说一直有点神秘,看过很多闭包的文章，在工作使用过闭包，有时甚至在项目中使用闭包，但我确实是这是在使用闭包的知识。

最近看国外的一些文章，终于，有人用于一种让我明白方式对闭包进行了解释，我将在本文中尝试使用这种方法来解释闭包。

准备

在理解闭包之前，有个重要的概念需要先了解一下，就是 js 执行上下文。

这篇文章是执行上下文 很不错的入门教程，文章中提到：

当代码在JavaScript中运行时，执行代码的环境非常重要，并将概括为以下几点：

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

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

(…) —— 我们当作 执行上下文 是当前代码执行的一个环境与范围。

换句话说，当我们启动程序时，我们从全局执行上下文中开始。一些变量是在全局执行上下文中声明的。我们称之为全局变量。当程序调用一个函数时，会发生什么?

以下几个步骤：

函数什么时候结束?当它遇到一个return语句或一个结束括号}。

当一个函数结束时，会发生以下情况:

基础的例子

在讨论闭包之前，让我们看一下下面的代码：

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引擎是如何工作的，让我们详细分析一下：

对于一个非常简单的程序，这是一个非常冗长的解释，我们甚至还没有涉及闭包。但肯定会涉及的，不过首先我们得绕一两个弯。

词法作用域（Lexical scope）

我们需要理解词法作用域的一些知识。请看下面的例子：

1: let val1 = 2
2: function multiplyThis(n) {
3:   let ret = n * val1
4:   return ret
5: }
6: let multiplied = multiplyThis(6)
7: console.log('example of scope:', multiplied)

这里想说明，我们在函数执行上下文中有变量，在全局执行上下文中有变量。JavaScript的一个复杂之处在于它如何查找变量，如果在函数执行上下文中找不到变量，它将在调用上下文中寻找它，如果在它的调用上下文中没有找到，就一直往上一级，直到它在全局执行上下文中查找为止。(如果最后找不到，它就是 undefined)。

下面列出向个步骤来解释一下（如果你已经熟悉了，请跳过）：

在这个例子中，我们需要记住一个函数可以访问在它的调用上下文中定义的变量，这个就是词法作用域（Lexical scope）。

返回函数的函数

在第一个例子中，函数addTwo返回一个数字。请记住，函数可以返回任何东西。让我们看一个返回函数的函数示例，因为这对于理解闭包非常重要。看粟子：

 1: let val = 7
 2: function createAdder() {
 3:   function addNumbers(a, b) {
 4:     let ret = a + b
 5:     return ret
 6:   }
 7:   return addNumbers
 8: }
 9: let adder = createAdder()
10: let sum = adder(val, 8)
11: console.log('example of function returning a function: ', sum)

让我们回到分步分解：

码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

最后,一个闭包

看看下面的代码，并试着弄清楚会发生什么。

 1: function createCounter() {
 2:   let counter = 0
 3:   const myFunction = function() {
 4:     counter = counter + 1
 5:     return counter
 6:   }
 7:   return myFunction
 8: }
 9: const increment = createCounter()
10: const c1 = increment()
11: const c2 = increment()
12: const c3 = increment()
13: console.log('example increment', c1, c2, c3)

现在，我们已经从前两个示例中掌握了它的诀窍，让我们按照预期的方式快速执行它：

你自己试试，看看会发生什么。你会将注意到，它并不像从我上面的解释中所期望的那样记录1,1,1。而是记录1,2,3。这个是为什么?

不知怎么滴，increment函数记住了那个cunter的值。这是怎么回事?

counter是全局执行上下文的一部分吗?尝试 console.log(counter)，得到undefined的结果,显然不是这样的。

也许，当你调用increment时，它会以某种方式返回它创建的函数(createCounter)?这怎么可能呢?变量increment包含函数定义，而不是函数的来源，显然也不是这样的。

所以一定有另一种机制。闭包，我们终于找到了，丢失的那块。

它是这样工作的，无论何时声明新函数并将其赋值给变量，都要存储函数定义和闭包。闭包包含在函数创建时作用域中的所有变量，它类似于背包。函数定义附带一个小背包，它的包中存储了函数定义创建时作用域中的所有变量。

所以我们上面的解释都是错的，让我们再试一次，但是这次是正确的。

 1: function createCounter() {
 2:   let counter = 0
 3:   const myFunction = function() {
 4:     counter = counter + 1
 5:     return counter
 6:   }
 7:   return myFunction
 8: }
 9: const increment = createCounter()
10: const c1 = increment()
11: const c2 = increment()
12: const c3 = increment()
13: console.log('example increment', c1, c2, c3)

您可能会问，是否有任何函数具有闭包，甚至是在全局范围内创建的函数?答案是肯定的。在全局作用域中创建的函数创建闭包，但是由于这些函数是在全局作用域中创建的，所以它们可以访问全局作用域中的所有变量，闭包的概念并不重要。

当函数返回函数时，闭包的概念就变得更加重要了。返回的函数可以访问不属于全局作用域的变量，但它们仅存在于其闭包中。

闭包不是那么简单

有时候闭包在你甚至没有注意到它的时候就会出现，你可能已经看到了我们称为部分应用程序的示例，如下面的代码所示：

let c = 4
const addX = x => n => n + x
const addThree = addX(3)
let d = addThree(c)
console.log('example partial application', d)

如果箭头函数让您感到困惑，下面是同样效果：

let c = 4
function addX(x) {
  return function(n) {
     return n + x
  }
}
const addThree = addX(3)
let d = addThree(c)
console.log('example partial application', d)

我们声明一个能用加法函数addX，它接受一个参数(x)并返回另一个函数。返回的函数还接受一个参数并将其添加到变量x中。

变量x是闭包的一部分，当变量addThree在本地上下文中声明时，它被分配一个函数定义和一个闭包，闭包包含变量x。

所以当addThree被调用并执行时，它可以从闭包中访问变量x以及为参数传递变量n并返回两者的和 7。

总结

我将永远记住闭包的方法是通过背包的类比。当一个函数被创建并传递或从另一个函数返回时，它会携带一个背包。背包中是函数声明时作用域内的所有变量。

参考

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用！

image
上一篇下一篇

猜你喜欢

热点阅读