Explication détaillée de l'utilisation des fermetures js

Cette fois, je vous apporte une explication détaillée de l'utilisation des fermetures js. Quelles sont les précautions lors de l'utilisation des fermetures js. Voici des cas pratiques, jetons un coup d'œil.

la fermeture est la combinaison d'une fonction et de l'environnement lexical dans lequel cette fonction a été déclarée >

Le premier. exemple de fermeture

En fait, cette châtaigne est très simple, displayName() est la fonction de fermeture à l'intérieur de init(), et pourquoi le nom de variable défini en externe peut-il être appelé à l'intérieur de displayName Parce que ? la jsfonction interne

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().

Deuxième exemple

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

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();

La réponse est : Non, et il signalera également une erreur de syntaxe....

console.log(i); sortie 3 fois 3. En d'autres termes, après setTimeout 1000 millisecondes, lorsque la fonction de fermeture est exécutée, la boucle for est terminée et 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 une 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

Explication détaillée des étapes d'utilisation du temps partagé fonctions en js

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!