Compréhension approfondie des fermetures js-js tutoriel-php.cn

Compréhension approfondie des fermetures js

不言

Libérer： 2018-07-18 17:16:14

original

1431 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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érents

Il 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>

Copier après la connexion

, 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

onmouseover

est 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!