揭秘 JS 中的闭包

• 需要掌握才能理解语言的复杂细节。
• 不像我们创建数组或函数那样创建。
• 一个 fn 返回另一个存储在 LHS 变量中的 fn。

const secureBooking = function(){
  let passengerCount = 0;
  return function(){
    passengerCount++;
    console.log(`${passengerCount} passengers`);
  }
}

const booker = secureBooking();

booker();
booker();
booker();

• secureBooking fn 在全局范围内执行。
• 将在全局执行上下文上创建一个新的执行上下文。
• 每个执行上下文（EC）都有自己的变量环境及其所有变量。 'let PassengerCount = 0' 在此 EC 内定义。 它可以访问其父作用域的所有变量。
• 返回一个新的fn，并将其存储在booker中。
• 全局 EC 还将包含 booker 变量。
• 现在 secureBooking() 将从 EC 中删除并消失。 secureBooking EC 环境不再活跃。但仍然正在访问在创建 fn 时定义的 PassengerCount 变量。
• 不过，内部 fn 将能够访问外部 fn 内部定义的 PassengerCount 变量。这是由于关闭而发生的。
• 闭包使 fn 记住围绕 fn 或其 EC 的出生地定义的变量。
• booker 不是 fn，位于全局范围内。
• 现在执行booker();第一次将在调用堆栈上创建一个 EC，并具有自己的变量。
• fn 可以访问创建 fn 的执行上下文的变量环境。安全预订。因此，booker 将有权访问 secureBooking fn 变量环境中定义的变量。即使包含 fn 的 secureBooking fn 的 EC 已从调用堆栈中弹出，fn 的诞生地（即定义）与其周围变量环境的这种连接也称为闭包。
• 闭包：附加到 fn 的变量环境，与创建 fn 时的环境完全相同。
• 作用域链在闭包期间被保留，即使 EC 消失了，可变环境仍然以某种方式存在于引擎中。因此，我们说 booker fn 对父 fn 是封闭的，包括我们这里没有的父 fn 参数。
• 使用闭包，fn 不会失去与其出生地周围定义的变量的连接。
• 如果变量不在当前作用域内，JS 会在查找作用域链之前先检查闭包。假设如果有一个全局变量，即使这样，也会首先查找其闭包中定义的变量。
• 闭包优先于作用域链。
• 第一次运行 booker() 后，passengerCount 的值会增加，登录控制台，然后 booker 从调用堆栈中弹出。
• 执行移动到下一行，创建一个新的 EC，但闭包变量仍然存在。现有值增加并弹出 EC。
• 这个过程第三次重复。

概括

• Defn：闭包是创建 fn 的 EC 的封闭变量环境，即使在该 EC 消失之后也是如此。

• 此外，闭包允许 fn 访问其父 fn 的所有变量，即使在父 fn 返回之后也是如此。 fn 保留对其外部作用域的引用，从而始终保留作用域链。

• 闭包确保 fn 不会失去与 fn 诞生时存在的变量的连接。它就像一个 fn 随身携带的背包。这个背包具有创建 fn 的环境中存在的所有变量。

• 我们不必手动创建闭包。此外，我们甚至无法显式访问封闭变量。闭包不是有形的 JS 对象，即我们无法访问闭包并从中获取变量。它是 fn 的内部属性。要查看背包，“console.dir(booker);”
  [[Scope]] 将向您展示此 fn 调用的 VE。

• [[]] 表示它是一个内部属性，我们无法从代码中访问它。

• 我们总是不需要从另一个 fn 返回一个 fn 来创建闭包。在下面的示例中，变量“f”甚至没有在 fn 内定义，因为它在全局范围内。即使在 g() 完成其 EC 之后，它也能够访问“a”变量。 ‘a’现在在‘f’的背包里。
  

let f;

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


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

g();
f();
console.dir(f);

// f fn is reassigned using h fn. Hence, old closure value i.e 'a' will be replaced with new value 'b' which can be verified using console.dir().
h();
f();
console.dir(f);

• setTimeout(callbackFnToBeCalled, 延迟);
• 闭包变量比作用域链具有更高的优先级。

// Boarding Passengers using Closures
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);

以上是揭秘 JS 中的闭包的详细内容。更多信息请关注PHP中文网其他相关文章！