Les fermetures JavaScript par rapport aux fonctions anonymes

selon la définition de closure :

Une "fermeture" est une expression (généralement une fonction) qui peuvent avoir des variables libres avec une environnement qui lie les variables (qui "ferme" de l'expression).

vous utilisez closure si vous définissez une fonction qui utilise une variable qui est définie en dehors de la fonction. (ce que nous appelons la variable a variable libre ).

Ils utilisent tous closure (même dans le 1er exemple).

en un mot fermetures Javascript permettent une fonction à accéder à une variable qui est déclaré dans une fonction lexicale-parent .

voyons une explication plus détaillée. Pour comprendre les fermetures, il est important de comprendre comment JavaScript scope les variables.

Scopes

dans les portées JavaScript sont définis avec des fonctions. Chaque fonction définit une nouvelle portée.

prenons l'exemple suivant:

function f()
{//begin of scope f
  var foo='hello'; //foo is declared in scope f
  for(var i=0;i<2;i++){//i is declared in scope f
     //the for loop is not a function, therefore we are still in scope f
     var bar = 'Am I accessible?';//bar is declared in scope f
     console.log(foo);
  }
  console.log(i);
  console.log(bar);
}//end of scope f

l'appel de f imprime

hello
hello
2
Am I Accessible?

considérons maintenant le cas où nous avons une fonction g définie dans une autre fonction f .

function f()
{//begin of scope f
  function g()
  {//being of scope g
    /*...*/
  }//end of scope g
  /*...*/
}//end of scope f

nous appellerons f le lexical parent de g . Comme expliqué avant nous avons maintenant 2 portée; la portée f et la portée g .

mais une portée est "dans" l'autre portée, donc la portée de la fonction enfant fait-elle partie de la portée de la fonction parent? Que se passe-t-il avec les variables déclarées dans la portée de la fonction parent; pourrai-je y accéder à partir de la portée de la fonction enfant? C'est exactement là que les fermetures interviennent.

fermetures

In JavaScript la fonction g peut non seulement accéder à toutes les variables déclarées dans le champ d'application g , mais aussi accéder à toutes les variables déclarées dans le champ d'application de la fonction mère f .

Considérez ce qui suit;

function f()//lexical parent function
{//begin of scope f
  var foo='hello'; //foo declared in scope f
  function g()
  {//being of scope g
    var bar='bla'; //bar declared in scope g
    console.log(foo);
  }//end of scope g
  g();
  console.log(bar);
}//end of scope f

l'appel de f imprime

hello
undefined

regardons la ligne console.log(foo); . À ce point nous sommes dans la portée g et nous essayons d'accéder à la variable foo qui est déclaré dans le champ d'application f . Mais comme indiqué avant nous pouvons accéder à n'importe quelle variable déclarée dans une fonction de parent lexical qui est le cas ici; g est le parent lexical de f . C'est pourquoi hello est imprimé.

Regardons maintenant la ligne console.log(bar); . À ce stade, nous sommes dans la portée f et nous essayons d'accéder à la variable bar qui est déclarée dans la portée g . bar n'est pas déclarée dans le champ d'application actuel et le la fonction g n'est pas le parent de f , donc bar est non défini

en fait, nous pouvons également accéder aux variables déclarées dans le cadre d'une fonction lexicale" grand parent". Par conséquent, s'il y aurait une fonction h définie dans la fonction g

function f()
{//begin of scope f
  function g()
  {//being of scope g
    function h()
    {//being of scope h
      /*...*/
    }//end of scope h
    /*...*/
  }//end of scope g
  /*...*/
}//end of scope f

puis h seraient en mesure d'accéder à toutes les variables déclarées dans le champ d'application de la fonction h , g , et f . Cela est fait avec fermetures . En JavaScript fermetures nous permet d'accéder à n'importe quelle variable déclarée dans la fonction lexical parent, dans la fonction lexical grand parent, dans la fonction lexical grand-grand parent, etc. Cela peut être considéré comme une chaîne de portée ; scope of current function -> scope of lexical parent function -> scope of lexical grand parent function -> ... jusqu'à la dernière fonction parent qui n'a pas de parent lexical.

L'objet fenêtre

en fait la chaîne ne s'arrête pas à la dernière fonction parent. Il y a une autre portée spéciale: la portée globale . Chaque variable non déclarée dans une fonction est considérée comme étant déclaré dans la portée globale. La portée globale a deux spécialités;

• toute variable déclarée dans le champ d'Application global est accessible partout
• les variables déclarées dans le champ d'Application global correspondent aux propriétés de l'objet window .

il y a donc exactement deux façons de déclarer une variable foo dans la portée globale; soit en ne la déclarant pas dans une fonction, soit en définissant la propriété foo de l'objet fenêtre.

les deux tentatives utilisent des fermetures

Maintenant que vous avez lu une explication plus détaillée il peut maintenant être évident que les deux solutions utilisent des fermetures. Mais pour être sûr, faisons une preuve.

créons un nouveau langage de programmation; JavaScript-No-Closure. Comme son nom l'indique, JavaScript-No-Closure est identique à JavaScript sauf qu'il ne supporte pas les fermetures.

en d'autres termes;

var foo = 'hello';
function f(){console.log(foo)};
f();
//JavaScript-No-Closure prints undefined
//JavaSript prints hello

très bien, voyons ce qui se passe avec la première solution avec JavaScript-No-Closure;

for(var i = 0; i < 10; i++) {
  (function(){
    var i2 = i;
    setTimeout(function(){
        console.log(i2); //i2 is undefined in JavaScript-No-Closure 
    }, 1000)
  })();
}

par conséquent, ce sera imprimé undefined 10 fois en JavaScript-No-Closure.

donc la première solution utilise la fermeture.

regardons la seconde solution;

for(var i = 0; i < 10; i++) {
  setTimeout((function(i2){
    return function() {
        console.log(i2); //i2 is undefined in JavaScript-No-Closure
    }
  })(i), 1000);
}

par conséquent, ce sera imprimé undefined 10 fois en JavaScript-No-Closure.

les deux solutions utilisent des fermetures.

Edit: il est supposé que ces 3 codes les bribes ne sont pas définies dans la portée globale. Dans le cas contraire, les variables foo et i seraient liées à l'objet window et donc accessibles via l'objet window en JavaScript et JavaScript-No-Closure.

Je n'ai jamais été heureux de la façon dont quelqu'un explique cela.

la clé pour comprendre les fermetures est de comprendre ce que serait JS sans fermetures.

sans fermetures, cela lancerait une erreur

function outerFunc(){
    var outerVar = 'an outerFunc var';
    return function(){
        alert(outerVar);
    }
}

outerFunc()(); //returns inner function and fires it

une fois que outerFunc est revenu dans une version JavaScript imaginaire désactivée, la référence à outerVar serait des déchets ramassés et partis ne laissant rien ici pour l'intérieur func pour référence.

Les fermetures

sont essentiellement les règles spéciales qui interviennent et permettent à ces variables d'exister lorsqu'une fonction interne renvoie aux variables d'une fonction externe. Avec les fermetures, les var référencées sont maintenues même après que la fonction externe est terminée ou "fermée" si cela vous aide à vous souvenir du point.

même avec les fermetures, le cycle de vie des voitures locales dans une fonction sans fonctions intérieures qui se réfère à ses habitants fonctionne comme dans une version sans fermeture. Lorsque la fonction est terminée, les habitants de ces ordures.

une fois que vous avez une référence dans une func intérieure à un var extérieur, cependant c'est comme un chambranle de porte est mis dans le chemin de la collecte des ordures pour ces vars référencés.

une façon peut-être plus précise de regarder les fermetures, est que la fonction interne utilise essentiellement la portée interne comme sa propre foudnation de portée.

mais le contexte référencé est en fait, persistant, pas comme un instantané. mise à feu répétée d'une fonction interne retournée qui continue à incrémenter et à enregistrer la var locale d'une fonction externe va continuer à alerter des valeurs plus élevées.

function outerFunc(){
    var incrementMe = 0;
    return function(){ incrementMe++; console.log(incrementMe); }
}
var inc = outerFunc();
inc(); //logs 1
inc(); //logs 2

vous utilisez tous les deux des fermetures.

je vais avec le définition Wikipedia ici:

en informatique, une fermeture (également une fermeture ou une fonction lexicale) la fermeture est une fonction ou une référence à une fonction avec un environnement de référence-un tableau stockant une référence à chacun des variables non locales (également appelées variables libres) de cette fonction. Une fermeture-contrairement à une simple fonction pointeur-permet à une fonction d'accéder ces variables non locales, même lorsqu'elles sont invoquées en dehors de leur contexte immédiat portée lexicale.

la tentative de votre ami utilise clairement la variable i , qui n'est pas locale, en prenant sa valeur et en faisant une copie pour stocker dans le local i2 .

votre propre tentative passe i (qui au site d'appel est dans la portée) à une fonction anonyme comme un argument. Ce n'est pas une fermeture jusqu'à présent, mais ensuite cette fonction renvoie une autre fonction qui renvoie la même i2 . Comme à l'intérieur de la fonction anonyme interne i2 n'est pas un local, cela crée une fermeture.

vous et votre ami utilisez tous les deux des fermetures:

une fermeture est un type particulier d'objet qui combine deux choses: une fonction, et l'environnement dans lequel cette fonction a été créée. L'environnement est constitué de toutes les variables locales qui étaient présentes au moment où la fermeture a été créée.

MDN: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures

dans la fonction de code de votre ami function(){ console.log(i2); } défini à l'intérieur de la fermeture de la fonction anonyme function(){ var i2 = i; ... et peut lire / écrire la variable locale i2 .

dans votre fonction de code function(){ console.log(i2); } défini à l'intérieur fermeture de la fonction function(i2){ return ... et peut lire / écrire valeur locale i2 (déclaré dans ce cas comme paramètre).

dans les deux cas Fonction function(){ console.log(i2); } alors passé en setTimeout .

un autre équivalent (mais avec moins d'utilisation de la mémoire) est:

function fGenerator(i2){
    return function(){
        console.log(i2);
    }
}
for(var i = 0; i < 10; i++) {
    setTimeout(fGenerator(i), 1000);
}

fermeture

une fermeture n'est pas une fonction, ni une expression. Il doit être considéré comme une sorte de "snapshot" à partir des variables utilisées en dehors du champ de fonctions et utilisées à l'intérieur de la fonction. Grammaticalement, on devrait dire: "prenez la fermeture de la variable.

Encore une fois, en d'autres termes: Une fermeture est une copie du contexte de variables sur lesquelles la fonction dépend.

une fois de plus (naïf): Une fermeture est d'avoir accès à des variables qui ne sont pas passé comme paramètre.

gardez à l'esprit que ces concepts fonctionnels dépendent fortement du langage / environnement de programmation que vous utilisez. En JavaScript, la fermeture dépend de la portée lexicale (ce qui est vrai dans la plupart des langues c).

donc, retourner une fonction revient le plus souvent à retourner une fonction anonyme / sans nom. Lorsque les variables d'accès de la fonction, pas passé comme paramètre, et à l'intérieur sa portée (lexicale), une clôture a été prise.

donc, concernant vos exemples:

// 1
for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i); // closure, only when loop finishes within 1000 ms,
    }, 1000);           // i = 10 for all functions
}
// 2
for(var i = 0; i < 10; i++) {
    (function(){
        var i2 = i; // closure of i (lexical scope: for-loop)
        setTimeout(function(){
            console.log(i2); // closure of i2 (lexical scope:outer function)
        }, 1000)
    })();
}
// 3
for(var i = 0; i < 10; i++) {
    setTimeout((function(i2){
        return function() {
            console.log(i2); // closure of i2 (outer scope)

        }
    })(i), 1000); // param access i (no closure)
}

