掌握闭包：深入理解函数作用域之奥秘

见解分享

2024-02-11 22:58:07

什么是闭包？

闭包，顾名思义，是指一个函数能访问另一个函数作用域中的变量。在 JavaScript 中，闭包的形成基于词法作用域和动态作用域的概念。

1. 词法作用域

词法作用域是指函数的变量环境在函数定义时就已确定，并且在函数执行期间保持不变。当一个函数被定义时，它会创建自己的词法作用域。在这个作用域中，函数可以访问其定义时所在的变量环境中的所有变量，包括父函数的变量。

2. 动态作用域

动态作用域是指函数的变量环境在函数执行时才确定。当一个函数被调用时，它会创建自己的动态作用域。在这个作用域中，函数只能访问其自身定义的变量，以及它的父函数执行时的变量。

如何形成闭包？

闭包的形成有赖于词法作用域和动态作用域之间的互动。当一个内部函数被定义时，它会在其词法作用域中捕获其父函数执行时的变量。即使父函数执行结束后，内部函数依然能够访问这些变量，即使父函数执行结束。

闭包的应用

闭包在 JavaScript 中有很多应用，包括：

延迟变量求值
保持状态
创建私有变量
模拟对象

闭包的实现

在 JavaScript 中，闭包可以通过两种方式实现：

使用立即执行函数表达式 (IIFE)
使用嵌套函数

1. 使用立即执行函数表达式 (IIFE)

IIFE 是一个匿名函数，它在被定义的同时立即执行。IIFE 的语法如下：

(function() {
  // 函数体
})();

IIFE 中的函数体在函数定义时立即执行，因此它可以访问父函数执行时的变量。

2. 使用嵌套函数

嵌套函数是指在一个函数内部定义的另一个函数。嵌套函数可以访问其外层函数执行时的变量。嵌套函数的语法如下：

function outer() {
  var a = 1;

  function inner() {
    console.log(a);
  }

  return inner;
}

var inner = outer();
inner(); // 1

在上面的代码中，函数 inner() 是一个嵌套函数，它可以访问函数 outer() 执行时的变量 a。

闭包的实例

以下是一些闭包的实例：

延迟变量求值

var a = 1;

function outer() {
  var b = 2;

  return function() {
    console.log(a + b);
  };
}

var inner = outer();
inner(); // 3

在上面的代码中，函数 inner() 是一个闭包，它捕获了函数 outer() 执行时的变量 a 和 b。即使函数 outer() 执行结束后，函数 inner() 依然能够访问变量 a 和 b。

保持状态

function counter() {
  var count = 0;

  return function() {
    count++;
    return count;
  };
}

var counter1 = counter();
var counter2 = counter();

console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter2()); // 1
console.log(counter2()); // 2

在上面的代码中，函数 counter() 返回一个闭包，这个闭包捕获了变量 count。每次闭包被调用时，变量 count 都会递增。因此，函数 counter1() 和函数 counter2() 可以分别保持自己的状态。

创建私有变量

function createCounter() {
  var count = 0;

  return {
    increment: function() {
      count++;
    },

    getCount: function() {
      return count;
    }
  };
}

var counter1 = createCounter();
var counter2 = createCounter();

console.log(counter1.getCount()); // 0
counter1.increment();
console.log(counter1.getCount()); // 1
console.log(counter2.getCount()); // 0

在上面的代码中，函数 createCounter() 返回一个对象，这个对象包含两个方法：increment() 和 getCount()。这两个方法都访问了私有变量 count。因此，函数 counter1() 和函数 counter2() 无法直接访问私有变量 count，只能通过这两个方法来操作私有变量。