JavaScript 関数クロージャーの使用に関する詳細な説明とコードの詳細な説明
クロージャを表す英語はクロージャです。クロージャは JavaScript の知識の非常に重要な部分です。クロージャを使用すると、コードの量が大幅に削減され、コードがより明確に見えるなどの効果が得られます。つまり、クロージャは非常に強力です。
クロージャの意味: 端的に言えば、クロージャは関数の入れ子です。外側の関数が実行されている場合でも、内側の関数は外側の関数のすべての変数を使用できます (これには JavaScript スコープ チェーンが関係します)。
例 1
function checkClosure(){ var str = 'rain-man'; setTimeout( function(){ alert(str); } //这是一个匿名函数 , 2000); } checkClosure();
この例は非常に単純に見えますが、実行プロセスを注意深く分析した後でも、まだ多くの知識ポイントがあります。checkClosure 関数の実行は瞬時に行われ (おそらく 0.00001 ミリ秒しかかかりません)、関数内で作成されます。 checkClosure の本体 変数 str が取得されます。これは、setTimeout の匿名関数が str への参照を持っているためです。 2 秒後、関数本体内の匿名関数が実行され、str が解放されます。
例 2、コードの最適化
function forTimeout(x, y){ alert(x + y); } function delay(x , y , time){ setTimeout('forTimeout(' + x + ',' + y + ')' , time); } /** * 上面的delay函数十分难以阅读,也不容易编写,但如果使用闭包就可以让代码更加清晰 * function delay(x , y , time){ * setTimeout( * function(){ * forTimeout(x , y) * } * , time); * } */
匿名関数の最大の用途は、クロージャ (JavaScript 言語の機能の 1 つ) を作成することです。また、名前空間を構築してグローバル変数の使用を減らすこともできます。
例 3:
var oEvent = {}; (function(){ var addEvent = function(){ /*代码的实现省略了*/ }; function removeEvent(){} oEvent.addEvent = addEvent; oEvent.removeEvent = removeEvent; })();
例 4:
var rainman = (function(x , y){ return x + y; })(2 , 3); /** * 也可以写成下面的形式,因为第一个括号只是帮助我们阅读,但是不推荐使用下面这种书写格式。 * var rainman = function(x , y){ * return x + y; * }(2 , 3); */
ここでは、変数 Rainman を作成し、匿名関数を直接呼び出すことでそれを 5 に初期化します。この小さなトリックは、場合によっては非常に実用的です。
例 5:
var outer = null; (function(){ var one = 1; function inner (){ one += 1; alert(one); } outer = inner; })(); outer(); //2 outer(); //3 outer(); //4
このコードの変数 1 はローカル変数 (関数内で定義されているため) であるため、外部からアクセスできません。ただし、ここでは変数 one にアクセスできる inner 関数を作成し、グローバル変数 external は inner を参照するため、outer を 3 回呼び出すと増分結果がポップアップされます。
注: クロージャにより、内部関数は親関数内の変数を参照できますが、変数は最終値です
例 6:
/** * <body> * <ul> * <li>one</li> * <li>two</li> * <li>three</li> * <li>one</li> * </ul> */ var lists = document.getElementsByTagName('li'); for(var i = 0 , len = lists.length ; i < len ; i++){ lists[ i ].onmouseover = function(){ alert(i); }; }
各
解決策 1:
var lists = document.getElementsByTagName('li'); for(var i = 0 , len = lists.length ; i < len ; i++){ (function(index){ lists[ index ].onmouseover = function(){ alert(index); }; })(i); }
解決策 2:
var lists = document.getElementsByTagName('li'); for(var i = 0, len = lists.length; i < len; i++){ lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标 lists[ i ].onmouseover = function(){ alert(this.$$index); }; }
解決策 3:
function eventListener(list, index){ list.onmouseover = function(){ alert(index); }; } var lists = document.getElementsByTagName('li'); for(var i = 0 , len = lists.length ; i < len ; i++){ eventListener(lists[ i ] , i); }
以上がJavaScript 関数クロージャーの使用に関する詳細な説明とコードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

Mingchao テスト中は、情報の損失やゲームへの異常なログインを防ぐために、システムのアップグレード、工場出荷時設定へのリセット、部品の交換は避けてください。特別な注意事項: テスト期間中は異議申し立てチャンネルがありませんので、取り扱いには注意してください。 Mingchao テスト中に注意が必要な事項の紹介: システムのアップグレード、工場出荷時の設定の復元、機器のコンポーネントの交換などは行わないでください。注: 1. 情報の損失を避けるため、テスト期間中は慎重にシステムをアップグレードしてください。 2. システムをアップデートすると、ゲームにログインできなくなる問題が発生する可能性があります。 3. 現段階ではまだアピールチャンネルは開設されていないため、アップグレードするかどうかはプレイヤー自身の判断で選択してください。 4.同時に、1つのゲームアカウントは1台のAndroidデバイスと1台のPCでのみ使用できます。 5. 携帯電話システムをアップグレードしたり、工場出荷時の設定に戻したり、デバイスを交換したりする前に、テストが完了するまで待つことをお勧めします。

ショートビデオプラットフォームの台頭により、Douyinは多くの人々の日常生活に欠かせないものになりました。 Douyin でのライブ配信やファンとの交流は、多くのユーザーの夢です。では、Douyin で初めてライブブロードキャストを開始するにはどうすればよいでしょうか? 1.Douyinで初めてライブブロードキャストを開始するにはどうすればよいですか? 1. 準備 ライブブロードキャストを開始するには、まずDouyinアカウントが実名認証を完了していることを確認する必要があります。実名認証のチュートリアルは、Douyin APP の「自分」 -> 「設定」 -> 「アカウントとセキュリティ」にあります。実名認証が完了すると、ライブ配信条件を満たしてDouyinプラットフォームでライブ配信を開始できます。 2. ライブ配信許可を申請する ライブ配信条件を満たした後、ライブ配信許可を申請する必要があります。 Douyin APPを開き、「自分」→「クリエイターセンター」→「ダイレクト」をクリックします。

オフライン環境に pip をインストールする方法と注意点. ネットワークがスムーズでないオフライン環境では、pip のインストールが困難になります。この記事では、オフライン環境に pip をインストールするいくつかの方法を紹介し、具体的なコード例を示します。方法 1: オフライン インストール パッケージを使用する インターネットに接続できる環境で、次のコマンドを使用して、公式ソースから pip インストール パッケージをダウンロードします: pipdownloadpip このコマンドは、公式ソースから pip とその依存パッケージを自動的にダウンロードし、現在のディレクトリに保存します。ダウンロードした圧縮パッケージをリモートの場所に移動します

localStorage を使用してデータを保存する手順と注意事項 この記事では、主に localStorage を使用してデータを保存する方法と、関連するコード例を紹介します。 LocalStorage は、サーバーを経由せずにデータをユーザーのコンピューターのローカルに保持する、ブラウザーにデータを保存する方法です。 localStorage を使用してデータを保存する手順と注意事項は次のとおりです。ステップ 1: ブラウザが LocalStorage をサポートしているかどうかを確認する

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンド フレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。

Linux 環境での pip のインストール手順と注意点 タイトル: Linux 環境での pip のインストール手順と注意点 Python を開発する際、プログラムの機能を高めるためにサードパーティのライブラリを使用する必要があることがよくあります。 Python の標準パッケージ管理ツールである pip は、これらのサードパーティ ライブラリを簡単にインストール、アップグレード、管理できます。この記事では、Linux 環境に pip をインストールする手順を紹介し、注意事項と具体的なコード例を参考にします。 1. pipをインストールしてPythonのバージョンを確認する
