Maison >interface Web >js tutoriel >Explication détaillée des compétences javascript close_javascript

Explication détaillée des compétences javascript close_javascript

WBOYoriginal: 2016-05-16 15:51:541241parcourir

Après avoir lu les concepts et articles sur les fermetures sur Internet, j'aimerais régler ce problème moi-même.

Q : Qu'est-ce que la fermeture ?
Réponse : La fermeture signifie qu'en JavaScript, une fonction interne peut toujours accéder aux paramètres et variables déclarés dans la fonction externe dans laquelle elle se trouve, même après le retour de sa fonction externe (fin de vie).

C'est la première fois que je rencontre un problème de fermeture

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>闭包循环问题</title>
<style type="text/css">
p {background:#ccc; width: 300px; height: 100px;}
</style>
</head> 
<body> 
<p id="p0">段落0</p> 
<p id="p1">段落1</p> 
<p id="p2">段落2</p> 
<p id="p3">段落3</p> 
<p id="p4">段落4</p> 
<script type="text/javascript">
for( var i=0; i<5; i++ ) { 
document.getElementById("p"+i).onclick=function() { 
alert(i); //访问了父函数的变量i, 闭包 
};
};
</script> 
</body> 
</html>

Si vous ne l'avez jamais utilisé auparavant, vous pouvez aussi penser qu'en cliquant sur un paragraphe, les chiffres correspondants 0, 1, 2, 3, 4 apparaîtront pour ce paragraphe. Mais en fait, ils apparaissent tous 5 ;

De nombreux blogs ont discuté de ce problème en ligne, et ils ont proposé de nombreuses méthodes pour afficher le numéro correspondant.

Solution 1 : Sauvegarder la variable i dans un attribut du paragraphe correspondant

var pAry = document.getElementsByTagName("p"); 
for( var i=0; i< 5; i++ ) { 
pAry[i].no = i; 
pAry[i].onclick = function() { 
alert(this.no); 
} 
};

Solution 2 : Ajouter une couche de fermeture et transmettre i à la fonction interne sous la forme d'un paramètre de fonction

var pAry = document.getElementsByTagName("p"); 
for( var i=0; i< 5; i++ ) { 
pAry[i].no = i; 
pAry[i].onclick = function() { 
alert(this.no); 
} 
};

Concernant le problème de fermeture causé par cela, le dicton sur Internet est que "la variable i est stockée dans la fonction comme pointeur ou adresse de variable" ; . . . Ensuite, explorez-en davantage.

Explore 1, la valeur renvoyée est 10 au lieu de

(function test() { 
var temp =10; 
for(var i=0; i< 5; i++ ){ 
document.getElementById("p"+i).onclick=function() { 
alert(temp); //访问了父函数的变量temp, 闭包 
}
};
temp=20;
})();

Explorez 2, renvoyez 10 une fois, puis renvoyez 20

(function test() { 
var temp =10; 
for( var i=0; i< 5; i++ ) { 
document.getElementById("p"+i).onclick=function() { 
alert(temp); //访问了父函数的变量i, 闭包 
}
if(i===1){
alert(temp);
}
};
temp=20;
})();

De l'exploration de 1 et 2, on peut conclure que si une variable du même niveau que la fonction est accédée à l'intérieur de la fonction, alors la variable réside en mémoire. L'accès à cette variable accède essentiellement à l'adresse de la variable

;

Ensuite, j'ai lu un autre article sur "cet objet dans la fermeture JS", continuons à discuter de ce problème.

// js闭包this对象1
var name = 'The Window';
var object = {
  name : 'My Object',
  getNameFunc1 : function(){
    // return this.name;
    console.log(this);//object
    return function(){//闭包，访问的便是全局变量的了，this指windows
     console.log(this);//windows
     return this.name; //The Window
    }
  },
  getNameFunc2 : function(){
     return this.name;//访问的是object
  },
  aa:function(){
   alert(22);
  }
};
alert(object.getNameFunc1()());//弹出“The Window”

Question : Alors pourquoi la fonction anonyme n'obtient-elle pas l'objet this qui contient sa portée ?
Réponse : Chaque fonction obtient automatiquement deux variables spéciales lorsqu'elle est appelée : this et arguments. Lors de la recherche de ces deux variables, la fonction interne dirige la recherche vers son objet actif, il n'est donc jamais possible d'accéder directement à ces deux variables dans la fonction externe.
Mais cela peut se faire avec le code suivant (accès direct aux variables dans les fonctions externes) :

// js闭包this对象2
var name = 'The Window';
var object = {
  name : 'My Object',
  getNameFunc : function(){
   var that = this;
   console.log(this);//输出的是object
   return function(){
    console.log(this);//输出的仍然是Windows
    return that.name;
   };
  }
};
alert(object.getNameFunc()());//弹出“My Object”

La différence est que l'objet this est affecté à une variable that. Même après le retour de la fonction, cela fait toujours référence à l'objet, donc l'objet sera renvoyé.
J'ai tellement écrit sur les fermetures, alors permettez-moi de mentionner l'utilité des fermetures, sinon ce serait une mauvaise personne de continuer à jouer avec les fermetures ;

Regardez cet exemple typique de fermeture :

function A(){
 var a=1;
 function B(){
  return a;
 }; 
 return B;
};

var C=A();//C取得A的子作用域B的访问接口
console.log(C());//1 C能访问到B的父级作用域中的变量a

Tant que d'autres étendues peuvent obtenir l'interface d'accès de la portée enfant, alors les autres étendues auront un moyen d'accéder aux variables de la portée parent de la portée enfant. Dans ce cas, cela sera très utile si vous avez besoin d'accéder à la valeur dans une certaine fonction à l'avenir.

La plupart des codes ci-dessus ont été trouvés en ligne. Je viens de résumer ce que j'ai compris et le processus de lecture.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment appeler aléatoirement une fonction spécifiée dans les compétences JS_javascriptArticle suivant：Comment appeler aléatoirement une fonction spécifiée dans les compétences JS_javascript

Articles Liés

Voir plus