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ソースコード分析

推薦する

Mysqlチュートリアルでのグループランキングの実装例の詳細な説明

目次1. データソース2. データの総合順位1) 総合ランキング2) 同順位3) 同順位3. データ...

W3C チュートリアル (6): W3C CSS アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。スタイル シートは...

MySQLデータベースインデックスの詳細な説明

目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...

MySQL Binlog ログ処理ツールの比較分析

目次運河マクスウェルデータバスAlibaba Cloud のデータ転送サービス (DTS)運河ポジシ...

MySql8.023 インストール プロセスの詳細なグラフィック説明 (初回インストール)

まず、MySQL公式サイトからインストールパッケージをダウンロードします。MySQLはオープンソース...

vscode で console.log を書く 2 つの簡単な方法の詳細な説明

(I) 方法 1: 事前にスクリプト タグ内に直接定義します。この HTML ファイルにのみ適用され...

Nginx は gzip 圧縮に基づいてアクセス速度を向上します

1. nginx はなぜ gzip を使用するのですか? 1. 圧縮の役割:ページがgzipで圧縮さ...

docker run -v はデータボリュームを異常にマウントし、コンテナのステータスは常に再起動になります。

問題点: docker run に -v パラメータを追加すると、コンテナは常に再起動状態になります...

CentOS 7 環境でソースコードから MySQL 5.7 をインストールする方法

この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...

非常に詳細な Vue-Router のステップバイステップのチュートリアル

目次1. ルータビュー2. ルータリンク3. リダイレクト4. ルーティングエイリアス5. ルーティ...

フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選

フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...

グローバルトーストコンポーネントをカプセル化するVueの完全な例

目次序文1. vue-cliを使う1. Toastコンポーネントを定義する2. main.jsで設定...

HTMLの基本概念の詳細な説明

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 •HTML...

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

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

独自の FTP および SFTP サーバーを構築するプロセスの紹介

FTP と SFTP はファイル転送プロトコルとして広く使用されています。関連する機能を開発するには...