Explication détaillée des fermetures en JavaScript

Qu'est-ce qu'une fermeture

En JavaScript, la fermeture est un concept difficile à comprendre. La définition de la fermeture dans ECMAScript est la suivante : La fermeture fait référence à la représentation lexicale d'une fonction qui inclut des variables qui ne sont pas calculées. En d'autres termes, la fonction peut utiliser des variables définies en dehors de la fonction.

Vous sentez-vous encore plus confus après avoir lu cette définition ? Ne vous inquiétez pas, analysons-le.

• Une fermeture est une fonction

• Une fermeture peut utiliser des variables définies en dehors d'elle

• A la fermeture existe dans la portée dans laquelle la variable est définie

Cela semble un peu plus clair, mais que signifie utiliser une variable définie en dehors de celle-ci ? Regardons d'abord la portée de la variable ?

Portée de la variable

Les variables peuvent être divisées en variables globales et variables locales. La portée des variables globales est globale et les variables globales peuvent être utilisées n'importe où dans js. Utilisez le mot-clé var pour déclarer une variable dans une fonction. La variable à ce stade est une variable locale, sa portée est uniquement dans la fonction où la variable est déclarée, et la variable n'est pas accessible en dehors de la fonction.

var func = function(){
    var a = 'linxin';
    console.log(a);         
    // linxin}func();console.log(a);             
    // Uncaught ReferenceError: a is not defined

La portée est relativement simple. Nous n’entrerons pas dans les détails. Jetons un coup d’œil au cycle de vie variable, qui est étroitement lié aux fermetures.

Cycle de vie variable

Variables globales, le cycle de vie est permanent. Variables locales, lorsque l'appel de fonction qui définit la variable se termine, la variable sera recyclée et détruite par le mécanisme de garbage collection. Lorsque la fonction est à nouveau appelée, une nouvelle variable sera redéfinie.

var func = function(){
    var a = 'linxin';
    console.log(a);}func();

a est une variable locale. Une fois func appelée, a sera détruite.

var func = function(){
    var a = 'linxin';
    var func1 = function(){
        a += ' a';
        console.log(a);
    }
    return func1;}var func2 = func();func2();                    
    // linxin afunc2();                    
    // linxin a afunc2();                   
    // linxin a a a

On voit qu'après le premier appel à func2, la variable a dans func devient 'linxin a' sans être détruite. Parce que func1 forme une fermeture à ce moment-là, le cycle de vie de a continue.

Maintenant, la clôture est plus claire.

• Une fermeture est une fonction, comme la fonction func1 ci-dessus

• Une fermeture utilise des variables définies par d'autres fonctions afin qu'elles ne soient pas détruites . Par exemple, func1 ci-dessus appelle la variable a

• et la fermeture existe dans la portée où la variable est définie. Si la variable a existe dans la portée de func, alors func1 doit également exister. dans ce cadre.

Maintenant, on peut dire que la fermeture est celle qui satisfait à ces trois conditions.

Familiarisons-nous davantage avec les fermetures à travers un exemple simple et classique.

for (var i = 0; i < 4; i++) {
    setTimeout(function () {
        console.log(i)    
     }, 0)
}

On peut simplement penser que la console imprimera 0 1 2 3, mais en fait elle imprime 4 4 ​​4 4. Pourquoi ? Nous avons constaté que la fonction setTimeout est asynchrone. Au moment où la fonction est exécutée, la boucle for est terminée. La valeur de i à ce moment est 4, donc function() { console.log(i) } recherche la variable i et. ne peut en obtenir que 4.

Nous nous souvenons que dans l'exemple précédent, la fermeture enregistrait la valeur de la variable a, donc ici nous pouvons également utiliser la fermeture pour enregistrer 0 1 2 3.

for (var i = 0; i < 4; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i)        
        }, 0)   
     })(i)
 }

Quand i=0, passez 0 comme paramètre dans la fonction anonyme À ce moment, function(i){} est la valeur de i dans this. fonction anonyme.Il vaut 0. Lorsque setTimeout est exécuté, il parcourt la couche externe pour trouver i, puis il peut obtenir 0. En répétant ce cycle, vous pouvez obtenir le 0 1 2 3 souhaité.

Gestion de la mémoire

L'appel d'une variable locale dans une fermeture empêchera la variable locale d'être détruite dans le temps, ce qui équivaut à la variable globale qui occupera toujours la mémoire. Si vous devez récupérer la mémoire occupée par ces variables, vous pouvez définir manuellement les variables sur null.

Cependant, lors du processus d'utilisation des fermetures, il est plus facile de former des références circulaires entre les objets JavaScript et les objets DOM, ce qui peut provoquer des fuites de mémoire. En effet, dans le mécanisme de récupération de place du navigateur, si une référence circulaire est formée entre deux objets, ils ne peuvent pas être recyclés.

function func() {
    var test = document.getElementById('test');
    test.onclick = function () {
        console.log('hello world');
    }
    }

Dans l'exemple ci-dessus, une fermeture est créée à l'aide d'une fonction anonyme dans la fonction func. La variable test est un objet JavaScript qui fait référence à l'objet DOM avec l'identifiant de test. L'attribut onclick de l'objet DOM fait référence à la fermeture, et la fermeture peut appeler test, formant ainsi une référence circulaire, empêchant les deux objets de fonctionner. à recycler. Pour résoudre ce problème, définissez simplement la variable dans la référence circulaire sur null.

function func() {
    var test = document.getElementById('test');
    test.onclick = function () {
        console.log('hello world');
    }
    test = null;}

Si vous n'utilisez pas une fonction anonyme pour créer une fermeture dans la fonction func, mais faites plutôt référence à une fonction externe, il n'y aura pas de problème de référence circulaire.

function func() {
    var test = document.getElementById('test');
    test.onclick = funcTest;}function funcTest(){
    console.log('hello world');
 }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!