javascript之闭包四（演变为闭包）

前端娃娃
274 阅读6分钟

四、说说闭包

function createCounter() {
    let counter = 0
    const myFunction = function () {
        counter = counter + 1
        return counter
    }
    return myFunction
}
const increment = createCounter()
const c1 = increment()
const c2 = increment()
const c3 = increment()
console.log('example increment', c1, c2, c3)

现在让我们来看看这段代码将如何执行：

  1. 第 1-8 行，我们在全局执行上下文中创建了一个新变量 createCounter，它包含了一个函数定义。

  2. 第 9 行，我们在全局执行上下文中声明了一个名为 increment 的新变量。

  3. 第 9 行，我们调用 createCounter 函数并将其返回值赋给 increment 变量。

  4. 第 1-8 行，调用函数，创建新的本地执行上下文。

  5. 第 2 行，在本地执行上下文中，声明一个名为 counter 的新变量，并赋值为 0。

  6. 第 3-6 行，在本地执行上下文中声明名为 myFunction 的新变量。变量的内容是另一个函数定义，也就是第 4 行和第 5 行。

  7. 第 7 行，返回 myFunction 变量的内容。删除本地执行上下文，myFunction 和 counter 不再存在，控制权返回到调用上下文。

  8. 第 9 行，在调用上下文（全局执行上下文）中，createCounter 返回的值被赋给了 increment。变量 increment 现在包含了一个函数定义，也就是 createCounter 返回的函数定义。它不再被标记为 myFunction，但定义没有变化。在全局上下文中，它被标记为 increment。

  9. 第 10 行，声明一个新变量（c1）。

  10. 继续第 10 行，查找变量 increment，它是一个函数，然后调用它。它包含了之前返回的函数定义，也就是第 4-5 行所定义的内容。

  11. 创建新的执行上下文，没有参数，开始执行这个函数。

  12. 第 4 行，counter = counter + 1，在本地执行上下文中查找变量 counter。我们只是创建了上下文，并没有声明任何局部变量。在全局执行上下文中，没有标记为 counter 的变量。Javascript 将会执行 counter = undefined + 1，声明一个标记为 counter 的新局部变量，并为其指定数值 1，因为 undefined 其实被视为 0。

  13. 第 5 行，我们返回 counter 的值，也就是数值 1。我们销毁本地执行上下文和变量 conter。

  14. 第 10 行，返回值（1）被分配给 c1。

  15. 第 11 行，我们重复步骤 10-14，c2 也被赋值为 1。

  16. 第 12 行，我们重复步骤 10-14，c3 也被赋值为 1。

  17. 第 13 行，我们记录变量 c1、c2 和 c3 的值。

亲自尝试一下，看看会发生什么。你会注意到它并不像你预想地那样输出 1、1 和 1，而是输出了 1、2 和 3。为什么会这样？

increment 函数会记住 counter 的值，为什么会这样？

counter 是全局执行上下文的一部分吗？试试 console.log(counter)，你将得到 undefined，所以它不是。

所以，肯定存在另一种被我们忽略的机制——也就是闭包。

下面是它的工作原理。每当声明一个新函数并将其赋值给变量时，实际上是保存了函数定义和闭包。闭包包含了创建函数时声明的所有变量，就像一个背包一样——函数定义附带一个小背包。这个背包保存了创建函数时声明的所有变量。

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

function createCounter() {
    let counter = 0
    const myFunction = function () {
        counter = counter + 1
        return counter
    }
    return myFunction
}
const increment = createCounter()
const c1 = increment()
const c2 = increment()
const c3 = increment()
console.log('example increment', c1, c2, c3)

  1. 第 1-8 行，我们在全局执行上下文中创建了一个新变量 createCounter，它包含了一个函数定义，与上面相同。

  2. 第 9 行，我们在全局执行上下文中声明一个名为 increment 的新变量，与上面相同。

  3. 第 9 行，我们调用 createCounter 函数并将其返回值赋给 increment 变量，与上面相同。

  4. 第 1-8 行，调用函数，创建新的本地执行上下文，与上面相同。

  5. 第 2 行，在本地执行上下文中声明一个名为 counter 的新变量，并赋值为 0，与上面相同。

  6. 第 3-6 行，在本地执行上下文中声明名为 myFunction 的新变量。变量的内容是另一个函数的定义，即第 4 行和第 5 行所定义的内容。我们还创建了一个闭包并将其作为函数定义的一部分，闭包含包含函数作用域内的变量，在本例中为变量 counter（值为 0）。

  7. 第 7 行，返回 myFunction 变量的内容，删除本地执行上下文。myFunction 和 counter 不再存在，控制权返回到调用上下文。所以我们返回函数定义及其闭包，闭包中包含创建函数时声明的变量。

  8. 第 9 行，在调用上下文（全局执行上下文）中，createCounter 返回的值被赋给 increment。变量 increment 现在包含一个函数定义（和闭包），其中函数定义由 createCounter 返回。它不再被标记为 myFunction，但定义是一样的。在全局上下文中，它被称为 increment。

  9. 第 10 行，声明一个新变量（c1）。

  10. 第 10 行，查找变量 increment，它是一个函数，调用它，它包含之前返回的函数定义，也就是第 4-5 行所定义的内容（还有一个带变量的闭包）。

  11. 创建新的执行上下文，没有参数，开始执行这个函数。

  12. 第 4 行，counter = counter + 1。我们需要查找变量 counter。在查看本地或全局执行上下文之前，先让我们来看看闭包。请注意，闭包包含一个名为 counter 的变量，其值为 0。在第 4 行的表达式之后，它的值被设置为 1，然后再次保存在闭包中。闭包现在包含了值为 1 的变量 counter。

  13. 第 5 行，我们返回 counter 的值或数值 1，销毁本地执行上下文。

  14. 返回第 10 行，返回值（1）被分配给 c1。

  15. 第 11 行，我们重复步骤 10-14。这次，我们可以看到变量 counter 的值为 1，这个值是在第 4 行代码中设置的。它的值加 1，并在 increment 函数的闭包中存为 2。c2 被赋值为 2。

  16. 第 12 行，我们重复步骤 10-14，c3 被设为 3。

  17. 第 13 行，我们记录变量 c1、c2 和 c3 的内容。

所以现在我们了解闭包的工作原理。当声明一个函数时，它包含一个函数定义和一个闭包。闭包是函数创建时声明的变量的集合。

你可能会问，任何函数是否都有闭包，包括在全局范围内创建的函数？答案是肯定的。在全局范围中创建的函数也会创建一个闭包。但由于这些函数是在全局范围内创建的，因此它们可以访问全局范围内的所有变量，就无所谓闭包不闭包了。

当一个函数返回另一个函数时，才会真正涉及闭包。返回的函数可以访问仅存在于其闭包中的变量。

avatar
文章
阅读
粉丝