Avoiding Problems Caused by Closures in JavaScript

Avoiding Problems Caused by Closures in JavaScript

About let to avoid problems caused by closure

Use object-oriented thinking to complete the buyer information deletion function. Each piece of information contains:

Name Phone Number Province

Implement the following requirements:
No third-party libraries can be used and native code must be used.
Combined with the basic code structure given, add code at the two locations below code here to complete the buyer information deletion function. Note that this page must be displayed clearly on the mobile phone.

The js code can be adjusted arbitrarily, for example, and completed using es6 code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--code here-->
    <title>demo</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .head, li div {
            display: inline-block;
            width: 70px;
            text-align: center;
        }

        li .id, li .sex, .id, .sex {
            width: 15px;
        }

        li .name, .name {
            width: 40px;
        }

        li .tel, .tel {
            width: 90px;
        }

        li .del, .del {
            width: 15px;
        }

        ul {
            list-style: none;
        }

        .user-delete {
            cursor: pointer;
        }

    </style>
</head>

<body>
<div id="J_container">
    <div class="record-head">
        <div class="head id">Serial number</div>
        <div class="head name">Name</div>
        <div class="head sex">Gender</div>
        <div class="head tel">Phone number</div>
        <div class="head province">Province</div>
        <div class="head">Operation</div>
    </div>
    <ul id="J_List">
        <li>
            <div class="id">1</div>
            <div class="name">Zhang San</div>
            <div class="sex">Male</div>
            <div class="tel">13788888888</div>
            <div class="province">Zhejiang</div>
            <div class="user-delete">Delete</div>
        </li>
        <li>
            <div class="id">2</div>
            <div class="name">Li Si</div>
            <div class="sex">female</div>
            <div class="tel">13788887777</div>
            <div class="province">Sichuan</div>
            <div class="user-delete">Delete</div>
        </li>
        <li>
            <div class="id">3</div>
            <div class="name">Wang Er</div>
            <div class="sex">Male</div>
            <div class="tel">13788889999</div>
            <div class="province">Guangdong</div>
            <div class="user-delete">Delete</div>
        </li>
    </ul>
</div>

<script>
    // You can also use ES6 here function Contact() {
        this.init();
    }

    // your code here
</script>
</body>
</html>

code1

<meta name="viewport" content="width = device-width,initial-scale=1">

code2 (other people's code)

 Contact.prototype.init = function () {
        console.log("Test");
        var div = document.getElementsByClassName("user-delete");
        var ul = document.querySelector("#J_List");
        var list = ul.querySelectorAll("li");

        for (var i = 0; i < div.length; i++) {
            (function (i) {
                div[i].onclick = function () {
                    list[i].remove();
                    console.log(i);
                }
            })(i);
        }
    }

    new Contact();

in

 (function (i) {
                div[i].onclick = function () {
                    list[i].remove();
                    console.log(i);
                }
            })(i);

I don't understand the meaning of this immediate execution function

My code

 Contact.prototype.init = function () {
        let div = document.getElementsByClassName("user-delete");
        let ul = document.querySelector("#J_List");
        let list = ul.querySelectorAll("li");

        for (let i in div) {
            div[i].onclick = function () {
                list[i].remove();
                console.log(i);
            }
        }
    }

    new Contact();

Later I remembered that it was to avoid the problems caused by closures. Teacher Liao Xuefeng talked about this, but I didn’t remember it at the moment. For details, please see Liao Xuefeng’s closure. However, there was no problem running my code because there was no block-level scope at the time. But now I can use let to avoid this problem. So if i is declared using let, there is no need to execute the function immediately. And when writing code, you should avoid using var and use let instead. Another thing is to avoid using statements like for(let i =0;condition;++i) and try to use for...in... Some good habits should be developed.

This concludes this article on how to avoid problems caused by closures with let in JavaScript. For more information on let closures in JavaScript, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Function nesting in JavaScript
  • Learn about JavaScript closure functions in one article
  • JavaScript Closures Explained
  • Javascript scope and closure details
  • JS Difficulties Synchronous and Asynchronous and Scope and Closure and Detailed Explanation of Prototype and Prototype Chain
  • Detailed explanation of JavaScript closure issues
  • Detailed explanation of JavaScript function usage [function definition, parameters, binding, scope, closure, etc.]
  • Details of function nesting and closures in js

<<:  Graphical introduction to the difference between := and = in MySQL

>>:  Docker compose custom network to achieve fixed container IP address

Recommend

Sublime Text - Recommended method for setting browser shortcut keys

It is common to view code effects in different br...

Four completely different experiences in Apple Watch interaction design revealed

Today is still a case of Watch app design. I love...

Detailed explanation of the idea of ​​implementing dynamic effect of lyrics progress text color filling change using CSS3

When playing music, the lyrics will gradually fil...

Configure VIM as a C++ development editor in Ubuntu

1. Copy the configuration file to the user enviro...

How to use limit_req_zone in Nginx to limit the access to the same IP

Nginx can use the limit_req_zone directive of the...

Solve the problem of Navicat for Mysql connection error 1251 (connection failed)

Because what I wrote before was not detailed enou...

Solve the problem that images and other resources are automatically deleted after Tomcat is redeployed

Yesterday when I was implementing the function of...

Detailed explanation of Linux inotify real-time backup implementation method

Real-time replication is the most important way t...

HTML implements Double 11 coupon grabbing (set time to open the coupon grabbing page)

Without further ado, I will post the code for you...

How to prevent computer slowdown when WIN10 has multiple databases installed

Enable the service when you need it, and disable ...

mysql-8.0.15-winx64 decompression version installation tutorial and three ways to exit

1. Download from the official website and unzip h...

Vue+js click arrow to switch pictures

This article example shares the specific code of ...

HTML table markup tutorial (10): cell padding attribute CELLPADDING

Cell padding is the distance between the cell con...

Implementation code for using CSS text-emphasis to emphasize text

1. Introduction In the past, if you wanted to emp...

Detailed process of installing and deploying onlyoffice in docker

0. System requirements CPU I5-10400F or above Mem...