JavaScript中let避免闭包造成问题
关于 let 避免闭包带来的问题
利用面向对象思想完成买家信息删除功能，每一条信息包含：
姓名
电话
电话号码
省份实现以下要求：
不能借用任何第三方库，需要使用原生代码实现。
结合给出的基本代码结构，在下方2处code here补充代码，完成买家信息的删除功能，注意此页面要在手机上清晰显示。js代码可以任意调整，例如和使用es6代码完成。
<!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">序号</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_List">
<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>
<script>
// 此处也可换成ES6的写法
function Contact() {
this.init();
}
// your code here
</script>
</body>
</html>
code1
<meta name="viewport" content="width = device-width,initial-scale=1">
code2 ( 别人的代码 )
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();
其中
(function (i) {
div[i].onclick = function () {
list[i].remove();
console.log(i);
}
})(i);
这段立即执行函数没看懂意义
我的代码
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();
后来想起来是为了避免闭包带来的问题，这一段廖雪峰老师讲过，但是一时没有想起来，详见 廖雪峰闭包
但是我的代码运行起来也是没有任何问题的，因为当时没有块级作用域的说法，但是现在可以用 let 来避免这个问题。所以如果 i 是用 let 来声明的话就可以不用立即执行函数。并且写代码应当避免用 var，改用 let。还有一个，避免使用 for(let i =0;condition;++i) 这种语句，尽量使用 for...in... 一些好的习惯要养成。
到此这篇关于JavaScript中let避免闭包造成问题的文章就介绍到这了,更多相关JavaScript中let闭包问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
如何将JSP/Servlet项目转换为Spring Boot项目
创建Spring Boot应用 在基于Spring来重构JSP应用之前,我们先引入Spring Boot,使之成为一个Spring Boot应用.你只需要在原来的代码基础上,增加简单的配置和少量的代码即可引入Spring Boot,整个过程5分钟就能完成. 这里我们使用Maven来管理依赖,因为我们需要增加Spring Boot相关的依赖.也可以在Eclipse或者IntelliJ中创建一个新的Maven项目. 在POM文件中加入Spring Boot相关的配置. <parent> <g
-
Jsp+Servlet实现简单登录注册查询
本文实例为大家分享了Jsp+Servlet实现简单登录注册查询的具体代码,供大家参考,具体内容如下 1.注册功能: 制作一个注册页面 用户输入: 用户名 密码 年龄 注册成功:-->跳转至登录页面进行登录 注册失败:-->文字或其他形式的提示皆可 2.简易查询: 制作一个查询页面 输入用户名 显示该用户的用户名.密码.年龄 演示 1.启动进入登陆页面 2.点击注册,进入注册页面,成功跳转到登录页面 失败则提示 回到登录页面,登录成功进入查询页面 登录失败显示提示信息 输入用户名->显示该
-
JavaScript中ES6规范中let和const的用法和区别
ES6-- let 和 const 命令 引言 本文主要讲解ES6中变量的相关操作,变量的命名, 讲解 var. let . const 三者的区别 正文 ES6中的 let 和 const 都是用来声明变量的, 他们与 var 有所区别 let 命令 我们都知道在for循环中,我们命名的变量 i 一般都只是为了在这个循环中使用,才临时命名的, 我们希望循环结束后,这个变量就消失, 但是却相反,用 var 命名的变量,在 for 循环结束后并不会销毁,而会存在于全局中. for(var i=0;
-
jsp学习之scriptlet的使用方法详解
scriptlet的使用 jsp页面中分三种scriptlet: 第一种:<% %> 可以在里面写java的代码.定义java变量以及书写java语句. 第二种:<%! %> 可以在里面定义全局变量以及方法,类. 第三种:<%=%> 用于打印变量或者输出值. <% %>的使用 <html> <head> <title>this is java page</title> </head> <bod
-
jsp+servlet简单实现上传文件功能（保存目录改进）
1.jsp前端 <%-- Created by IntelliJ IDEA. User: Lenovo Date: 2020/6/19 Time: 22:53 Learn from https://www.bilibili.com/video/BV18z411i7gh?t=23&p=192 To change this template use File | Settings | File Templates. --%> <%@ page contentType="te
-
leaflet加载geojson叠加显示功能代码
这篇文章主要介绍了leaflet加载geojson叠加显示功能代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 geojson需要先制作shp,然后导入下面网站生成geojson. https://mapshaper.org/ geojson,最好放后台,前台通过异步请求去加载json,然后显示. getGeojsonByName({name:geojson_name}).then(data=>{ if (this.bondarylayer)
-
基于leaflet.js实现修改地图主题样式的流程分析
今天遇到了一点点的小情况,我自己根据leaflet.js做了一个离线地图,公司要用来做态势,但是地图的底图用的是高德的原图,样式是下面这样的: 但是态势的主题是如下的这种淡蓝色: 这就造成了本次的需求,需要可以修改样式的主题,由于本人是个后端小佬,前端菜鸡,所以实现起来发生了一些困难,这里简单介绍下实现的路程. 首先看下效果: 然后介绍下艰辛的过程: 首先,需要用到一个基于leaflet.js的插件: https://github.com/hnrchrdl/leaflet-tilelayer-c
-
JS pushlet XMLAdapter适配器用法案例解析
近日有人咨询Pushlet XMLAdapter 适配器的问题,我特留意了一下 到官方看了一下http://www.pushlets.com/,Development Roadmap中最后面说到了这个问题,AJAX (XMLHttpRequest) Support 使用AJAX (XMLHttpRequest)的好处就是: cleaner and thinner client-side lib no issues with "busy" indicators pure XML data
-
JavaScript中let避免闭包造成问题
关于 let 避免闭包带来的问题 利用面向对象思想完成买家信息删除功能,每一条信息包含: 姓名 电话 电话号码 省份 实现以下要求: 不能借用任何第三方库,需要使用原生代码实现. 结合给出的基本代码结构,在下方2处code here补充代码,完成买家信息的删除功能,注意此页面要在手机上清晰显示. js代码可以任意调整,例如和使用es6代码完成. <!DOCTYPE html> <html> <head> <meta charset="utf-8"
-
javascript中巧用“闭包”实现程序的暂停执行功能
Author:月影 Form:http://bbs.51js.com/thread-66361-1-1.html <input type="button" value="继续" onclick='st();'/> <script> /*基本原理*/ var st = (function(){ alert(1); alert(2); return function() { alert(3); alert(4);
-
Javascript 中的类和闭包
有人说javascript也是面向对象的,只是它是prototype based,当然这只是概念上的区别,我不想讨论js是不是面向对象的,关键是想说明虽然javascript的类表现得很像其他语言中的类,但是内部的实现机理确不太一致,如果一味的把javascript中的类类比作其他语言中的类,有时候脑子会犯混. 先看一段简单的代码,一般教材上介绍如何新建一个类的时候都是这样的(当然还有更复杂的方法,不过本质上是一样的): 复制代码 代码如下: function MyClass(x) { this
-
javascript中闭包概念与用法深入理解
本文实例分析了javascript中闭包概念与用法.分享给大家供大家参考,具体如下: 1.问题的引出,什么时候会遇到闭包? 首先因为JS是没有块状作用域的,但是有函数作用域即函数作为了局部变量之间的界限,不同函数内的局部变量具有独立性, 因为JS没有块状作用域,笔者初学JS时,在事件的监听时,因为不理解JS中局部变量的作用域,犯过不少错误! (1)JS中的变量作用域 for(var i=0;i<9;i++) { } alert(i) //输出9 我们发现,虽然变量i是块状区域for()内的一个局
-
JavaScript中闭包之浅析解读(必看篇)
JavaScript中的闭包真心是一个老生常谈的问题了,最近面试也是一直问到,我自己的表述能力又不能完全支撑起来,真是抓狂.在回来的路上,我突然想到了一个很简单的事情,其实我们在做项目时候,其实就经常用到闭包的,可是面试问的时候,回答又往往是我们经常搜到的答案,唉 不管是应付面试 还是真的想学点东西 ,我也用自己的理解跟大家分享一下,书面化就避免不了了的. 1.闭包是什么? 红宝书中曰:"是指有权访问另外一个函数作用域中的变量的函数." 简单的说,JavaScript允许使用内部函数-
-
JavaScript中闭包的详解
闭包是什么 在 JavaScript 中,闭包是一个让人很难弄懂的概念.ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量. 是不是看完这个定义感觉更加懵逼了?别急,我们来分析一下. 闭包是一个函数 闭包可以使用在它外面定义的变量 闭包存在定义该变量的作用域中 好像有点清晰了,但是使用在它外面定义的变量是什么意思,我们先来看看变量作用域. 变量作用域 变量可分为全局变量和局部变量.全局变量的作用域就是全局性的,在 js
-
JavaScript中的闭包(Closure)详细介绍
闭包是JavaScript中一个重要的特性,其最大的作用在于保存函数运行过程中的信息.在JavaScript中,闭包的诸多特性源自函数调用过程中的作用域链上. 函数调用对象与变量的作用域链 对于JavaScript中的每一次函数调用,JavaScript都会创建一个局部对象以储存在该函数中定义的局部变量:如果在该函数内部还有一个嵌套定义的函数(nested function),那么JavaScript会在已经定义的局部对象之上再定义一个嵌套局部对象.对于一个函数,其内部有多少层的嵌套函数定义,也
-
JavaScript中的作用域链和闭包
作用域 全局作用域 局部作用域 作用域链 执行上下文 活动对象 闭包 闭包优化 JavaScript中出现了一个以前没学过的概念--闭包.何为闭包?从表面理解即封闭的包,与作用域有关.所以,说闭包以前先说说作用域. 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,以下几种情形拥有全局作
-
JavaScript中闭包的写法和作用详解
1.什么是闭包 闭包是有权访问另一个函数作用域的变量的函数. 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内.而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数和声明的其他内部函数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包. 2.变量的作用域 要理解闭包,首先要理解变量的作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变
-
谈谈JavaScript中的函数与闭包
闭包这东西,说难也难,说不难也不难,下面我就以自己的理解来说一下闭包 一.闭包的解释说明 对于函数式语言来说,函数可以保存内部的数据状态.对于像C#这种编译型命令式语言来说,由于代码总是在代码段中执行,而代码段是只读的,因此函数中的数据只能是静态数据.函数内部的局部变量存放在栈上,在函数执行结束以后,所占用的栈被释放,因此局部变量是不能保存的. Javascript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在定义函数时确定的.因此Javascript中函数对象不仅保存代码逻辑,还必