揭秘 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 Closuresconst 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 中的闭包的详细内容，更多请关注我的其它相关文章！