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

推薦する

MySQL での or ステートメントの使用例

1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...

Linux でユーザーにルート権限を追加する方法の概要

1. ユーザーを追加します。まず、adduser コマンドを使用して共通ユーザーを追加します。コマン...

Vue SPA ファースト スクリーン最適化ソリューション

目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...

CentOS7 での PostgreSQL 11 の詳細なインストールと設定のチュートリアル

1. 公式ウェブサイトアドレス公式サイトではインストールの参考手順が紹介されています。公式サイトを見...

入力選択スタイルを変更する CSS 疑似クラスのサンプルコード

注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...

docker-swarm をベースにした継続的インテグレーション クラスタ サービスの構築の詳細な説明

序文この記事は私自身の製作過程の簡単な記録です。練習中に質問があれば、一緒に話し合うことができます。...

MySQLクエリデータを時間別に表示します。データがない場合は0を入力してください。

需要背景統計インターフェースでは、フロントエンドは 2 つの配列を返す必要があります。1 つは 0 ...

カレンダー効果を実現するJavaScript

この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

MySQL のスケジュールされた完全なデータベースバックアップ

目次1. MySQLデータのバックアップ1.1、データをバックアップするためのmysqldumpコマ...

vue-cli 3 で vue-bootstrap-datetimepicker 日付プラグインを使用する方法

需要背景最近、Vue を使用してフロントエンド エンジニアリング システムと組み合わせ、以前のデモを...

MySQLの左結合と内部結合について簡単に説明します

序文最近、X 省のコールド チェーン トレーサビリティ システムの開発で忙しくしています。毎日午後 ...

Node.js ファイルのコピー、フォルダの作成、その他の関連操作

NodeJS は次のファイルをコピーします:通常、小さなファイルのコピー操作では、ストリーム パイプ...

MySQL トリガー: 複数のトリガー操作の作成例の分析

この記事では、例を使用して、MySQL で複数のトリガー操作を作成する方法について説明します。ご参考...

CSSは、他のレイヤーを変更せずに、多層ネスト構造の最外層を回転させる効果を実現します。

次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...

VMWare14.0.0のUbuntu仮想マシンで共有フォルダを設定する

これは私の最初のブログ投稿です。時間の制約があるため、どのようにフォーマットすればよいかわかりません...