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

推薦する

Vue でフルスクリーンを実装し、フルスクリーン終了を監視する

目次序文:実装手順:完全なソースコード:詳細情報:序文: vueでは、デフォルトページを実装し、di...

いくつかの重要なMySQL変数

MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...

JavaScript コンストラクタとプロトタイプの関係

目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...

mysql 5.7.23 winx64 解凍バージョンのインストールチュートリアル

参考までに、mysql-5.7.23-winx64 解凍版の詳細なインストールチュートリアルです。具...

Dockerを使用して開発環境を構築する方法を素早く習得します

プラットフォームが成長し続けるにつれて、プロジェクトの研究開発は、開発者向けのさまざまな外部環境、特...

MySQL の on と where における左結合設定条件の使用法の違いの分析

この記事では、MySQL の左結合における on 条件と where 条件の使用法の違いを例を使って...

時刻を保存するために適切な MySQL の datetime 型を選択する方法

データベースを構築してプログラムを書くとき、日付と時刻の使用は避けられません。データベースには、ti...

Element-UI の Select と Cascader にポップアップ下部アクション ボタンを追加する方法

下図のように、 selectポップアップレイヤーの下部に操作ボタンを配置するのが一般的な設計方法です...

Dockerでデータディレクトリを移行する方法

目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...

MySQL でストアド プロシージャを作成し、ループでレコードを追加する方法

この記事では、例を使用して、MySQL でストアド プロシージャを作成し、ループでレコードを追加する...

間違った MySQL コマンドをキャンセルしたい場合はどうすればいいですか?

間違った mysql コマンドを入力したのでキャンセルしたいです。どうすればいいですか? ctrl ...

Vite2.0の落とし穴

目次Viteプロジェクトビルドの最適化他のやっとこれは前回の記事の補足です。設定プロジェクトで遭遇し...

W3C組織はHTML4のスタイルに関する推奨事項を提供しています

これは、W3C 組織が HTML4 に対して提示したスタイル推奨事項です。残念ながら、ブラウザが独自...

divは、自動入力スタイルをブロックする入力ボックスとして入力を使用せずにコンテンツを入力できます。

今日、私は公開用の動的なウィンドウ スタイルを設計しましたが、マウスで入力をクリックしたときにブラウ...

mysql5.7.19 解凍版の詳細なインストール チュートリアル (純粋なクラックされた中国語版 SQLYog を使用)

Mysql5.7.19バージョンは今年リリースされた新しいバージョンです。最近のMySQLのバージ...