Maison > Article > interface Web > Compréhension approfondie des fermetures js
Compréhension approfondie des fermetures js
- 不言original
- 2018-07-18 17:16:141378parcourir
Le contenu de cet article concerne une meilleure compréhension des fermetures js. Le contenu est très bon. Les amis dans le besoin peuvent s'y référer.
Le concept de fermeture me déroute depuis que j'ai commencé à apprendre le JS il y a quelques mois
Je l'ai compris avant, mais ensuite je je ne l'ai pas utilisé depuis longtemps j'ai oublié
Conclusion : En termes simples, ce que la plupart des gens acceptent, c'est qu'une fonction a le droit d'utiliser des variables locales dans une autre fonction
J'ai vu beaucoup de différences
Représentés dans le code le plus simple
<span style="font-size: 14px;">function out(){<br/><br/>var age=21;<br/><br/>function inner(){<br/> <br/> console.log(age);<br/><br/>}<br/><br/>return inner;<br/><br/>}<br/><br/>var fn=out();<br/> fn(); //22</span> Très cohérent avec le concept
Je pense que la clôture doit refléter la portée
La fonction intérieure est défini dans la fonction out
Donc console(age);
utilisera d'abord le mécanisme de recherche de variable. portée de votre propre fonction (interne), mais vous ne la trouvez pas. Accédez simplement à la portée de la fonction out et recherchez
et trouvez-la. Si ce n'est pas le cas. trouvé, il recherchera
Jusqu'à la portée de la fenêtre, la portée de niveau inférieur est accessible vers le haut, mais la portée de niveau supérieur ne le peut pas. être accessible vers le bas
La portée fait référence à
{ }
Et JS n'a pas de bloc -level scope
for(var i=0;i<5;i++){
console.log(i);// 1 2 3 4 5
}
cosole.log (i);//5
Je ne serai pas détruit juste à cause de la boucle for
Cela doit être noté
D'accord, j'en ai parlé un peu portée. Revenons maintenant aux fermetures
Le cœur des fermetures est le retour. Il suffit de regarder le code et vous le saurez.
Ma compréhension est la suivante. ce retour renvoie le corps de fonction de inner et la portée à laquelle inner peut accéder !
Donc, inner peut être n'importe où Accès à l'âge
Exemple :
<span style="font-size: 14px;">function test(){<br/> var age=23;<br/> var fn=out();<br/> fn(); //21<br/> <br/> }<br/> <br/> test();//21</span>Il obtient 21 au lieu de 22 car le corps de la fonction et les portées sont renvoyées ensemble. Ensuite, la portée la plus proche est la portée de la fonction out <.>
Même si l'âge est défini dans la fonction de test, il ne peut pas être écrasé car les scopes existants sont différentsIl renvoie le scope, donc il accède aux variables dans cette portée et n'a rien à voir avec la portée où se trouve actuellement votre fonction
Fermer Bao est en fait un phénomène, c'est-à-dire que tous ceux qui jouent à DNF peignent des images et vendre des matériaux pour gagner de l'argent. Ce phénomène s'appelle déplacer des briques. La portée de la fonction d'exécution n'a rien à voir avec
Contrairement à cela, cela n'a rien à voir avec le temps de définition. et est lié au moment de l'exécution. Comparez la mémoire
Donc si vous ne pouvez pas Si vous comprenez bien la fermeture
alors vous pouvez comprendre. ça me ressemble
Ce qui est renvoyé est la fonction elle-même + la fonction Portées accessibles
Donnez-en une couramment utilisée
Commutation de la barre d'onglets de fermeture
Chaque fois que la boucle for exécute
list[i]. onmouseover<span style="font-size: 14px;"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0<span style="font-size: 12px; color: rgb(0, 0, 0);">;}
.box{
width:140px;
height:18px;
position:relative;
padding:6px 20px;
margin:50px auto;
background:#ff6666;
}
.box ul{
list</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">style:none;
}
.box li{
width:18px;
height:18px;
background:#ff3300;
line</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">height:18px;
text</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">align:center; </span><span style="font-size: 12px; color: rgb(0, 0, 255);">float</span><span style="font-size: 12px; color: rgb(0, 0, 0);">:left;
margin</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">right:5px;
cursor:pointer;
}
.current{
background:#ffccff</span>!<span style="font-size: 12px; color: rgb(0, 0, 0);">important;
} </span></style>
</head>
<body>
<p class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</p>
<script type="text/javascript"> <br/><span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);"> $(name){ <br/> <br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">return</span><span style="font-size: 12px; color: rgb(0, 0, 0);"> document.querySelectorAll(name);
} <br/> <br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> list=$(".box ul li"<span style="font-size: 12px; color: rgb(0, 0, 0);">); <br/><br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> len=<span style="font-size: 12px; color: rgb(0, 0, 0);">list.length; <br/> </span><span style="font-size: 12px; color: rgb(0, 0, 255);">for</span>(<span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> i=0;i<len;i++<span style="font-size: 12px; color: rgb(0, 0, 0);">){
list[i].onmouseover</span>=(<span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);">(n){
</span><span style="font-size: 12px; color: rgb(0, 0, 255);">return</span> <span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);">(){ <br/><br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">for</span>(<span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> j=0;j<len;j++<span style="font-size: 12px; color: rgb(0, 0, 0);">){
list[j].className</span>=""<span style="font-size: 12px; color: rgb(0, 0, 0);">;
}
list[n].className</span>="current"<span style="font-size: 12px; color: rgb(0, 0, 0);">;
}
})(i);
}<br/><br/><br/><br/></span></script>
</body>
</html></span>, la fonction sera exécutée immédiatement, en passant la variable actuelle i
Renvoie une fonction Il s'agit d'une fermeture Renvoie la fonction et la portée à laquelle la fonction peut accéder<.>Chaque fois que
onmouseoverest déclenché. À tout moment, la fonction renvoyée
sera exécutée, puis la boucle for dans la fonction de génération sera exécutée pour effacer tous les className
Cette phrase est la plus importante lors de l'exécution de list[n]. Le n voici le i onmouseover >
Parce que la fonction est exécutée immédiatement lorsqu'elle est définie et que i est transmis à la fonction anonyme. Ce i est dans le cadre de l'anonyme. fonction
Chaque onmouseover enregistre son propre i
donc lorsqu'il est déclenché Quand onmouseover, li peut accéder au i
qui était précédemment enregistré dans le scope, réalisant ainsi la nécessité de changer la couleur d'arrière-plan de celui qui clique
Recommandations associées :Compréhension des paramètres réels, des paramètres formels et des fermetures des fonctions 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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript