1つの記事でJavaScriptのクロージャ関数について学ぶ

1つの記事でJavaScriptのクロージャ関数について学ぶ

変数のスコープ

JavaScript クロージャを理解するには、まず JavaScript 変数のスコープを理解する必要があります。

変数スコープには、グローバルとローカル(グローバル変数とローカル変数)の2種類があります。

JavaScript では、グローバル変数を関数内で直接読み取ることができます。

変数 n=10
関数fn(){
	警告する
}
関数() //10

関数内の変数は関数外から読み取ることはできません。

関数fn(){
	var n = 10;
}
関数()
alert(n) //nは定義されていません。関数は関数外からnを読み取ることができません。

注意: 関数内で変数を宣言するために var が使用される場合、その変数はローカル変数です。var が使用されていない場合、その変数はグローバル変数です。

例えば:

関数fn(){
	10;
}
関数()
警告(n) //10

さらに、関数パラメータもローカルであり、関数内でのみ機能します。

通常の状況では、関数内でローカル変数を取得することはできません。唯一の回避策は、関数内で別の関数を宣言することです。

関数f1(){
	var n = 10;
	関数f2(){
		警告する
	}
}

f2 関数は f1 関数内のすべてのローカル変数を取得できますが、f1 関数は f2 関数内のローカル変数を取得できません。これは、JavaScript 言語に固有の「チェーン スコープ」構造です。 (つまり、子オブジェクトは一度に 1 レベルずつすべての親オブジェクトの変数を検索します)。そのため、親オブジェクトのすべての変数は子オブジェクトに表示されます。

f2 関数は親関数 f1 のローカル変数を取得できます。f2() 関数が返された場合、f1() 関数内の変数は f1 関数の外部からアクセスできます。

例えば:

関数f1(){
	var n = 10;
	関数f2(){
		警告する
	}
	f2() を返す
}
f1() //ページポップアップ10

例の f2() 関数はクロージャ関数です。

閉鎖の概念

スコープの理由により、関数内で定義された変数に関数の外部からアクセスすることはできませんが、場合によってはこの必要があるため、クロージャの概念が登場します。

クロージャは、別の関数のスコープ内の変数にアクセスできる関数です。

上記の例では、内部関数 f2 はクロージャ関数です。

本質的に、クロージャは関数の内部と関数の外部を接続するブリッジです。

クロージャはプライベート変数を保護するためのメカニズムです。関数の実行時にプライベートスコープを形成し、内部のプライベート変数を外部からの干渉から保護します。

クロージャの使用

(1)親スコープ関数内の変数を読み取ることができます。

(2)変数の値は常にメモリに格納され(ローカル変数をグローバル変数にする)、ガベージコレクション機構によってクリアされない。

クロージャのデメリット

クロージャは関数内のすべての変数をメモリに保存し、ガベージ コレクション メカニズムはそれらをクリーンアップしないため、メモリ消費量は非常に大きくなります。したがって、クロージャを乱用しないでください。そうしないと、メモリ リークが発生する可能性があります。

補充:

メモリリークとは何ですか?

プログラムを実行するにはメモリが必要です。メモリの要求が行われるたびに、オペレーティング システムはそれを供給する必要があります。
アプリケーション内の一部のコード変数がメモリを使用する必要がなくなったにもかかわらず、オペレーティング システムまたは使用可能なメモリ プールによって再利用されない場合は、メモリ リークが発生していることを意味します。

つまり、メモリの一部が不要になったとしても、それはまだ存在するのです - メモリリーク

クロージャによって発生するメモリリークの問題を解決します。

関数を終了する前に、未使用のローカル変数をすべて削除します。

たとえば、現在の変数の値を「null」に設定すると、ガベージ コレクション メカニズムが開始すると、値が「null」のこれらの変数は自動的にリサイクルされます。

最後に、クロージャのメリットとデメリットをまとめてみましょう。

利点

①関数内の変数のセキュリティを保護し、カプセル化を実装し、変数が他の環境に流れて名前の競合が発生するのを防ぎます。

② キャッシュ用に変数をメモリ上に保持する(ただし、過度の使用はメモリを消費するためデメリットもある)

③匿名の自己実行関数はメモリ消費量を削減できる

危害

① 上記の点の 1 つは、参照されたプライベート変数を破棄できないため、メモリ消費量が増加し、メモリ リークが発生することです。解決策は、変数を使用した後に手動で null を割り当てることです。

②次に、クロージャはクロスドメインアクセスを伴うため、パフォーマンスの低下を引き起こします。クロススコープ変数をローカル変数に格納し、ローカル変数に直接アクセスすることで、実行速度への影響を軽減できます。

要約する

JavaScript クロージャ関数に関するこの記事はこれで終わりです。JavaScript クロージャ関数に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript クロージャの説明
  • Javascript のスコープとクロージャの詳細
  • JavaScript のクロージャの問題の詳細な説明
  • js クロージャの 9 つの使用シナリオ
  • JavaScript クロージャの使用例
  • JavaScript の高度なクロージャの説明

<<:  MySQL DDL による同期遅延を解決する方法

>>:  Webリクエストと処理のTomcatソースコード分析

推薦する

Webフォーム作成スキル

実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...

Docker を使用して Microsoft Sql Server を展開するための詳細な手順

目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...

MySql 8.0 と対応するドライバー パッケージの一致に関する注意事項

MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...

MySQL関数の包括的な概要

目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...

win10 mysql 5.6.35 winx64 無料インストールバージョン設定チュートリアル

mysql 5.6.35 winx64無料インストールバージョン構成チュートリアルwin10、具体的...

ホームページのデザインはウェブデザイナーのレベルを最もよく反映する

私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...

JavaScript カスタム カレンダー効果

この記事では、JavaScriptカスタムカレンダーエフェクトの具体的なコードを参考までに紹介します...

背景属性の8つの属性値の詳細解説(面接の質問)

CSSの背景プロパティの値背景色背景画像背景繰り返し背景位置背景添付複合プロパティ: 背景: ba...

MySQL 5.5 で範囲パーティションを追加および削除する例

導入RANGE パーティション分割は、指定された連続した間隔範囲に基づいています。RANGE の初期...

mysql8.0.23 Linux (centos7) のインストールの完全かつ詳細なチュートリアル

目次リレーショナルデータベースとは何ですか?非リレーショナルデータベースとは何ですか? MySQL ...

SSMプロジェクトは、ホットデプロイメント構成を実装するためにTomcatとMavenを使用してWARパッケージとしてデプロイされることが多い。

背景ご存知のとおり、JavaEE プロジェクトを開発した後は、そのプロジェクトをサーバーの Tomc...

Docker を使用して ELK ログ システムを構築する例

以下のインストールではすべて、インストール ルート ディレクトリとして ~/ ディレクトリが使用され...

MySQLパーティションテーブルは月別に分類されています

目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...

ノードでシェルスクリプトを使用する方法

背景開発中、特定の状況でビジネス ロジックをバッチ処理するためのスクリプトが必要になる場合があります...

1 つの記事で Vue ミドルウェア パイプラインを学ぶ

SPA を構築する場合、多くの場合、特定のルートを保護する必要があります。たとえば、認証されたユーザ...