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

推薦する

Linux サーバー上で複数の SVN リポジトリを構成するプロセスの詳細な説明

1. 指定されたディレクトリにリポジトリを作成し、ディレクトリ全体を保存してください。この記事のサン...

JavaScript を使用して動的な QQ 登録ページを作成する

目次1. はじめに1. 基本レイアウト2. 写真を自動的に切り替える3. コンテンツを追加する4. ...

Nginx Rewrite の使用シナリオと設定方法の分析

Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....

Vue ルーティングフォールバックに最適なソリューション (vue-route-manager)

目次ルーティングマネージャー背景はじめる問題を解決する方法要約するルーティングマネージャー各ジャンプ...

測定画像HTTPリクエスト

一般的なブラウザでテスト ページを開き、Fiddler で http リクエストを表示してください。...

MySQL データベース テーブルとデータベース パーティショニング戦略

まず、テーブルを分割する必要がある理由について説明します。データシートが数百万に達すると、1 回のク...

LinuxにKafkaをインストールする

目次1.1 前提条件としてのJava環境1.2 Zookeeperのインストールと設定1.3 Kaf...

さまざまな解像度やブラウザでウェブページを適切に表示する方法

キーコードは次のとおりです。コードをコピーコードは次のとおりです。 html{高さ:100%; }コ...

MySQL Limitパフォーマンス最適化とページングデータパフォーマンス最適化の詳細な説明

MySQL Limit はセグメント内のデータベース データをクエリでき、主にページングで使用されま...

IE6 スペースバグ修正方法

コードを見てみましょう:コードをコピーコードは次のとおりです。 < !DOCTYPE html...

MySQL 最適化における B ツリー インデックスの知識ポイントのまとめ

SQL を最適化する必要があるのはなぜですか?当然ですが、SQL ステートメントを記述する場合、次の...

ユーザーエクスペリエンスの要素またはWebデザインの要素

システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...

MySQL 変数宣言とストアド プロシージャの分析

変数の宣言グローバル変数の設定@a='新しい変数' を設定します。関数やストアドプロ...

Dockerデータストレージの概要

この記事を読む前に、ボリューム、バインドマウント、tmpfs マウントの基本を理解しておいてください...

JavaScript 配列と非配列オブジェクトのディープ クローンとシャロー クローンの原則の詳細な説明

目次シャロークローニングとディープクローニングとは何ですか? 1. アレイのクローンを作成する1.1...