tous utilisent des fermetures. Ne confondez pas le point d'exécution avec les fermetures. Si l' "instantané" des fermetures est pris au mauvais moment, les valeurs peuvent être inattendues, mais certainement une fermeture est prise!

regardons dans les deux sens:

(function(){
    var i2 = i;
    setTimeout(function(){
        console.log(i2);
    }, 1000)
})();

déclare et exécute immédiatement une fonction anonyme qui exécute setTimeout() dans son propre contexte. La valeur actuelle de i est conservée en faisant une copie dans i2 d'abord; cela fonctionne en raison de l'exécution immédiate.

setTimeout((function(i2){
    return function() {
        console.log(i2);
    }
})(i), 1000);

déclare un contexte d'exécution pour la fonction interne par lequel la valeur actuelle de i est conservée dans i2 ; cette approche utilise également l'exécution immédiate pour préserver la valeur.

Important

il faut mentionner que la sémantique de run N'est pas la même entre les deux approches; votre fonction interne passe à setTimeout() alors que sa fonction interne appelle setTimeout() elle-même.

envelopper les deux codes dans un autre setTimeout() ne prouve pas que seule la seconde approche utilise des fermetures, il n'y a tout simplement pas la même chose pour commencer.

Conclusion

les deux méthodes utilisent des fermetures, de sorte qu'il se résume à un goût personnel; la deuxième approche est plus facile de" se déplacer " ou de généraliser.

j'ai écrit ceci il y a un certain temps pour me rappeler ce qu'est une fermeture et comment elle fonctionne dans JS.

Une fermeture est une fonction qui, lorsqu'elle est appelée, utilise l'étendue dans laquelle elle a été déclarée, et non pas le domaine dans lequel il a été appelé. Dans javaScript, toutes les fonctions se comportent comme ceci. Les valeurs variables dans une portée persistent tant qu'il y a une fonction qui les indique. L'exception à la règle est "il", qui se réfère à l'objet sur lequel la fonction est à l'intérieur lorsqu'il est appelé.

var z = 1;
function x(){
    var z = 2; 
    y(function(){
      alert(z);
    });
}
function y(f){
    var z = 3;
    f();
}
x(); //alerts '2' 

après une inspection minutieuse, on dirait que vous utilisez la fermeture.

dans le cas de votre ami, i est accessible à l'intérieur de la fonction anonyme 1 et i2 est accessible à l'intérieur de la fonction anonyme 2 où le console.log est présent.

dans votre cas, vous accédez à i2 dans la fonction anonyme où console.log est présent. Ajouter une déclaration debugger; avant console.log et dans les outils de développement chrome sous " Scope variables" indique la portée de la variable.

considérez ce qui suit. Cela crée et recrée une fonction f qui se ferme sur i , mais des fonctions différentes!:

i=100;

f=function(i){return function(){return ++i}}(0);
alert([f,f(),f(),f(),f(),f(),f(),f(),f(),f(),f()].join('\n\n'));

f=function(i){return new Function('return ++i')}(0);        /*  function declarations ~= expressions! */
alert([f,f(),f(),f(),f(),f(),f(),f(),f(),f(),f()].join('\n\n'));

alors que ce qui suit se ferme sur "une" fonction "elle-même "

( eux-mêmes! l'extrait suivant utilise un seul référent f )

for(var i = 0; i < 10; i++) {
    setTimeout( new Function('console.log('+i+')'),  1000 );
}

ou, pour être plus explicite:

for(var i = 0; i < 10; i++) {
    console.log(    f = new Function( 'console.log('+i+')' )    );
    setTimeout( f,  1000 );
}

NB. la dernière définition de f est function(){ console.log(9) } avant 0 est imprimée.

mise en garde! La fermeture concept peut être une contrainte à la distraction de l'essence de la programmation élémentaire:

for(var i = 0; i < 10; i++) {     setTimeout( 'console.log('+i+')',  1000 );      }

x-réf.:

comment fonctionnent les fermetures JavaScript?

Explication Des Fermetures Javascript

est-ce qu'une fermeture (JS) nécessite une fonction à l'intérieur d'une fonction

comment comprendre les fermetures en Javascript?

Javascript variable locale et globale confusion

j'aimerais partager mon exemple et une explication au sujet des fermetures. J'ai fait un exemple python, et deux figures pour montrer les états de la pile.

def maker(a, b, n):
    margin_top = 2
    padding = 4
    def message(msg):
        print('\n’ * margin_top, a * n, 
            ' ‘ * padding, msg, ' ‘ * padding, b * n)
    return message

f = maker('*', '#', 5)
g = maker('', '♥’, 3)
…
f('hello')
g(‘good bye!')

La sortie de ce code serait comme suit:

*****      hello      #####

      good bye!    ♥♥♥

voici deux figures pour montrer les piles et la fermeture attachée à l'objet de fonction.

lorsque la fonction est retournée par le fabricant

lorsque la fonction est appelée plus tard

lorsque la fonction est appelée à travers un paramètre ou une variable non locale, le code a besoin de liaisons de variables locales telles que margin_top, padding ainsi que a, b, N. Afin de s'assurer que le code de fonction fonctionne, le cadre de pile de la fonction maker qui a disparu il y a longtemps devrait être accessible, ce qui est sauvegardé dans la fermeture que nous pouvons trouver avec l'objet de message de fonction.