JavaScript のクロージャによって発生する問題を回避する

JavaScript のクロージャによって発生する問題を回避する

閉鎖による問題を回避するためのletについて

オブジェクト指向の考え方を使用して、購入者情報の削除機能を完成させます。各情報には次のものが含まれます。

名前 電話番号 都道府県

次の要件を実装します。
サードパーティのライブラリは使用できず、ネイティブ コードを使用する必要があります。
与えられた基本的なコード構造と組み合わせて、ここのコードの下の 2 つの場所にコードを追加して、購入者情報の削除機能を完成させます。このページは携帯電話で明確に表示する必要があることに注意してください。

js コードを任意に調整し、例えば es6 コードを使用して完成させることができます。

<!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

<meta name="viewport" content="width = デバイス幅、初期スケール=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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript における関数のネスト
  • 1つの記事でJavaScriptのクロージャ関数について学ぶ
  • JavaScript クロージャの説明
  • Javascript のスコープとクロージャの詳細
  • JS の難しさ 同期と非同期、スコープとクロージャ、プロトタイプとプロトタイプ チェーンの詳細な説明
  • JavaScript のクロージャの問題の詳細な説明
  • JavaScript 関数の使用方法の詳細な説明 [関数の定義、パラメータ、バインディング、スコープ、クロージャなど]
  • js における関数のネストとクロージャの詳細

<<:  MySQL における := と = の違いをグラフィカルに紹介

>>:  Docker は固定コンテナ IP アドレスを実現するためにカスタム ネットワークを作成します。

推薦する

MySQL カーソル関数と使用法

目次意味カーソルの役割カーソルの使用カーソルの宣言カーソルを開くカーソルデータのトラバースカーソルを...

MySQL データベース アーキテクチャの詳細

目次1. MySQL アーキテクチャ2. ネットワーク接続層3. データベースサービス層4. 接続プ...

LAMP ソースコードを使用したエンタープライズレベルのインストールチュートリアル

目次LAMPアーキテクチャ1.ランプの紹介2. WebサービスワークフローWebサーバーのリソースは...

Vue3 リストインターフェースデータ表示の詳細

目次1. リストインターフェースの表示例2. データを表示する2.1. コンポーネントがリストに表示...

ミニプログラムでマインドマップを描く方法

目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...

DockerでNginxサーバーを作成する方法

動作環境: MAC Docker バージョン: Docker version 17.12.0-ce,...

JS、CSS スタイルのリファレンスの記述

CS: ... 1. <link type="text/css" href...

MySQL カーソルの概念と使用法の詳細な説明

この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...

CSS3は、欠けた角の長方形、折り畳まれた角の長方形、欠けた角の境界線を実装しています。

序文数日前、偶然、コーナーの四角形が欠落している機能に遭遇しました。最初に頭に浮かんだのは、必要な場...

よく知られているブラウザのDOCTYPEモード選択メカニズム

ドキュメントの範囲この記事では、Firefox やその他の Gecko ベースのブラウザ、Safar...

シェルでパスワードなしでMySQLデータベースに素早くログインする方法

背景Shell の mysql-client を介して MySQL データベースにログインする場合、...

Nginx転送マッチングルールの実装

1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...

Linux にバイナリ MySQL をインストールして MySQL パスワードをクラックする方法

1. システムに必要な libaio ソフトウェアがインストールされていることを確認します。インスト...

MySQL マルチテーブルクエリの詳細な説明

いつも、気づかないうちに時間というのは驚くほど早く過ぎていきます。小暑が過ぎ、中暑に突入しました。太...

MySQL のデータベース パフォーマンスに影響を与える要因の説明

データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか?」など、...