Analyse des fermetures JavaScript (avec code)

Le contenu de cet article concerne l'analyse des fermetures JavaScript (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Une fermeture est une fonction qui a accès à une variable dans le cadre d'une autre fonction. Une manière courante de créer une fermeture consiste à créer une fonction à l’intérieur d’une autre fonction. Avant de comprendre les fermetures, vous devez d'abord comprendre la portée des variables

Portée des variables : les variables globales et les variables locales
1 Les variables globales
sont directement définies dans le global. scope Les variables

var name='Fakin';
function getName(){
  alert(name)
}
getName()//'Fakin'

et les fonctions peuvent lire directement les variables globales

2. Les variables locales
sont des variables directement définies à l'intérieur de la fonction (JS n'avait pas de portée au niveau du bloc avant ES6)

function getName(){
  var name='Fakin';
}
alert(name)//undefined

Fermeture
Après avoir compris ces deux choses, jetons un œil à ce qu'est la fermeture !

Question 1 : Qu'est-ce qu'une fermeture ? Il y a beaucoup de choses mentionnées ci-dessus, mais je n'arrive pas à comprendre ?
Réponse : Ma compréhension personnelle de la fermeture est une fonction qui peut lire les variables internes d'autres fonctions

Question 2 : Comment utiliser les fermetures
Réponse : Créer une fonction à l'intérieur d'une fonction, et dans celle-ci function Référencez les variables de la fonction précédente, et enfin renvoyez simplement la fonction. N'est-ce pas très compliqué ? Voici un exemple

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

Dans l'exemple ci-dessus, f2 est la fonction de fermeture, et la fonction f2. est renvoyé dans f1. Enfin, attribuez f1 au résultat, et le résultat a été exécuté deux fois, et le résultat était ce que nous voulions, ce qui a prouvé que lors de la fermeture, f2 faisait référence à la variable 'n' de f1, mais 'n' n'a pas terminé l'exécution. parce que f1 Ensuite, il est détruit en mémoire. Tout le monde doit savoir qu'en JS, si une variable n'est pas référencée à d'autres endroits après l'exécution de la fonction, elle est automatiquement détruite.

Choses à noter lors de l'utilisation des fermetures

1 : Étant donné que les fermetures entraîneront le stockage des variables de la fonction en mémoire, l'utilisation de la mémoire sera importante, ce qui Cause Le rendu se bloque, etc., le navigateur s'exécute lentement, et cela peut également provoquer des fuites de mémoire et d'autres problèmes dans les navigateurs IE
2 : Puisque la fonction enfant fait référence aux variables de la fonction parent dans la fermeture, la fonction enfant modifiera les variables de la fonction parent, veuillez ne pas modifier la valeur de la variable de la fonction parent à volonté

Questions de réflexion

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16
f2(); // 16
f3(); // 16

Pourquoi f1 f2 f3 renvoie-t-il tous la même chose la valeur, pas ce que nous voulons ? Alors, comment ne pas résoudre ce problème par la clôture ?
C'est en fait très simple, nous avons juste besoin de deux lignes de code supplémentaires pour la fermeture

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
       //在自执行函数中把i传入相当于这个自执行函数的参数绑定了i，
       //当每次循环的时候不管变量怎么更改，这个函数的参数不会更改，所以返回咱们想要的结果
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

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!