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 命名標準の概要 (推奨)

推薦する

MySQLテーブルのテーブル構造を素早く変更する方法

MySQL テーブルのテーブル構造をすばやく変更する - 「MySQL 管理」から抜粋 ALTER ...

MySQL の効率的なクエリの左結合とグループ化 (プラス インデックス)

mysql 効率的なクエリMySQL は、左結合の速度を上げるために group by を犠牲にし...

MySQL ストアド プロシージャ、カーソル、トランザクションの例の詳細な説明

MySQL ストアド プロシージャ、カーソル、トランザクションの例の詳細な説明以下は私が作成した M...

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...

TSオブジェクトのスプレッド演算子とレスト演算子の詳細な説明

目次概要オブジェクトの残り属性オブジェクトの拡張プロパティオブジェクトの浅いコピーを作成するkeyo...

Ubuntu 18.04 で apt-get ソースを変更する方法

apt-get を使用してインストールすると、非常に遅くなります。国内のソースを変更すると、この問題...

UA による Web サイトのクロールを防ぐ Nginx のクローラー対策戦略

クローラー対策ポリシー ファイルを追加しました: vim /usr/www/server/nginx...

Linux 7.6 バイナリに MySQL 8.0.27 をインストールする詳細な手順

目次1. 環境整備1.1 オペレーティング システムのバージョン1.2 ディスク容量1.3 ファイア...

MySQLのREDOログとUNDOログの詳細な説明

MySQL ログ システムで最も重要なログは、REDO ログとアーカイブ ログです。後者は MySQ...

JavaScript 配列の詳細な概要

目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...

Vue フロントエンド開発における階層的にネストされたコンポーネント間の通信の詳細な説明

目次序文例まとめ序文Vue の親子コンポーネントは、props を通じて親コンポーネントの値を子コン...

HTML スペースコードの簡単な分析

HTML についてどれくらい知っていますか? 現在、基本的な HTML コードを学習している場合は、...

入力要素 [type="file"] を使用する場合のスタイルのカスタマイズとブラウザの互換性の問題に関する議論

この2日間、Baixing.comの筆記試験問題を解いているときに、このような問題に遭遇しました。H...

MySQL sql_mode の変更が有効にならない理由と解決策

目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...

収集する価値のある Linux ドキュメント編集コマンド 27 個

Linux col コマンドLinux の col コマンドは制御文字をフィルタリングするために使用...