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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

黄舟

Mar 27, 2017 pm 02:37 PM

js閉鎖

この記事では、主に 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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

See all articles