jsクロージャのさらなる理解-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

不言

Jul 18, 2018 pm 05:16 PM

jsクロージャ

この記事で共有された内容は、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 への

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7513

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

chart.js：パイ、ドーナツ、バブルチャートを始めます Mar 15, 2025 am 09:19 AM

このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js：ラインチャートとバーチャート（チュートリアル2）、およびレーダーチャートと極地域チャート（チュートリアル3）を学びました。パイとリングチャートを作成しますパイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します