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 インストール ガイド (詳細)

推薦する

ECMAScript のイテレータの詳細な説明

目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...

ReactのsetStateがマクロタスクなのかマイクロタスクなのかについて詳しく話しましょう

目次序文面接官は適切な質問をしていますか? § React は setState をどのように制御し...

更新とデータ整合性処理のためのMySQLトランザクション選択の説明

MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...

VMware Workstation と vSphere 間で仮想マシンを移行する (画像とテキスト)

1. Workstationで仮想マシンのハードウェアバージョンを変更するWorkstation ...

Web デザイン TabIndex 要素

TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...

MySQL無料インストールバージョンの設定チュートリアル

この記事では、参考までにMySQLの無料インストール構成チュートリアルを紹介します。具体的な内容は次...

HTML のボタン タグをクリックしてページにジャンプする 3 つの方法

方法1: onclickイベントを使用する <input type="button&...

JavaScript でカウントダウン効果を実装する

カウントダウン効果を実現するにはJavascriptを使用します。参考までに、具体的な内容は次のとお...

XMLとCSSスタイルの組み合わせ

学生.xml <?xml バージョン="1.0" エンコーディング=&qu...

ウェブページエクスペリエンス: 計画と設計

1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...

MySQL でパーティション分割後にクエリを実装するために MRG_MyISAM (MERGE) を使用する例

大量のデータベース データを最適化することは非常に高度な科学であり、開発者が習得する必要がある専門的...

MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有

問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...

Vue+thinkphp5.1+axiosでファイルアップロードを実現

この記事では、thinkphp5.1 + Vue+axiosを使用してファイルをアップロードする方法...

MySQLのロングトランザクションに関する深い理解

序文:この記事では主にMySQLのロングトランザクションに関する内容を紹介します。例えば、トランザク...

HTML+CSS を使用して、画像の右上隅に削除の十字と画像削除ボタンを追加します。

記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...