ホームページ ウェブフロントエンド jsチュートリアル JavaScript 関数クロージャーの使用に関する詳細な説明とコードの詳細な説明

JavaScript 関数クロージャーの使用に関する詳細な説明とコードの詳細な説明

Jul 25, 2017 pm 03:04 PM
javascript js 予防

クロージャを表す英語はクロージャです。クロージャは 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(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    lists[ i ].onmouseover = function(){
        alert(i);    
    };
}
ログイン後にコピー

解決策 1:

var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    (function(index){
        lists[ index ].onmouseover = function(){
            alert(index);    
        };                    
    })(i);
}
ログイン後にコピー

解決策 2:

var lists = document.getElementsByTagName(&#39;li&#39;);
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(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    eventListener(lists[ i ] , i);
}
ログイン後にコピー

以上がJavaScript 関数クロージャーの使用に関する詳細な説明とコードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

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

明朝試験で注意すべき事項の紹介 明朝試験で注意すべき事項の紹介 Mar 13, 2024 pm 08:13 PM

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

初めてDouyinでライブブロードキャストを開始するにはどうすればよいですか?初めてライブ配信をする際に気をつけることは何ですか? 初めてDouyinでライブブロードキャストを開始するにはどうすればよいですか?初めてライブ配信をする際に気をつけることは何ですか? Mar 22, 2024 pm 04:10 PM

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

ネットワークなしで pip をインストールする手順と注意事項 ネットワークなしで pip をインストールする手順と注意事項 Jan 18, 2024 am 10:02 AM

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

localstorage を使用してデータを保存する手順と注意事項 localstorage を使用してデータを保存する手順と注意事項 Jan 11, 2024 pm 04:51 PM

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

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

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

jsとvueの関係 jsとvueの関係 Mar 11, 2024 pm 05:21 PM

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

Linux 環境で pip を正しくインストールして使用するための手順とポイント Linux 環境で pip を正しくインストールして使用するための手順とポイント Jan 17, 2024 am 09:31 AM

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

See all articles