JavaScript クロージャの詳細

JavaScript クロージャの詳細

序文:

JavaScript部分ではクロージャが非常に重要なので、今日はクロージャに関する知識をまとめておきます。まず、クロージャを理解する前に、スコープに関する関連知識を知っておく必要があります。スコープについては以前のブログ投稿で説明しているので、ここでは繰り返しません。次に、クロージャとは何かを見てみましょう。

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

closure別の関数のスコープ内の変数にアクセスできる関数です。 ----- JavaScript上級プログラミング

簡単に言えば、クロージャとは、スコープが別の関数内のローカル変数にアクセスできるという特性を持つ関数です。

以下に簡単な例を示します。

たとえば、関数があり、その中にローカル変数を定義しているとします。他のスコープがこのローカル変数にアクセスできる場合、クロージャが生成されます。そこで、この関数内に別の関数を定義して、内部の関数スコープが外部の関数内のローカル変数にアクセスできるかどうかを確認します。

 関数f1(){
            var 数値 = 10;
            関数f2(){
                console.log(数値);
            }
            f2();
        }
        f1();

印刷された結果は次のとおりです。

値が正常に出力され、クロージャが生成されていることがわかります。
しかし、読者の中には疑問を持つ人もいるかもしれません。f2関数自体は f1 関数の中にあり、親関数の変数を使用できるのです。次に、f1 関数の外側のスコープ内の変数にアクセスし、結果を確認します。

次のように、f2 関数の呼び出しを f1 関数の戻り値に変更し、関数の外部で f1 関数を呼び出します。

 関数f1(){
            var 数値 = 10;
            関数f2(){
                console.log(数値);
            }
           f2() を返す
        }
        var f = f1();
        関数f();

この時点では、 f1 の外部のスコープがその内部関数の変数にアクセスするのと同じです。印刷結果は次のとおりです。

内部のローカル変数もここで使用でき、クロージャが生成されていることがわかります。

したがって、次のように結論付けることができます。

クロージャ:スコープは別の関数内のローカル変数にアクセスできます。

2. 閉鎖の役割

関数内で定義されたローカル変数は関数内でのみ使用でき、使用が終了すると破棄されることはご存じのとおりです。ただし、クロージャを使用すると、このローカル変数は関数の外部で使用され、外部の呼び出し元が呼び出しを終了するまで破棄されません。したがって、クロージャの役割は変数のスコープを拡張することです。

JavaScript クロージャに関するこの記事はこれで終わりです。JavaScript クロージャについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JSにおけるクロージャの役割について詳しく話しましょう
  • JavaScriptクロージャの原理と機能の詳細な説明
  • JavaScript の高度なクロージャの説明
  • JavaScript クロージャの説明
  • JavaScriptのクロージャとは何かを学びましょう

<<:  HTML Selectは、デフォルトの選択を設定するためにselected属性を使用します。

>>:  CSS でショートカット プロパティを記述する際は、トラブルの順序に注意してください (落とし穴を避けるため)

推薦する

Ubuntu 16.04 カーネルのアップグレード手順

1. 環境仮想マシン上で実行されているUbuntu 16.04では、コマンドuname -rを使用し...

divとtableの選択と組み合わせ方について簡単に説明します

ページレイアウトは、Web ページを扱い始めた頃からずっと気にかけていたことです。初期のテーブル構造...

docker-compose を使用して mongodb と mysql を構築する詳細なプロセス

docker-compose で mongodb と mysql を構築する詳細な方法を見てみましょ...

Vueデータプロキシの詳細な説明

目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...

Centos7 での nginx のインストールと設定に関する詳細なチュートリアル

注: ソフトウェアのインストールの基本ディレクトリ パスは /usr/local です。ソフトウェア...

vue-cropper を使用して vue で写真をトリミングする方法をご存知ですか?

目次1. インストール: 2. 使用方法: 3. 組み込みメソッド: 4. 使用方法:要約する公式サ...

UbuntuでOpenCVをコンパイルしてインストールする方法

opencv2 の簡単なインストール: conda インストール --channel https:/...

IE6、IE7、IE8 で CSS3 の丸い角と影のスタイルをサポートする

CSS3 の角丸や影の効果を使ったページを作りたいのですが、IE ブラウザでは対応していません。こ...

Linux 編集の開始、停止、再起動の Springboot jar パッケージ スクリプトの例

序文springboot設定ファイルでは、設定ファイルの名前には独自の意味と用途があります。 dev...

MySQLでよく使われる4つのストレージエンジンについて簡単に説明します。

よく使われる4つのMySQLエンジンの紹介(1):MyISAMストレージエンジン:トランザクションや...

Vueを使用してタイマー機能を実装する

この記事の例では、タイマー機能を実装するためのVueの具体的なコードを参考までに共有しています。具体...

Node.js でメモリ効率の高いアプリケーションを作成する方法

目次序文問題: 大きなファイルのコピーNodeJS のストリームとバッファバッファストリーム解決策 ...

Vue はクリックフリップ効果を実現します

参考までに、vueを使用してクリックフリップエフェクトを簡単に実装します。具体的な内容は次のとおりで...

固定ボトムコンポーネントを実装した Vue の例

目次【効果】 【実施方法】 【効果】 【実施方法】 <テンプレート> <div i...

MySQL ジョイントテーブルクエリの簡単な例

MySql は結合テーブルクエリを使用しますが、初心者には理解しにくい場合があります。以下の記事では...