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

推薦する

Vue3 コンポジション API の紹介

目次概要例なぜそれが必要なのでしょうか?設定参照、反応的計算して見るライフサイクルVue3.0 は ...

MySQLの暗黙的な変換について話す

作業の過程で、暗黙的な変換が発生するケースが数多くあります。暗黙的な変換は、クエリの速度低下を引き起...

jQueryのanimateアニメーションメソッドとアニメーションキューイング問題の解決方法の詳しい説明

目次animate() アニメーションメソッドアニメーションキューイングdelay() メソッドアニ...

Linux システムのパフォーマンスを分析するための top コマンドの詳細な説明

Linux topコマンドの紹介top コマンドは、Linux でよく使用されるパフォーマンス分析ツ...

Windows 10 での MySQL 8.0 のダウンロードとインストール構成のグラフィック チュートリアル

この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...

Dockerを使用してgitlabコミュニティの中国語版を構築する詳細なプロセスを教えます

1. Docker Composeを使用して起動を構成するDocker Compose を知らない場...

Dockerは同じIPネットワークセグメントとの接続を実現する

最近、Docker とホストが同じネットワーク セグメント上で通信する問題を解決し、そのプロセス全体...

VUE 入門 イベント処理の学習

目次1. 関数バインディング2. パラメータと$eventを使用する3. 1つのイベントに複数の関数...

LinuxのバックグラウンドでPythonプログラムを実行するいくつかの方法

1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...

MySQL でトランザクションのコミットとロールバックを実装する方法の詳細な例

最近、データベース データのスケジュールされた移行を実行する必要があります。実行プロセス中に何らかの...

Vueは物流タイムライン効果を実現します

この記事では、物流タイムライン効果を実現するためのVueの具体的なコードを例として紹介します。具体的...

Nginx ドメイン名の書き換えとワイルドカードドメイン名の解決を設定する方法

この記事では、ドメイン名の書き換えとワイルドカードドメイン名の解決を行うための Nginx の設定方...

React diffアルゴリズムソースコード分析

目次単一ノード差分単一要素を調整するマルチノード差分調整子配列ノードが移動したかどうかを判断するには...

Vueのprovideとinjectの使い方と原則を分析する

まず、provide/inject を使用する理由について説明しましょう。祖父コンポーネントと孫コン...

CSSを使用してAndroidシステムの読み込みアニメーションを実装する

Web には一般的な読み込みアイコンが 2 つあります。1 つは iOS の「菊」、もう 1 つは ...