当前位置：首页 > article >正文

前端JavaScript篇之对闭包的理解

article 2024/11/19 8:31:28

对闭包的理解

闭包是指一个函数能够访问并操作其词法作用域（定义时所在的作用域）之外的变量的能力。它可以通过在一个函数内部创建另一个函数来实现。内部函数可以访问外部函数的局部变量、参数和其他内部函数，即使外部函数已经执行结束，这些变量仍然可以被内部函数引用。

用途

闭包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包，可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量。这种方法可以用来创建私有变量。

function outerFunction() {
  var privateVariable = 'I am a private variable'

  function innerFunction() {
    console.log(privateVariable) // 可以访问函数内部的变量
  }

  return innerFunction // 返回内部函数
}

var closure = outerFunction() // 创建闭包
closure() // 在外部访问函数内部变量，输出：I am a private variable

请添加图片描述

在上述代码中，我们定义了一个外部函数 outerFunction，它内部有一个私有变量 privateVariable。然后，我们在外部函数中定义了一个内部函数 innerFunction，内部函数可以访问和使用外部函数中的私有变量。最后，我们返回内部函数，并将其赋值给变量 closure。当我们调用 closure() 时，内部函数被执行，并输出了 privateVariable 的值。

闭包的第二个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中。因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。

function outerFunction() {
  var outerVariable = 'I am from outer function'

  function innerFunction() {
    console.log(outerVariable) // 访问已经运行结束的函数的变量
  }

  return innerFunction // 返回内部函数
}

var closure = outerFunction() // 创建闭包
closure() // 在外部访问已经运行结束的函数的变量，输出：I am from outer function

请添加图片描述

在上述代码中，我们定义了一个外部函数 outerFunction，它内部有一个变量 outerVariable。然后，我们在外部函数中定义了一个内部函数 innerFunction，内部函数可以访问和使用已经运行结束的函数的变量。最后，我们返回内部函数，并将其赋值给变量 closure。当我们调用 closure() 时，内部函数被执行，并输出了 outerVariable 的值。

综上所述，闭包的用途包括保护变量、记住状态、实现模块化、函数柯里化以及延迟执行和回调。通过合理地运用闭包，我们可以写出更加灵活、模块化和易于维护的JavaScript代码。

循环中使用闭包解决 var 定义函数的问题

当在循环中使用 var 关键字定义函数时，常常会遇到闭包问题。具体而言，闭包会共享同一个循环变量，导致函数在运行时使用的变量值不符合预期。为了解决这个问题，可以使用闭包和不同的解决方法。

以下是解决该问题的三种常见方法的详细解释和示例代码。

方法一：使用函数作用域和闭包

使用函数作用域和闭包的方法来解决循环中使用 var 定义函数的问题。具体操作是将函数定义在单独的作用域内，以创建一个新的闭包环境，使每个函数拥有独立的变量。

for (var i = 0; i < 5; i++) {
  ;(function () {
    var index = i // 创建新的变量，并将循环变量的值赋给它
    setTimeout(function () {
      console.log(index)
    }, 1000 * index)
  })()
}

请添加图片描述

在上述代码中，我们将匿名函数 (function() { ... })() 用于创建新的作用域。在这个作用域中，我们创建了一个新的变量 index，并将循环变量 i 的值赋给它。每次循环迭代都会创建一个独立的 index 变量，以避免共享循环变量导致的问题。

在闭包函数内部，我们使用 setTimeout 函数设置一个定时器，在延迟时间之后打印当前的 index 值。通过给定的延迟时间 1000 * index，我们可以按顺序输出 0 到 4 的值。

方法二：使用立即执行函数表达式和闭包

使用立即执行函数表达式（IIFE）和闭包来解决循环中使用 var 定义函数的问题。每次循环迭代时，都会创建一个新的闭包作用域，确保每个闭包函数拥有独立的变量。

for (var i = 0; i < 5; i++) {
  ;(function (index) {
    setTimeout(function () {
      console.log(index)
    }, 1000 * index)
  })(i)
}

在上述代码中，我们定义了一个立即执行的匿名函数 (function(index) { ... })(i)，并将循环变量 i 作为参数传递给该函数。通过这种方式，在每次循环迭代中，都会创建一个新的闭包作用域，并将 index 参数的值绑定到闭包内部。因此，每个闭包函数都引用着自己独立的 index 变量，避免了共享循环变量的问题。

方法三：使用 let 关键字声明循环变量
使用 let 关键字来声明循环变量。let 声明的变量具有块级作用域，在每次循环迭代时都会创建一个新的变量实例，从而避免了变量共享的问题。

以下是使用 let 声明循环变量解决循环中使用 var 定义函数的问题的示例代码：

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i)
  }, 1000 * i)
}

在上述代码中，我们使用 let 关键字来声明循环变量 i。由于每次循环迭代都会创建一个新的块级作用域，每个定时器回调函数都能够访问到自己独立的 i 变量，而不会受到外部循环的影响。

这三种方法都可以解决循环中使用 var 定义函数时的闭包问题。具体使用哪种方法取决于个人偏好和代码的情况。方法一适用于需要在闭包内部使用变量的复杂情况，而方法二和方法三更简洁明了，适用于简单的循环。

持续学习总结记录中，回顾一下上面的内容：
闭包是指函数可以访问其外部函数作用域中的变量，并且可以在其生命周期内保持对这些变量的引用。换句话说，闭包允许函数访问定义在自己外部的作用域中的变量，即使这些变量在外部函数执行完毕后仍然可以被访问和操作。
通俗地说，闭包就像是一个记忆力很好的函数，它可以记住并访问在它诞生时的环境中的东西。这意味着即使外部函数已经执行完毕，闭包仍然可以使用外部函数中的变量值。这种特性使得我们可以在JavaScript中实现很多有趣和灵活的编程技巧，比如私有变量、模块化等。
通过使用闭包，我们可以创建更加灵活和复用的函数，同时能够保护一些内部状态不被外部轻易篡改。但需要小心使用闭包，因为过度或不正确地使用闭包可能导致内存泄漏或意外的变量共享问题。

查看全文

http://www.kler.cn/a/231725.html