Comment utiliser les fermetures js dans des projets réels

Cette fois, je vais vous montrer comment utiliser les fermetures js dans des projets pratiques, et quelles sont les précautions à prendre pour utiliser les fermetures js dans des projets pratiques. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Une fermeture est une collection d'une fonction et de l'environnement qui expose les variables à l'intérieur

En termes simples, fermeture = fonction + environnement

<.>Le premier exemple de fermeture

function init() {
 var name = 'Mozilla'; // name is a local variable created by init
 function displayName() { // displayName() is the inner function, a closure
 alert(name); // use variable declared in the parent function 
 }
 displayName(); 
}
init();
because inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

En fait, cette châtaigne est très simple displayName() est la fonction de fermeture à l'intérieur de init(), et pourquoi peut-elle être appelée depuis displayName vers. l'extérieur ? Qu'en est-il du nom de variable défini, car la fonction interne js a la permission d'obtenir les variables dans la fonction externe.

Deuxième exemple

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 for(var i=0;i<data.length;i++) {
   setTimeout(function(){
    //console.log(i); //发现i输出了3次3
   //console.log(this); // 发现 this 指向的是 Window
   data[i].key = data[i].key + 10;
   console.log(data[i].key)
   }, 1000);
 }
}
showKey();

L'exemple ci-dessus peut-il afficher correctement 10 11 12 ?

La réponse est : Non, et une erreur de syntaxe sera signalée....

console.log(i); disons, après setTimeout 1000 millisecondes, lorsque la fonction de fermeture est exécutée, la boucle for est terminée, i est une valeur fixe, ce qui n'obtient pas l'effet attendu.

console.log(this); a constaté que cela pointe vers Window, c'est-à-dire que la fonction de fermeture implémentée à l'intérieur de la fonction a été convertie en fonction globale et stockée en mémoire.

Vous devez donc définir une autre fonction d'exécution

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 var f1 = function(n){
  data[i].key = data[i].key + 10;
  console.log(data[i].key)
 }
 for(var i=0;i<data.length;i++) {
   setTimeout(f1(i), 1000);
 }
}
showKey();
// 得到预期的 10 11 12

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Comment utiliser le générateur de site Web VuePress

VuePress génère un site Web

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!