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

推薦する

25 div+css プログラミングのヒントとコツ

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...

MySQLの論理アーキテクチャに関する深い理解

MySQL は現在、ほとんどの企業や事業体で使用されているデータベースです。MySQL が使用される...

HTML面接の質問の要約

1. doctypeの役割、厳密モードと混合モードの違い、そしてその重要性1. 構文形式: <...

Linuxでシンボリックリンクを削除(削除)するコマンド

Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...

MySQL は SQL ステートメントの最新のレコードをクエリします (最適化)

最悪の選択肢は、結果を時間順に並べ替えて最初のものを取ることです。 *から選択 ここで、create...

VMware12 インストール centOS8 構成グラフィック チュートリアルの詳細説明 (vm 仮想マシン インストール centos8 チュートリアル)

数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...

Ansibleを使用してディレクトリ内のすべてのコンテンツを削除する方法

Ansible を使用する学生は、以下に示すように、Ansible が特定のフォルダーまたはファイル...

シンプルなナビゲーションバー機能を実現するHTML+CSS

さっそく、コードを見てみましょう(初心者:特に言うことはありません) <!DOCTYPE ht...

CSS でレスポンシブ レイアウトを実装する方法

CSS でレスポンシブ レイアウトを実装するレスポンシブレイアウトは非常にハイエンドで難しいように思...

Docker で Let's Encrypt から永久無料 SSL 証明書を取得する方法

1. 原因公式の cerbot は面倒すぎます。野生の成長よりもさらに悪い acme.sh の使用は...

HTMLとCSSを使用して、自分だけの暖かい男「Dabai」を作成します

最終結果はこんな感じです、かわいいでしょう… PS: HTML と CSS の知識があればベストです...

Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法

序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...

友達やグループを見つけるためのJavaScriptのLayim

現在、layuiの関係者はlayim友達検索ページの構造とスタイルを提供していません。私は個人的に非...

bash を使って日付をカウントダウンする方法

重要なイベントまであと何日あるか知りたいですか? Linux bash と date コマンドが役に...

Vueでaxiosを簡単にカプセル化する方法

Vueにaxiosを挿入する 'axios' から axios をインポートします。...