閉鎖による問題を回避するためのletについて
<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <!--ここにコード--> <title>デモ</title> <スタイル> * { パディング: 0; マージン: 0; } .head、li div { 表示: インラインブロック; 幅: 70ピクセル; テキスト配置: 中央; } li .id、li .sex、.id、.sex { 幅: 15px; } li .name, .name { 幅: 40px; } li .tel、.tel { 幅: 90ピクセル; } li .del、.del { 幅: 15px; } ul { リストスタイル: なし; } .ユーザー削除{ カーソル: ポインタ; } </スタイル> </head> <本文> <div id="J_コンテナ"> <div class="レコードヘッド"> <div class="head id">シリアル番号</div> <div class="head name">名前</div> <div class="head sex">性別</div> <div class="head tel">電話番号</div> <div class="head Province">州</div> <div class="head">操作</div> </div> <ul id="J_リスト"> <li> <div class="id">1</div> <div class="name">張三</div> <div class="sex">男性</div> <div class="tel">13788888888</div> <div class="province">浙江省</div> <div class="user-delete">削除</div> </li> <li> <div class="id">2</div> <div class="name">李思</div> <div class="sex">女性</div> <div class="tel">13788887777</div> <div class="province">四川省</div> <div class="user-delete">削除</div> </li> <li> <div class="id">3</div> <div class="name">王二</div> <div class="sex">男性</div> <div class="tel">13788889999</div> <div class="province">広東省</div> <div class="user-delete">削除</div> </li> </ul> </div> <スクリプト> // ここでも ES6 を使用できます function Contact() { これを初期化します。 } // ここにコードを記述 </スクリプト> </本文> </html> コード1
code2 (他の人のコード) Contact.prototype.init = 関数(){ console.log("テスト"); var div = document.getElementsByClassName("user-delete"); var ul = document.querySelector("#J_List"); var list = ul.querySelectorAll("li"); (var i = 0; i < div.length; i++) の場合 { (関数 (i) { div[i].onclick = 関数(){ リスト[i].remove(); コンソールにログ出力します。 } })(私); } } 新しい連絡先(); で (関数 (i) { div[i].onclick = 関数(){ リスト[i].remove(); コンソールにログ出力します。 } })(私); この即時実行機能の意味が分かりません 私のコード Contact.prototype.init = 関数(){ div を document.getElementsByClassName("user-delete"); に設定します。 ul = document.querySelector("#J_List"); とします。 リストを ul.querySelectorAll("li") にします。 for (let i in div) { div[i].onclick = 関数(){ リスト[i].remove(); コンソールにログ出力します。 } } } 新しい連絡先(); 後で思い出しましたが、これはクロージャによって引き起こされる問題を回避するためでした。Liao Xuefeng先生がこのことについて話されていましたが、その時は思い出せませんでした。詳しくは、Liao Xuefengのクロージャを参照してください。ただし、当時はブロックレベルのスコープがなかったため、コードを実行しても問題はありませんでした。しかし、今ではletを使用してこの問題を回避できます。したがって、i が let を使用して宣言されている場合、関数をすぐに実行する必要はありません。また、コードを書くときは、var の使用を避け、代わりに let を使用する必要があります。もう 1 つは、for(let i =0;condition;++i) のようなステートメントの使用を避け、for...in... を使用するようにすることです。良い習慣を身につける必要があります。 これで、JavaScript の let クロージャによって発生する問題を回避する方法についての記事は終了です。JavaScript の let クロージャの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL における := と = の違いをグラフィカルに紹介
>>: Docker は固定コンテナ IP アドレスを実現するためにカスタム ネットワークを作成します。
目次意味カーソルの役割カーソルの使用カーソルの宣言カーソルを開くカーソルデータのトラバースカーソルを...
目次1. MySQL アーキテクチャ2. ネットワーク接続層3. データベースサービス層4. 接続プ...
目次LAMPアーキテクチャ1.ランプの紹介2. WebサービスワークフローWebサーバーのリソースは...
目次1. リストインターフェースの表示例2. データを表示する2.1. コンポーネントがリストに表示...
目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...
動作環境: MAC Docker バージョン: Docker version 17.12.0-ce,...
CS: ... 1. <link type="text/css" href...
この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...
序文数日前、偶然、コーナーの四角形が欠落している機能に遭遇しました。最初に頭に浮かんだのは、必要な場...
ドキュメントの範囲この記事では、Firefox やその他の Gecko ベースのブラウザ、Safar...
背景Shell の mysql-client を介して MySQL データベースにログインする場合、...
1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...
1. システムに必要な libaio ソフトウェアがインストールされていることを確認します。インスト...
いつも、気づかないうちに時間というのは驚くほど早く過ぎていきます。小暑が過ぎ、中暑に突入しました。太...
データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか?」など、...