JavaScript闭包的实例

例子1

● 先看第一个简单的例子

let f;
const g = function () {
  const a = 23;
  f = function () {
    console.log(a * 2);
  };
};

g();
f();

在这个代码示例中，首先定义了一个全局变量 f 和一个函数表达式 g。在函数 g 中，定义了一个局部变量 a 并赋值为 23，然后将一个新的函数赋值给全局变量 f。这个新函数打印出变量 a 的两倍值。
在调用 g() 函数后，内部的函数赋值给了全局变量 f。接着调用 f() 函数时，它会执行之前在 g() 函数中定义的函数，并打印出 a 的两倍值。由于闭包的特性，内部函数可以访问并使用外部函数的变量，即使外部函数已经执行完毕。因此，在这个例子中，调用 f() 函数时可以正确地打印出 23 * 2 = 46。

● 现在，再将例子添加一个闭包的案例再次验证

let f;
const g = function () {
  const a = 23;
  f = function () {
    console.log(a * 2);
  };
};

const h = function () {
  const b = 777;
  f = function () {
    console.log(b * 2);
  };
};

g();
f();
h();
f();

例子2

const boardPassengers = function (n, wait) {
  const perGroup = n / 3;

  setTimeout(function () {
    console.log(`We are now boarding all ${n} passengers`);
    console.log(`There are 3 groups, each with ${perGroup} passengers`);
  }, wait * 1000);

  console.log(`Will start boarding in ${wait} seconds`);
};

boardPassengers(180, 3);

这段代码定义了一个名为 boardPassengers 的函数，它接受两个参数：乘客人数 n 和等待时间 wait（单位为秒）。函数内部先计算出每组乘客的人数 perGroup，然后利用 setTimeout 函数在等待一定时间后打印出登机通知信息。
在调用 boardPassengers(180, 3) 函数时，会先执行 console.log 打印出“Will start boarding in 3 seconds”这句话，然后等待 3 秒后再执行 setTimeout 中的函数。这个函数打印出“ We are now boarding all 180 passengers”和“There are 3 groups, each with 60 passengers”这两句话。其中第一句话表示所有的乘客现在可以开始登机了，第二句话表示乘客被分为了三组，每组有 60 人。
需要注意的是，setTimeout 函数并不会阻塞程序的执行，而是将回调函数放到 JavaScript 的事件队列中等待执行。因此，在调用 boardPassengers 函数后，程序会继续向下执行，直到等待时间结束后才会执行 setTimeout 中的函数。