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 をよろしくお願いいたします。

以下もご興味があるかもしれません: