Javascriptのクロージャとアプリケーションの詳細な説明

Javascriptのクロージャとアプリケーションの詳細な説明

序文

Javascript のクロージャは、学習プロセス中に理解するのが一般的に難しいです。この記事では、クロージャとは何か、一般的なクロージャの例、クロージャ関数、クロージャの適用、クロージャの問題などの観点からクロージャを紹介します。これにより、より深い理解が得られることを願っています。不適切な点があればご指摘ください。ありがとうございます。

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

クロージャは、親関数のスコープ内のデータを参照してクロージャを作成する、ネストされた内部 (子) 関数です。

重要な理解:

1. クロージャを生成するにはネストされた関数が必要です
2. クロージャは関数であり、ネストされた内部関数である
3. クロージャ内の関数は親関数のスコープ内のデータを参照する必要がある

上記の条件が満たされない場合、クロージャは生成できません。次の例はこれを示しています。

1.1 クロージャは条件コードを満たす

<スクリプト>
			関数 person(){
				var name='マーシャル';
				function student(){ //子関数を宣言 console.log(name);//親関数のスコープ内で変数名を参照する
				}
			}
			person(); //関数の実行、クロージャの生成 </script>      

ここに画像の説明を挿入

1.2 クロージャ生成時間

	<スクリプト>
			関数 person(){
				var name='marshal'; //jsがこの行を実行すると、クロージャが生成されます function student(){ //子関数を宣言します console.log(name); //親関数のスコープ内で変数名を参照します
				}
				student(); // 内部関数が外部関数で呼び出されます }
			person(); //関数の実行、クロージャ条件は満たされているが、クロージャは生成されない </script>

ここに画像の説明を挿入

クロージャ生成時間: ネストされたサブ関数コード ブロックは親関数スコープ内のデータを参照し、ネストされたサブ関数が実行される前にコンテキストが作成されるときにクロージャが生成されます。簡単に言えば、ネストされたサブ関数が外部で実行されると、その時点でクロージャが生成されます。

<スクリプト>
			関数 person(){
				var name='マーシャル';
				関数学生(){
					console.log(name); //このメソッドにはクロージャコードが含まれています }
				帰国学生;
			}
			var p=person();//サブ関数オブジェクトが作成されるため、この時点で最初のクロージャが生成され、サブ関数 student が p に返される。p は消えないので、サブ関数が参照する変数名は p=null がリサイクルされるまでメモリ上に保持される p();//サブ関数のクロージャコードブロックを実行し、「marhsal」を出力
			p(); //サブ関数のクロージャコードブロックを2回目に実行し、「marhsal」を出力します。
			person(); // オブジェクトを呼び出すために 2 番目のサブ関数が作成されます。この時点で、2 番目のクロージャは生成されますが、サブ関数の学生コード ブロックは実行されません。</script>

2. 一般的なクロージャの例

2.1 引数として渡されるサブ関数

<スクリプト>
			関数setTimeoutTest(メッセージ,時間){
				setTimeout(関数(){
					alert(message); //ネストされた子関数は親関数の変数 message を参照し、クロージャを生成します }, time);
			}  
			setTimeoutTest('プロンプトメッセージ',1000);
		</スクリプト>

2.2 カウンターの使用(関数の戻り)

<スクリプト>
				関数 count(){
					var i = 1;
					関数add(){
						私は++;
						コンソールにログ出力します。
					}
					戻り値: add;
				}
				var c=count();//プロダクションクロージャ c();//2
				c();//3
				c();//4
		</スクリプト>

3. 閉鎖効果

3.1 閉鎖効果

1) 子関数が親関数の変数や関数を参照し、ライフサイクルが延長される

2) 変数や関数は常に存在し、関数内の値は外部からアクセスできる

<スクリプト>
			関数 count(){
				var i = 1;
				関数add(){
					私は++;
					コンソールにログ出力します。
				}
				戻り値: add;
			}
			var c = count();
			c();//2
			c(); //3 i のライフサイクルが延長される </script>

4. 閉鎖申請

4.1 カスタムカプセル化jsコード

外部jsコードout.jsは自己増分と自己減分を実装しています(関数count(){
	var i = 1;
	関数add(){
		私は++;
		コンソールにログ出力します。
	}
	関数減算(){
		私 - 
		コンソールにログ出力します。
	}
	ウィンドウ数={
		追加:追加、
		減算:減算
	}
})();
out.js コードを参照 <script src=out.js></script>
		<スクリプト>
			count.add(); //2
			count.subtract(); //1
			count.subtract(); //0
		</スクリプト>

5. 閉鎖問題

5.1 クロージャとこれ

<スクリプト>
     var name="marshal"; //グローバル変数を作成する var person={
		 名前:"レオ",
		 getName:function(){ //匿名関数を返す return function(){ //this.nameを返す
				return this.name; //文字列を返す }
		 }
	 };
	 alert(person.getName()()); // 出力マーシャル、内部関数は外部関数に直接アクセスできない this
	 
