JS クロージャの使用のためのサンプルコード共有-jsチュートリアル-php.cn

JS クロージャの使用のためのサンプルコード共有

黄舟

リリース： 2017-03-27 14:37:31

オリジナル

1653 人が閲覧しました

この記事では、主に JS クロージャーの使用方法を紹介し、javascript クロージャーの原理、実行手順、および関連する操作テクニックを具体的な例の形式で分析します。必要な友人はそれを参照できます

この記事では、JS クロージャーについて説明します。使用例付き。参考のために皆さんと共有してください。詳細は次のとおりです:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
//      第一，函数作为返回值
      function fn(){
        var max = 10;
        return function bar(x){
          if(x > max) {
            console.log(x);
          }
        };
      }
      var f1 = fn();
      f1(15);
    </script>
    <script type="text/javascript">
//      第二，函数作为参数被传递
      var max = 10;
      fn = function(x){
        if(x > max){
          console.log(x);//15
        }
      };
      (function(f){
        var max = 100;
        f(15);
      })(fn);
    </script>
    <script>
      function fn(){
        var max = 10;
        return function bar(x){
          if(if > max){
            console.log(x);
          }
        };
      }
      var f1 = fn();
        max = 100;
      f1(15);
    </script>
  </body>
</html>

ログイン後にコピー

最初のステップは、コードが実行される前にグローバルコンテキスト環境を生成し、実行中に変数に値を割り当てることです。現時点では、グローバルコンテキストがアクティブです。

グローバルコンテキスト: max は未定義です

2 番目のステップは、var f1 = fn(); コードを実行するときに、fn() を呼び出し、fn() 実行コンテキストを生成し、スタックにプッシュして設定します。アクティブ状態にします。

fn() context: max is 10

3番目のステップは、var f1 = fn();の実行後、fn()の呼び出しが完了します。 fn() の実行コンテキストを破棄する必要があるのは当然ですが、ここではそれを実行できません。

注意、ここで重要な点があります: fn() が実行されると関数が返されるからです。関数の特別な点は、独立したスコープを作成できることです。

偶然にも、返された関数本体には、fn スコープの fn() のコンテキストで max を参照する自由変数 max もあります。

したがって、この最大値は破棄できません。破棄された後、bar 関数の最大値は値を見つけることができません。したがって、ここでの fn() コンテキストは破棄できず、実行コンテキストスタックにまだ存在します。

実行が max = 100; に達すると、グローバルコンテキストがアクティブになりますが、fn() コンテキストは実行コンテキストスタック内に残ります。

さらに、 max = 100; が実行された後、グローバルコンテキストの max には 100 の値が割り当てられます。

グローバルコンテキスト: max は 100 fn() context: max は 10

ステップ 4、f1(15) まで実行;、f1(15) を実行、つまり bar(15) を実行、bar( 15 ) コンテキストを選択し、アクティブ状態に設定します。

bar(15) を実行するとき、max は自由変数です。bar 関数が作成されたスコープ内で検索する必要があり、max の値が 10 であることがわかります。

ここで重要な点は、fn() の実行時に bar 関数が作成されるということです。 fn() の実行はずっと前に終了していますが、fn() の実行コンテキストはスタック上にまだ存在しているため、bar(15) の時点で max が見つかります。 fn() コンテキストが破壊されると、max は見つかりません。

クロージャを使用するとコンテンツのオーバーヘッドが増加することは明らかです。

f1(15); の実行後の 5 番目のステップ は、コンテキスト環境の破棄プロセスですが、ここでは説明しません。

クロージャはスコープとコンテキストと切り離せない関係があります。それは本当に「愛していると言うのは簡単ではありません」です。

さらに、クロージャには、古典的なフレームワーク/クラスライブラリについて学びたい場合でも、クロージャなどの基本的な関数を自分で開発したい場合でも、jQueryに多くのアプリケーションがあります。とプロトタイプ理論は知っておく必要があります。そうしないと、バグが発生したときにその理由がわかりません。これらのバグはまったく知識の範囲外である可能性があるためです。

以上がJS クロージャの使用のためのサンプルコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。