ES6のletとクロージャの詳細な説明

この記事では主に ES6 の let と Closure について詳しく説明しますので、参考にしてください。

この記事では、ES6 の let とクロージャの詳細な理解を紹介し、それを皆さんと共有します。詳細は次のとおりです:

この記事を始める前に、コードの一部を見てみましょう

for(var i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//10

明らかに、これです。コードは 10 を出力し、期待したものを返しません。 3. 理由も非常に単純です (js 変数のプロモーション)。この時点で、グローバル スコープで i にアクセスし、for ループが実行されています。グローバル変数 i=10;

ES5 標準では、期待される 3 を返したいと考えています。通常のアプローチも非常に簡単で、配列内の各関数に個別のスコープを持たせることで、構築するだけで済みます。次のような即時実行関数 (js にはブロックレベルのスコープはなく、関数スコープのみが区別され、グローバル スコープです):

var array=[];
for(var i=0;i<10;i++){
  array[i]=(function(i){
  return function(){
    return i;
    }
  })(i);
}
console.log(array[3]());//3

このように、配列の各関数は即時実行される関数の関数スコープ内にあります。即時に実行される関数は i を渡します。実際、for ループは次のコードを実行します:

  array[0]=(function(i){
  return function(){
    return i;
    }
  })(0);
  array[1]=(function(i){
  return function(){
    return i;
    }
  })(1);
  array[2]=(function(i){
  return function(){
    return i;
    }
  })(2);
……

このように、数値グループ内の各関数は個別の関数スコープに対応します (関数は合計ですぐに実行されます)。ここで 10 個の関数スコープが作成されます。これらの関数スコープの i 値は、実行時に渡される 0 です。

array[3](); を実行するときに、関数によってアクセスされる i 値は、グローバル i 値ではなく、対応する即時実行関数スコープを使用することで、期待される効果が得られます。

そうは言っても、クロージャについて簡単に説明します。クロージャは、リソースを解放していないスタック領域であり、スタック領域内の変数がアクティブ化された状態であるクロージャとして理解できます。上記の例では、js実行スレッドが実行スタック領域を作成する際に、即時実行関数内の変数iが内部関数から参照されていることが検出されるため、システムがメモリを確保します。スタック領域はメモリ上に解放されません。関数 ( 配列要素) が呼び出されると、スコープ チェーンに従って最初にアクセスされるのは上位スコープの変数です (関数の即時実行)。

クロージャについてはここでは詳しく紹介しません。クロージャについて詳しく知りたい場合は、「Javascript Advanced Programming」の第 7 章を​​読んでください。

前述したように、js にはブロックレベルのスコープはなく、グローバル スコープとグローバル スコープのみが存在します。 ES6 では、実際に新しいブロックレベルのスコープを js に追加します。たとえば、次のコードでは、関数スコープを作成せずに、各配列の関数がそれぞれのスコープの値にアクセスできるようにします。

let arr=[];
for(let i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//3

以前のように関数スコープを構築しなくても、目的の効果を達成できることがわかります。ブロックレベルのスコープの導入により、コードの for ループの後の {} を記述して理解することが容易になります。上記のコードはブロックレベルのスコープであり、ループするたびに、返される各関数は、対応するブロック スコープの変数を参照します。より鮮明に見えるように、コードを少し変更します。 ES6 では、クロージャー関数を構築するのがより便利です。

ここでは let と const についてはあまり説明しません。これまで ES6 に触れたことがない場合は、Ruan Yifeng 先生の「ES6 標準入門」を読むことをお勧めします。

ここでもう 1 つ言及しておきたいのは、この概念を読んだ後の多くの人の第一印象は、「const は不変の値を表し、let は元の var を置き換えるのに使用される。」というものです。変数を宣言する場合、次のコードを記述する可能性があります:

let arr=[];
for(let i=0;i<10;i++){
  let k=i;
  arr[k]=function(){
    return k;
  }
}
console.log(arr[3]());//3

const の定義は再代入できない値であり、その定義内の const で定義された不変の値 (immutable value) とは異なります。プロパティは後で変更することもできます。

実際、その使用シナリオは非常に幅広く、定数、構成項目、参照されるコンポーネント、定義された「ほとんどの」中間変数などを含め、すべて cosnt で定義する必要があります。逆に、let に関する限り、その使用シナリオは比較的少なく、ループ (for ループ、while ループ) および再定義が必要な少数の変数でのみ使用されます。

推測: 実行効率の観点から見ると、const は再代入できないため、静的構文解析の観点からより多くの最適化を行うことができ、結果的に実行効率が高くなります。

つまり、上記のコードでは、let を使用するすべての部分は実際には const を使用する必要があります。

上記は私があなたのためにまとめたものです。

関連記事:

axios を使用して vue2 の http リクエストの問題を解決する方法の詳細な説明 (詳細なチュートリアル)

vue プロジェクトに highcharts チャートを導入する方法は何ですか?

Angularでの@HostBinding()と@HostListener()の使用法(詳細なチュートリアル)

以上がES6のletとクロージャの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。