Compréhension approfondie des fermetures js
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
< dans une portée plus grande 🎜>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>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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment utiliser les cartes source pour déboguer le code JavaScript minifié?
Mar 18, 2025 pm 03:17 PM
L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.
Début avec Chart.js: tarte, beignet et graphiques à bulles
Mar 15, 2025 am 09:19 AM
Ce tutoriel expliquera comment créer des graphiques à tarte, anneaux et bulles à l'aide de chart.js. Auparavant, nous avons appris quatre types de graphiques de graphique. Créer des graphiques à tarte et à anneaux Les graphiques à tarte et les graphiques d'anneaux sont idéaux pour montrer les proportions d'un tout divisé en différentes parties. Par exemple, un graphique à secteurs peut être utilisé pour montrer le pourcentage de lions mâles, de lions féminins et de jeunes lions dans un safari, ou le pourcentage de votes que différents candidats reçoivent lors des élections. Les graphiques à tarte ne conviennent que pour comparer des paramètres ou des ensembles de données uniques. Il convient de noter que le graphique à tarte ne peut pas dessiner des entités avec une valeur nulle car l'angle du ventilateur dans le graphique à tarte dépend de la taille numérique du point de données. Cela signifie toute entité avec une proportion nulle
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
