Shulou(Shulou.com)05/31 Report--

This article mainly introduces the JavaScript let to avoid closures caused by how to solve the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, with a certain reference value, I believe that after reading this JavaScript let to avoid closures caused by how to solve the article will have a harvest, let's take a look.

On the problems caused by let avoiding closures

The function of deleting buyer information is completed by using object-oriented thought, and each piece of information contains:

Name

Telephone

Phone number

Province

Meet the following requirements:

You cannot borrow any third-party libraries and need to use native code to implement them.

Combined with the basic code structure, the code here supplementary code is added in 2 places below to complete the deletion function of buyer information. Note that this page should be clearly displayed on the mobile phone.

The js code can be adjusted arbitrarily, for example, and done with es6 code.

Demo * {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 } serial number, name, sex, telephone number, province operation 1 Zhang San male 13788888888 Zhejiang delete 2 Li Si female 13788887777 Sichuan deletion 3 Wang Ernan 13788889999 Guangdong deletion / / here you can also change it to ES6 function Contact () {this.init () } / / your code here

Code1

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) ) {(function (I) {div [I] .onclick = function () {list [I] .remove (); console.log (I);}}) (I);}} new Contact ()

Among them

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

The immediate execution of the function does not understand the meaning.

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 in order to avoid the problems caused by closures, teacher Liao Xuefeng talked about this paragraph, but I didn't think of it for a moment. See Liao Xuefeng closures for details.

But there was no problem with my code running, because there was no such thing as block scope at the time, but now I can use let to avoid this problem. So if I is declared in let, you don't have to execute the function immediately. And writing code should avoid using var and use let instead. Another way is to avoid using the phrase for (let I = 0 / position conditionality among others) and use for...in... as much as possible. Some good habits should be formed.

This is the end of the article on "how to solve the problem caused by let avoiding closures in JavaScript". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to solve problems caused by let closures in JavaScript". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.