ホームページ > 記事 > ウェブフロントエンド > jsクロージャのさらなる理解

jsクロージャのさらなる理解

不言オリジナル: 2018-07-18 17:16:141339ブラウズ

この記事で共有された内容は、js クロージャをさらに理解するためのもので、困っている友人はそれを参照できます。

数か月前にJSを学び始めて以来、クロージャの概念がわかりにくくなりました

以前は理解していましたが、長い間使用していなかったので忘れていました

クロージャ: 平たく言えば、ほとんどの人が受け入れているのは、関数には別の関数でローカル変数を使用する権利があるということです

私は多くの違いを見てきました

を最も単純なコードで表現してみましょう

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

非常に一貫性のあるコンセプト

クロージャはスコープを反映するものだと思います

inner関数はout関数で定義されています

なのでconsole(age);

は変数検索メカニズムを使用します、まず独自の(inner)関数スコープで、見つからない場合はout関数スコープに移動して検索します

見つかってから出力します outで見つからない場合は、より大きなスコープで検索します

ウィンドウまでスコープ下位レベルのスコープは上方向にアクセス可能上位レベルのスコープは下方向にアクセス不可

スコープは

{ } を参照

そして JS にはブロックレベルのスコープがありません

for(var i=0 i for ループを抜けたからといって破棄されるわけではありません

これには注意してください

さて、スコープの知識について少しお話しました。さて、クロージャーに戻りましょう

クロージャの中心は return です。コードを知ってください

私の理解では、return は inner の関数本体と inner がアクセスできるスコープを返します。

したがって、 inner はアクセスできます。どこでも年齢

例:

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

22ではなく21になります関数本体とスコープが一緒に返されるため、最も近いスコープはout関数のスコープではありません

年齢が定義されている場合でもテスト関数では、既存のスコープが異なるため上書きできません

スコープを返すため、そのスコープ内の変数にアクセスし、関数が現在存在するスコープとは何の関係もありません

。クロージャは実際には現象です DNF をプレイする人は皆、お金を稼ぐためにただ絵を描いて素材を売っているだけですこの現象は強盗と呼ばれています

要約すると、それはあなたが定義した関数のスコープに関係しており、何の関係もありません。実行する関数のスコープで行います

これはこれの逆です定義時とは関係ありませんが、メモリを比較します

クロージャーをよく理解していません

それなら私と同じように理解できるでしょう

返されるのは関数自体と関数がアクセスできるスコープです

よく使われるクロージャーの1つを挙げますタブバーの切り替え

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

list[i].onmouseover

を実行するたびに、現在の変数 i が渡され、関数が返されます。これにより、return 関数とスコープが形成されます。関数が

にアクセスできることは、onmouseover がトリガーされるたびに実行され、返されます。その後、関数

が生成関数内で for ループを実行して、すべての li の

className

をクリアします。

この文は、 list[n] を実行するときに最も重要です。ここでの n は、 onmouseover

を定義するときに渡される

i です。これは、関数が定義されるとすぐに実行され、 i が匿名関数を使用すると、この i は匿名関数

のスコープ内にあります。各 onmouseover は独自の i

を保存するため、onmouseover がトリガーされると、li にアクセスできます以前にスコープに保存された i への

は、これこれの背景色を変更するという要件も実現します

jsクロージャのさらなる理解

関連記事