JavaScript クロージャの説明

JavaScript クロージャの説明

1. クロージャとは何ですか?

関数自体と、関数が宣言されている環境の状態の組み合わせ。

1.2 クロージャのメモ化: 関数は定義された環境を記憶する

1.3 クロージャ現象: JS で関数が作成されるたびにクロージャが作成される

2. クロージャの機能: 記憶、プライベート変数のシミュレーション

2.1 メモリ

例:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <スクリプト>
        関数createCheckTemp(standardTemp){
            関数 checkTemp(n){
                if(n<=標準温度){
                    alert('あなたの体温は正常です');
                }それ以外{
                    alert('体温が高めです');
                }
            }
            checkTemp を返します。
        }
        var checkTemp_A = createCheckTemp(37.1);
        var checkTemp_B = createCheckTemp(37.3);
        チェック温度_A(37.2);
        チェック温度_A(37.0);
        チェック温度_B(37.2);
        チェック温度_B(37.0);
    </スクリプト>
</本文>
</html>

詳細:

1: 閉鎖の記憶

2: 関数 return checkTemp は関数名です

3: 直接呼び出す代わりに、関数名 checkTemp を取得するために var checkTemp_A と checkTemp_A を定義します。

2.2 プライベート変数(セキュア変数)のシミュレーション

クロージャコードの例:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <スクリプト>
        // 関数をカプセル化します。この関数の機能は変数をプライベート化することです。function fun(){
            // ローカル変数aを定義する
            var a = 0;
            戻る {
                getA:関数(){
                    を返します。
                },
                追加:関数(){
                    ++;
                },
                pow:関数(){
                    2 は 0 です。
                }
            }
        }
        var obj = fun();
        // 変数 a を fun 関数の外部で使用する場合、唯一の方法は getA() メソッドを呼び出すことです console.log(obj.getA());
        // 変数 a に 1 を追加します。obj.add();
        オブジェクトを追加します。
        オブジェクトを追加します。
        コンソールにログ出力します。
        obj.pow();
        コンソールにログ出力します。
    </スクリプト>
</本文>
</html> 

実際、JavaScript では C++ や Java のように int sum()、int add()、int pow() などの関数型を定義できないため、クロージャの特性を利用する必要があります。つまり、関数内のクロージャのメモリを使用して関数内の変数を操作し、クロージャ関数の名前を返して内部データ操作を実行します。

3.IIFE(即時呼び出し関数式):

JSの特殊関数は定義されるとすぐに呼び出されます

3.1 IIFEの役割1 - 変数への値の割り当て

例:

プログラミング レベルを反映するために、前後の写真を比較します。 。 。コードを簡素化します。 。美しい。 。 。

3.2 IIFE 機能 2 - グローバル変数をローカル変数に変換する

この場合、JS にはブロック スコープの概念がないため (これが現時点での理解です)、次の 5 つのステートメントの結果はすべて 5 になり、var i はグローバル変数になり、for ループの後に i=5 になります。したがって、5 つのステートメントの結果はすべて 5 になります。

次に、IIFE を使用してこの問題を解決します。IIFE は基本的に関数のクロージャ機能を使用します。

グローバル変数iをIIFE関数に渡すことで、グローバル変数はローカル変数になります。JS関数のクロージャ機能を使用することで、図のarr[2]()の機能を実装できます。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript の高度なクロージャの説明
  • JavaScript クロージャの説明
  • Javascript のスコープとクロージャの詳細
  • JavaScript のクロージャの問題の詳細な説明
  • Javascriptのクロージャとアプリケーションの詳細な説明
  • js クロージャとガベージ コレクション メカニズムの例の詳細な説明
  • JS の閉鎖原則とその使用シナリオの分析
  • JavaScriptクロージャの原理と機能の詳細な説明

<<:  負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析

>>:  CSS BEM 命名標準の概要 (推奨)

推薦する

nginx を使用して静的リソース サーバーを構築する方法

Windows を例にとると、Linux も実際には同じです。静的リソースサーバーを構築するパソコン...

JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...

Linux コマンドラインのワイルドカードとエスケープ文字の実装

ハードディスクのファイル属性のバッチ表示など、特定の種類のファイルに対してバッチ操作を実行する場合、...

シームレスなカルーセルを実現するjQueryプラグイン

シームレス カルーセルは非常に一般的なエフェクトであり、ロジックを理解すれば非常に簡単です。効果は以...

背景画像にテキストを表示するためのCSS

効果: <div class="imgs"> <!-- 背景画...

CentOS 上の Docker に Jupyter をインストールしてポートを開く方法

目次jupyterをインストールするDocker ポートマッピングjupyterをインストールするp...

iptables の再起動後に Docker の iptables ルールの完全なプロセスが失われる

原因と結果1. ansibleコマンドを使用してジャンプサーバー上のマシンBをテストすると、次のエラ...

element.style インライン スタイルを変更する方法のチュートリアル

序文上記の Web ページ スタイルを記述しているときに、スタイルの値をどのように変更しても、ページ...

CSS3 は本当に SCSS に取って代わるのでしょうか?

Web ページのスタイル設定に関しては、プロジェクトで純粋な CSS または SCSS (および他...

Dockerfile を使用して SpringBoot プロジェクトをデプロイする方法

1. SpringBoootプロジェクトを作成し、jarパッケージにパッケージ化する2. Linux...

MySQL の FIND_IN_SET() と IN の違いを簡単に分析します

以前、あるプロジェクトでMysql FIND_IN_SET関数を使用したことがありますが、非常に便利...

Windows の MySQL net start mysql MySQL サービスの起動エラーが発生する システムエラーの解決

目次1- エラーの詳細2-シングルソリューション2.1-ディレクトリ C:\Windows\Syst...

ウェブサイトのテキストはまだデザインする必要がありますか?

多くの人が、ウェブサイト上のテキストはデザインする必要があるのか​​と疑問に思うかもしれません。多く...

MySQL 5.7 および 8.0 データベースのルート パスワードを忘れた場合の解決策

注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...

VMware仮想マシンの起動時に黒い画面が表示される問題を解決する

# VMware ハードディスクの起動優先順位を調整するステップ 1: 電源をオンにすると、BIOS...