ホームページ ウェブフロントエンド jsチュートリアル 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

C++ ラムダ式におけるクロージャの意味は何ですか? C++ ラムダ式におけるクロージャの意味は何ですか? Apr 17, 2024 pm 06:15 PM

C++ では、クロージャは外部変数にアクセスできるラムダ式です。クロージャを作成するには、ラムダ式の外部変数をキャプチャします。クロージャには、再利用性、情報の隠蔽、評価の遅延などの利点があります。これらは、イベント ハンドラーなど、外部変数が破棄されてもクロージャが外部変数にアクセスできる現実の状況で役立ちます。

C++ラムダ式でクロージャを実装するにはどうすればよいですか? C++ラムダ式でクロージャを実装するにはどうすればよいですか? Jun 01, 2024 pm 05:50 PM

C++ ラムダ式は、関数スコープ変数を保存し、関数からアクセスできるようにするクロージャーをサポートしています。構文は [キャプチャリスト](パラメータ)->戻り値の型{関数本体} です。 Capture-list は、キャプチャする変数を定義します。[=] を使用してすべてのローカル変数を値によってキャプチャするか、[&] を使用してすべてのローカル変数を参照によってキャプチャするか、[variable1, variable2,...] を使用して特定の変数をキャプチャできます。ラムダ式はキャプチャされた変数にのみアクセスできますが、元の値を変更することはできません。

C++ 関数におけるクロージャの長所と短所は何ですか? C++ 関数におけるクロージャの長所と短所は何ですか? Apr 25, 2024 pm 01:33 PM

クロージャは、外部関数のスコープ内の変数にアクセスできる入れ子関数です。その利点には、データのカプセル化、状態の保持、および柔軟性が含まれます。デメリットとしては、メモリ消費量、パフォーマンスへの影響、デバッグの複雑さなどが挙げられます。さらに、クロージャは匿名関数を作成し、それをコールバックまたは引数として他の関数に渡すことができます。

クロージャによって引き起こされるメモリリークの問題を解決する クロージャによって引き起こされるメモリリークの問題を解決する Feb 18, 2024 pm 03:20 PM

タイトル: クロージャによって引き起こされるメモリ リークと解決策 はじめに: クロージャは JavaScript における非常に一般的な概念であり、内部関数が外部関数の変数にアクセスできるようにします。ただし、クロージャを誤って使用すると、メモリ リークが発生する可能性があります。この記事では、クロージャによって引き起こされるメモリ リークの問題を調査し、解決策と具体的なコード例を提供します。 1. クロージャによるメモリリーク クロージャの特徴は、内部関数が外部関数の変数にアクセスできることです。つまり、クロージャ内で参照される変数はガベージコレクションされません。不適切に使用すると、

jsとvueの関係 jsとvueの関係 Mar 11, 2024 pm 05:21 PM

js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンド フレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。

関数ポインタとクロージャが Golang のパフォーマンスに与える影響 関数ポインタとクロージャが Golang のパフォーマンスに与える影響 Apr 15, 2024 am 10:36 AM

関数ポインタとクロージャが Go のパフォーマンスに与える影響は次のとおりです。 関数ポインタ: 直接呼び出しよりわずかに遅くなりますが、可読性と再利用性が向上します。クロージャ: 一般に遅いですが、データと動作をカプセル化します。実際のケース: 関数ポインターは並べ替えアルゴリズムを最適化でき、クロージャーはイベント ハンドラーを作成できますが、パフォーマンスの低下をもたらします。

PHP 関数の連鎖呼び出しとクロージャ PHP 関数の連鎖呼び出しとクロージャ Apr 13, 2024 am 11:18 AM

はい、コードの単純さと読みやすさは、連鎖呼び出しとクロージャーによって最適化できます。連鎖呼び出しは、関数呼び出しを流暢なインターフェイスにリンクします。クロージャは再利用可能なコード ブロックを作成し、関数の外の変数にアクセスします。

See all articles