javascript_javascript スキルのクロージャに関する簡単な説明

私は長い間クロージャを理解していませんでしたが、その後、クロージャ関連の知識を理解する前にスコープとこれに関連する問題について学びました。
クロージングも面接でよく聞かれる質問です。簡単に言うと、関数の入れ子関数です。

戻り値としての関数:

function foo () {
  var a = 1;
  return function () {
   a++;
   console.log(a);
  }
}
var aaa = foo();
aaa(); //2
aaa(); //3

実際、このコードは理解するのが難しくありません。 aaa は foo() によって返される新しい関数を指しますが、変数 a はこの関数内で参照されるため、foo 関数が実行されるとき、変数 a はまだ存在します。メモリは解放されません。つまり、a はそれぞれ 2 と 3 です。

パラメータとしての関数:

var a = 10;
function foo () {
console.log(a);
}
function aaa(fn) {
 var a = 100;
 fn();
}
aaa(foo);

以前の理解によれば、fn 関数が aaa 関数で実行されるとき、変数がない場合は、親スコープに移動して変数を見つけます。ここでは 100 です。結果は 100 ですか?

残念ながら、答えはノーです。ここでの結果は 10 です。Wang Fupeng 先生のブログでは、この関数のスコープ値を「親スコープ」の代わりに作成する必要があると説明されています。

クロージャの使用シナリオ

私はまだ比較的初心者なので、ここでは簡単な例を取り上げます。 li をクリックすると、インデックス値である ul 内の li の位置がポップアップ表示されます。

html コード:

<ul>
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

js コード:

例 1:
以下のコードを実行すると、どの li をクリックしても結果が 3 であることがわかります。

var aLi = document.getElementsByTagName('li');
for (var i = 0; i<aLi.length; i++) {
  aLi[i].onclick = function() {
   alert(i);
  }
}

無名関数には i 変数がないので、for が終了したらページの li タグをクリックします。この時点で i はすでに 3 です。

例 2:

aLi[i].onclick = (function(i){
    return function(){
      alert(i);
    }
  })(i);

今回は関数を戻り値として使用し、自己実行関数のパラメータに変数iを渡す方法です。すると、戻り関数はi変数を参照しているため、i変数は参照されません。 for ループが終了すると解放されます。つまり、変数 i の値がメモリに保存されます。この原則に基づいて、IE の以前のバージョンではメモリ リークが発生しやすくなります。

例 3:

for (var i = 0; i<aLi.length; i++) {
  (function(i){
    aLi[i].onclick = function(){
      alert(i);
    }
  })(i);
}

この原理は上記と同様です。

Xiaomi フロントエンド クロージャ インタビューの質問:

function repeat (func, times, wait) {
} //这个函数能返回一个新函数，比如这样用

var repeatedFun = repeat(alert, 10, 5000)
//调用这个 repeatedFun ("hellworld")

//会alert十次 helloworld, 每次间隔5秒

私の答え:

function repeat (func, times, wait) {
  return function(str) {
    while (times >0) {
      setTimeout(function(){
        func(str);
      },wait);
      times--;
    }
  }
}

var repeatedFun = repeat(alert, 10, 100);
repeatedFun ("hellworld");

上記がこの記事の全内容です。JavaScript クロージャを学習するすべての人に役立つことを願っています。