php中文网

揭秘 JS 中的闭包

php中文网

  • 需要掌握才能理解语言的复杂细节。
  • 不像我们创建数组或函数那样创建。
  • 一个 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中文网其它相关文章!