序文Javascript のクロージャは、学習プロセス中に理解するのが一般的に難しいです。この記事では、クロージャとは何か、一般的なクロージャの例、クロージャ関数、クロージャの適用、クロージャの問題などの観点からクロージャを紹介します。これにより、より深い理解が得られることを願っています。不適切な点があればご指摘ください。ありがとうございます。 1. クロージャとは何ですか?クロージャは、親関数のスコープ内のデータを参照してクロージャを作成する、ネストされた内部 (子) 関数です。 重要な理解: 1. クロージャを生成するにはネストされた関数が必要です 上記の条件が満たされない場合、クロージャは生成できません。次の例はこれを示しています。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntuが仮想マシンでインターネットに接続できない問題の解決策
>>: MySQL Community Server 5.7.19 インストール ガイド (詳細)
1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...
1. ユーザーを追加します。まず、adduser コマンドを使用して共通ユーザーを追加します。コマン...
目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...
1. 公式ウェブサイトアドレス公式サイトではインストールの参考手順が紹介されています。公式サイトを見...
注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...
序文この記事は私自身の製作過程の簡単な記録です。練習中に質問があれば、一緒に話し合うことができます。...
需要背景統計インターフェースでは、フロントエンドは 2 つの配列を返す必要があります。1 つは 0 ...
この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...
目次1. MySQLデータのバックアップ1.1、データをバックアップするためのmysqldumpコマ...
需要背景最近、Vue を使用してフロントエンド エンジニアリング システムと組み合わせ、以前のデモを...
序文最近、X 省のコールド チェーン トレーサビリティ システムの開発で忙しくしています。毎日午後 ...
NodeJS は次のファイルをコピーします:通常、小さなファイルのコピー操作では、ストリーム パイプ...
この記事では、例を使用して、MySQL で複数のトリガー操作を作成する方法について説明します。ご参考...
次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...
これは私の最初のブログ投稿です。時間の制約があるため、どのようにフォーマットすればよいかわかりません...