掌握 JavaScript 中的闭包：了解范围、封装和性能

关闭

定义

闭包是一项功能，允许函数访问在相同作用域级别（词法作用域）中声明的所有其他变量和函数。

• 闭包是一项功能，允许函数访问在相同作用域级别（词法作用域）中声明的所有其他变量和函数。
• 当一个函数在另一个函数（外部函数和内部函数）中定义时，就会创建闭包。内部函数将创建一个闭包，为该外部函数中创建的所有变量和函数提供对内部函数的访问。
• 闭包允许内部函数访问外部函数中声明的变量，即使在外部函数返回后也是如此。
• 我们必须正确处理内存，闭包会导致内存泄漏和更好的内存管理。

• JavaScript 中的闭包与 Java 中的私有方法具有类似的用途，允许您创建私有变量并封装功能。

  例子

  function outerFunction() {
      let outerVariable = 'I am from outer scope';
  
      function innerFunction() {
          console.log(outerVariable); // Accessing outerVariable from the outer scope
      }
  
      return innerFunction; // Return the inner function
  }
  
  const closureFunction = outerFunction(); // Call outerFunction, which returns innerFunction
  closureFunction(); // Outputs: I am from outer scope
  

  • 在上面的例子中我们调用内部函数只是因为它只是被返回。尽管我们可以访问outerVariable。
  • 让我们看另一个最好的例子

      function handleCount() {
      let count = 0;
  
      return {
          increment: () => {
                  count++;
                  return count;
          },
          decrement: () => {
                  count--;
                  return count;
          },
          getCount: () => {
                  return count;
          },
      };
  }
  
  const counter = handleCount();
  console.log(counter.increment()); // Outputs: 1
  console.log(counter.increment()); // Outputs: 2
  console.log(counter.getCount());  // Outputs: 2
  console.log(counter.decrement()); // Outputs: 1
  console.log(counter.getCount());  // Outputs: 1
  

  • 现在，每次我们调用增量、减量、getCount（而不是handleCount）时，都会启动，只有被调用的函数才会被执行，而且我们还可以访问其范围之外的变量。这称为闭包。

需要记住的要点

• 定义：闭包是一个保留对其词法作用域的访问的函数，即使该函数在该作用域之外执行也是如此。
• 作用域链：当一个函数在另一个函数中定义时，就会创建闭包。内部函数形成一个包含外部函数作用域的闭包。
• 访问变量：闭包允许内部函数访问外部函数中声明的变量，即使在外部函数返回后也是如此。
• 私有变量：闭包通常用于创建私有变量。这意味着变量可以在全局作用域中隐藏，只能通过闭包访问。
• 内存管理：闭包可以带来更好的内存效率，因为它们只保留执行所需的变量。
• 性能注意事项：虽然闭包功能强大，但如果管理不当，它们也可能导致内存泄漏，特别是在长期存在的对象或事件侦听器中。

使用案例

• 封装：创建私有数据或方法。
• 函数工厂：使用预设参数创建函数。
• 回调：用于异步编程（例如在事件处理程序或setTimeout中）。
• CSS：rem 和 em。 rem 源自根元素（html / body），但 em 源自其近父元素。

常见面试问题

• 什么是闭包，它是如何工作的？
• 你能解释一下闭包和普通函数之间的区别吗？
• 提供 JavaScript 中闭包的示例。
• JavaScript 中闭包的用例有哪些？
• 闭包如何导致内存泄漏，以及如何防止它们？

以上是掌握 JavaScript 中的闭包：了解范围、封装和性能的详细内容。更多信息请关注PHP中文网其他相关文章！