JS の難しさ同期と非同期、スコープとクロージャ、プロトタイプとプロトタイプチェーンの詳細な説明

JS スリーマウンテンズ

同期非同期

フロントエンドで非同期な操作は 2 つだけです。

タイマーは非同期に実行されます。
ajax 非同期リクエスト

コンパイラ解析 + コード実行の原則:

1. コンパイラはコードを上から下へ1つずつ解析します

2. コードが同期か非同期かを判断する

同期: すぐに実行
非同期: 実行されません。イベントキュープールに入れる

3. 非同期実行を開始する前に、すべての同期実行が完了するまで待機します。

同期と非同期の違い

API: コールバックありの非同期、コールバックなしの同期

パフォーマンス: 非同期のパフォーマンスは良好です (スレッドをブロックしません) 同期はスレッドをブロックします

順序: 同期インオーダー実行、非同期アウトオブオーダー実行

その他: コールバック関数: 関数のパラメータが関数である場合、このパラメータ関数はコールバック関数と呼ばれます。

範囲、終了

関数スコープチェーン

varで宣言された変数のみが関数スコープとして認識されます。
関数だけが新しい関数スコープを開くことができる
デフォルトのグローバル領域はレベル 0 スコープと呼ばれます。レベル 0 で宣言された関数は、レベル 1 スコープと呼ばれる新しいスコープを開きます。
レベル 1 で宣言された関数はスコープを作成し、レベル 2 のスコープが作成されます。
チェーンのようにスコープチェーンと呼ばれる

ここに画像の説明を挿入

ブロックスコープ

1. {}はブロックレベルのスコープであり、ブロックレベルのスコープを認識する。

2. let の場合、デフォルトのグローバルスコープはレベル 0 ブロックスコープとも呼ばれます。次に、オブジェクトに加えて、中括弧によって新しいブロックスコープが開きます。レベル 0 はレベル 1 を開き、レベル 1 はレベル 2 を開きます。

3. 関数スコープチェーンと同じですが、関数スコープは関数スコープを開く関数のみであり、ブロックスコープはブロックスコープを開く中括弧であり、varは関数スコープを認識し、letはブロックスコープを認識します。

閉鎖

クロージャは関数です。他の関数内の変数を読み取ることができる関数

コード例:

    関数foo(){
      // foo の内部変数 let num = 10
      // この内部はクロージャ関数と呼ばれます inner() {
        コンソール.log(数値)
      }
    }

クロージャの用途は何ですか?

クロージャは、外部の世界と関数の内部をつなぐ橋のようなものです。
つまり、クロージャを使用すると、外部から関数内の変数にアクセスできるようになります。

クロージャと直接戻り値には違いがある

値を直接返すと、実際にはその値のデータだけが返されます。その後の変更は関数内の変数とは何の関係もありません。

したがって、クロージャを使用すると、外部から関数内の変数に間接的にアクセスできるようになります。

クロージャを書くためのいくつかの方法

簡単に言えば、閉鎖特性を満たすものはすべて閉鎖とみなされる。

クロージャ：関数の内部変数に外部からアクセスできるようにする関数です。

クロージャ効果1: 変数のライフサイクルの延長

ライフサイクル：宣言から破壊までのサイクルを指します

グローバル変数のライフサイクルは、Webページの開始から終了までです。

ローカル変数のライフサイクルは、それが配置されているスコープ内で開始および終了します。

クロージャは変数のライフサイクルを延長できるため、外部からローカル変数にアクセスできます。

したがって、クロージャを多用するとメモリリークが発生する可能性がある。

メモリリーク: データの一部は不要になりましたが、まだメモリ領域を占有しており、リサイクルされていません。

解決：

クロージャ値をnullに割り当てるだけです
null 値を割り当てるということは、誰もそのデータを参照していないことを意味します。誰もそのデータを参照していない場合、そのデータは「ガベージ」としてマークされ、適切なタイミングで GC によってリサイクルされます。
GC: ガベージコレクションのメカニズム
Chromeブラウザはこのメカニズムを使用しています

閉鎖効果2: アクセス制限

変数をローカル変数にして、外部から直接アクセスできないようにします。

私たちが書いたクロージャ（ブリッジ）を介して間接的にのみアクセスできるため、クロージャ内でいくつかの制限を設けて、アクセスを制限するという目的を達成できます。

閉会の際の注意事項

知らせ：

クロージャを生成する外側の関数が呼び出される回数に応じて、同じ数のクロージャが生成され、そのたびに異なるデータが操作されます。

クロージャを生成する外側の関数が 1 回呼び出されると、生成されるクロージャは 1 つだけになり、操作されるデータは同じままになります。

クロージャはvarの使用によって発生する添え字エラーの問題を解決します

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <スタイル>
    ul {
      リストスタイル: なし;
      パディング: 0;
      マージン: 0;
    }
    li {
      幅: 30ピクセル;
      高さ: 30px;
      背景色: 黄色;
      行の高さ: 30px;
      テキスト配置: 中央;
      フロート: 左;
      右マージン: 10px;
    }
  </スタイル>
</head>
<本文>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <スクリプト>
    // 以前にletはありましたか?いいえ、ではvar // Find all liを使って添え字の問題を解決する方法を見てみましょう
    var lis = document.getElementsByTagName('li')
    (var i = 0; i < lis.length; i++) の場合 {
      // i には変数が 1 つだけあるので、最終的にクリックすると、全員が 1 つの i を訪問します。
      // i の最終値は 5 なので、誰をクリックしても 5 になります
      // 解決法: li が 5 つある場合、5 つの変数が必要で、変数の値はそれぞれ 0、1、2、3、4 です。
      // 5 つの異なる変数を生成するにはどうすればよいでしょうか?関数スコープ（function(){）を作成する必要があります
        // このループは 5 つの自己実行関数を生成するため // これは 5 つの異なるインデックス変数が存在することを意味します // それらの値はそれぞれ 0、1、2、3、4 である必要があり、i の値は正確に 0、1、2、3、4 です
        // iをインデックスに割り当てるだけです var index = i
        // 各liにクリックイベントを追加する lis[i].onclick = function () {
          アラート(インデックス)
        }
      })()
    }
  </スクリプト>
</本文>

</html>

投票機

    // 投票して現在の投票数を取得できる関数を作成する function votor() {
      // チケットの数を格納する変数があります。let ticket = 0
      戻る {
        getTicket: 関数 () {
          console.log('現在のチケット数は: ' + チケット)
        },
        // 投票 add: function () {
          チケット++
        }
      }
    }
    tp = votor() とします
    tp.add()
    tp.add()
    tp.add()
    tp.add()
    tp.getTicket()

閉鎖に関する2つの面接の質問

		// 質問1:
        window.name = "ウィンドウ"; 
        オブジェクトを = {
            名前:「私のオブジェクト」、  
            getNameFunc: 関数 () { 
                関数を返す（）{
                    this.name を返します。
                };
            }
        };
        コンソールにログ出力します。  
                 // 質問2:
        window.name = "ウィンドウ";
        オブジェクトを {
            名前:「私のオブジェクト」、  
            getNameFunc: 関数 () { 
                that = this とする; 
                関数を返す（）{
                    that.name を返します。
                };
            }
        };
        コンソールにログ出力します。