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

推薦する

VirtualBox での CentOS 8.1 仮想マシンのインストールを最小限に抑える詳細なチュートリアル

1. 関連ツールと画像をダウンロードするダウンロードリンクバーチャルボックス: https://do...

入力が完了したことを検出し、次のコンテンツを自動的に入力する HTML を実装する方法

前回の記事では、入力完了の簡単な検出を実現しましたが、今回はさらに一歩進んで、入力が完了した後に次の...

JavaScript は setTimeout を使用してカウントダウン効果を実現します

JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...

Linux での Python スクリプトの自動起動とスケジュール起動の詳細な手順

1. Pythonは起動時に自動的に実行されますPython の自己起動スクリプトがauto.pyで...

Nginx tp3.2.3 404 問題の解決

最近、Apache を nginx に変更しました。TP プロジェクトを実行に移すと、404 エラー...

ろうそくを溶かす(水滴)サンプルコードを実現する純粋な CSS

成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...

MySQLの権限とインデックスの詳細な説明

mysql の権限とインデックスmysql の最高権限ユーザーは root です。 CREATE U...

マインスイーパゲームを実装するための jQuery プラグイン (1)

この記事では、jQueryプラグインを使用したマインスイーパゲームの最初の記事の具体的なコードを参考...

Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題をどのように解決するかの詳細な説明

フロントエンドのクロスドメイン問題に2日間近く悩まされましたが、ようやくngnxを使って解決したので...

JavaScript CollectGarbage 関数の例

まず、メモリ解放の例を見てみましょう。 <スクリプト言語="JavaScript&q...

Vueは時間カウントダウン機能を実装する

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。必要:...

MySQL json 形式のデータクエリ操作

デフォルトのテーブル名はbase_dataで、json列名はjson_valueです。 json_v...

独立した IP を介して Windows コンテナ イントラネットの Docker に直接アクセスする方法

Docker では、ポート マッピングを使用して、Docker コンテナーのサービスをホスト マシン...

Vue プロジェクトに ECharts を導入する

目次1. インストール2. はじめに3. 使用4. 必要に応じてEChartsチャートとコンポーネン...

SQLクエリの実行順序をゼロから学ぶ

SQL クエリ ステートメントの実行順序は次のとおりです。 (7)選択 (8) DISTINCT &...