</スクリプト>

回避策

<スクリプト>
	     var name="マーシャル";
			 var 人 = {
				 名前:"レオ",
				 getName:関数(){
					 var that=this; //これをクロージャがアクセスできる別の変数に保存します return function(){
						that.name を返します。
					 }
				 }
			 };
			 alert(person.getName()()); //これはウィンドウではなく人を指します
	</スクリプト>

5.2 メモリリーク

クロージャを使用する場合、従属変数は常に存在するため、適切なときにメモリを再利用できるように、オブジェクトを逆参照して null に設定する必要があります。

Javascript のクロージャとアプリケーションの詳細説明に関するこの記事はこれで終わりです。より関連性の高い js クロージャとアプリケーションについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript の高度なクロージャの説明
  • JavaScript クロージャの説明
  • JavaScript クロージャの説明
  • Javascript のスコープとクロージャの詳細
  • JavaScript のクロージャの問題の詳細な説明
  • js クロージャとガベージ コレクション メカニズムの例の詳細な説明
  • JS の閉鎖原則とその使用シナリオの分析
  • JavaScriptクロージャの原理と機能の詳細な説明

<<:  Ubuntuが仮想マシンでインターネットに接続できない問題の解決策

>>:  MySQL Community Server 5.7.19 インストール ガイド (詳細)

推薦する

Ubuntu 18.04 システムでの Redis および phpredis 拡張機能のインストールと設定の詳細な説明

この記事では、Ubuntu 18.04 に Redis と phpredis 拡張機能をインストール...

MySQL 5.7 のユニオンオール使用法のブラックテクノロジーを 5 分で学ぶ

MySQL 5.6 での union all のパフォーマンスパート 1:MySQL 5.6.25 ...

nginxで静的リソースを公開する方法

ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...

DD DT DLタグの使用例

通常は <ul><li> タグを使用しますが、dd タグと dt タグも便利...

Vueはスクロールバースタイルを実装します

最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...

VS2019 が mysql8.0 データベースに接続する方法 (画像とテキスト付き)

1. まず、VS2019とMySQLデータベースを準備します。どちらも公式サイトからダウンロードで...

CentOS SVN サーバーで複数のプロジェクトを管理する方法

一つの要求一般的に、企業には複数のプロジェクトがあります。SVN サーバーを設定した後は、プロジェク...

MySQLストアドプロシージャを変更する詳細な手順

序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...

MySQL マルチバージョン同時実行制御 MVCC の実装

トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...

Linux および CentOS (サーバー) に zip および unzip コマンド機能をインストールする

Linux に zip 解凍機能をインストールする通常、 zip コマンドは Linux サーバーに...

NginxにおけるRewriteのリダイレクト設定と実践の詳しい解説

1: アドレス書き換えとア​​ドレス転送の意味を理解する。アドレス書き換えとア​​ドレス転送は異なる...

vue-cli を使用してプロジェクトを作成し、webpack でパッケージ化する方法

1. 環境を準備する(Node.jsをダウンロードし、環境変数を設定する) 2. vue-cliをグ...

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

大規模な Vue.js プロジェクトの構築と維持のための 10 のベスト プラクティス

目次1. スロットを使用してコンポーネントを理解しやすくし、より強力にする2. Vuexストアを正し...