Comment fonctionnent les fermetures JavaScript ?

Question

Comment expliquer les fermetures à quelqu'un qui comprend le concept des fermetures JavaScript (telles que les fonctions, les variables, etc.), mais ne comprend pas les fermetures elles-mêmes ?

J'ai regardé les exemples de schémas donnés sur Wikipédia, mais malheureusement, ils n'ont pas aidé.

Answer 1

En JavaScript, chaque fonction entretient un lien vers son environnement lexical externe. L'environnement lexical est une carte de tous les noms (tels que les variables, les paramètres) et leurs valeurs dans une portée.

Ainsi, chaque fois que vous voyez le mot-clé function, le code à l'intérieur de cette fonction peut accéder aux variables déclarées en dehors de la fonction.

function foo(x) {
  var tmp = 3;

  function bar(y) {
    console.log(x + y + (++tmp)); // 将输出 16
  }

  bar(10);
}

foo(2);

Cela affichera l'environnement lexical de 16，因为函数 bar 闭包了参数 x 和变量 tmp，它们都存在于外部函数 foo.

Les environnements lexicaux de la fonction

bar 与其与函数 foo sont liés entre eux pour former une fermeture.

La fonction

n'a pas besoin de revenir pour créer une fermeture. Par déclaration seule, chaque fonction enferme son environnement lexical englobant, formant une fermeture.

function foo(x) {
  var tmp = 3;

  return function (y) {
    console.log(x + y + (++tmp)); // 也将输出 16
  }
}

var bar = foo(2);
bar(10); // 16
bar(10); // 17

Les fonctions ci-dessus afficheront également 16 car bar 中的代码仍然可以引用参数 x 和变量 tmp, même si elles ne sont plus directement concernées.

Cependant, depuis tmp 仍然存在于 bar 的闭包中，它可以被递增。每次调用 bar, tout cela va être incrémenté.

L'exemple le plus simple de fermeture est :

var a = 10;

function test() {
  console.log(a); // 将输出 10
  console.log(b); // 将输出 6
}
var b = 6;
test();

Lorsqu'une fonction JavaScript est appelée, un nouveau contexte d'exécution est créé ec。除了函数参数和目标对象之外，该执行上下文还接收到调用执行上下文的词法环境的链接，这意味着在外部词法环境中声明的变量（在上面的示例中，即 a 和 b）可以从 ec et y est accessible.

Chaque fonction crée une fermeture car chaque fonction a un lien avec son environnement lexical externe.

Veuillez noter que ce qui est visible dans la fermeture est la variable elle-même, pas la copie.

Answer 2

Une fermeture est une association de :

1. Une fonction et
2. Une référence au périmètre externe (environnement lexical) de la fonction

L'environnement lexical fait partie de chaque contexte d'exécution (stack frame) et est un mappage entre les identifiants (c'est-à-dire les noms de variables locales) et les valeurs.

Chaque fonction en JavaScript conserve une référence à son environnement lexical externe. Cette référence permet de configurer le contexte d'exécution créé lors de l'appel de la fonction. Cette référence permet au code à l'intérieur de la fonction de « voir » les variables déclarées en dehors de la fonction, quels que soient le moment et l'endroit où la fonction est appelée.

Si une fonction est appelée depuis une autre fonction, une série de références à l'environnement lexical externe sont créées. Cette chaîne est appelée chaîne de portée.

Dans le code ci-dessous, inner与调用foo时创建的执行上下文的词法环境形成了闭包，闭包包含变量secret :

function foo() {
  const secret = Math.trunc(Math.random() * 100)
  return function inner() {
    console.log(`The secret number is ${secret}.`)
  }
}
const f = foo() // 无法直接从外部访问`secret`
f() // 检索`secret`的唯一方法是调用`f`