揭秘 JS 中的闭包

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