es6中let实例应用之一
有如下情景
html部分:
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<button class="btn">按钮4</button>
js部分:
var btns = $('.btn');
for(var i=0;i<btns.length;i++) {
btns.eq(i).click(function () {
alert(i);
})
}
现在有个需求 点击每一个按钮,弹出该按钮对应的索引 ,但是按照上面的js执行,这样不管点击哪一个按钮,都只会弹出4 具体原因可以自行分析
传统的解决方法,是采用闭包
var btns = $('.btn');
for(var i=0;i<btns.length;i++) {
(function(i){
btns.eq(i).click(function () {
alert(i);
})
})(i);
}
es6中利用let解决
var btns = $('.btn');
for(var let i=0;i<btns.length;i++) {
// (function(i){
btns.eq(i).click(function () {
alert(i);
})
// })(i);
}
es6中let实例应用之一的更多相关文章
- ES5和ES6中的继承 图解
Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...
- ES6中的Class
对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重 ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- ES6中的高阶函数:如同 a => b => c 一样简单
作者:Sequoia McDowell 2016年01月16日 ES6来啦!随着越来越多的代码库和思潮引领者开始在他们的代码中使用ES6,以往被认为是"仅需了解"的ES6特性变成了 ...
- ES6中的Symbol类型
前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型——Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个 ...
- ES6中的Set和Map集合
前面的话 在ES6标准制定以前,由于可选的集合类型有限,数组使用的又是数值型索引,因而经常被用于创建队列和栈.如果需要使用非数值型索引,就会用非数组对象创建所需的数据结构,而这就是Set集合与Map集 ...
- ES6中的类
前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...
- ES6中的模块
前面的话 JS用"共享一切"的方法加载代码,这是该语言中最容出错且容易令人感到困惑的地方.其他语言使用诸如包这样的概念来定义代码作用域,但在ES6以前,在应用程序的每一个JS中定义 ...
- es6中的class的使用
---恢复内容开始--- es5中生成实例对象的传统方法是通过构造函数: function Point(x,y){ this.x = x; this.y = y; } Point.prototype. ...
随机推荐
- mysql AUTO INCREMENT字段 语法
mysql AUTO INCREMENT字段 语法 作用:在新记录插入表中时生成一个唯一的数字 说明:我们通常希望在每次插入新记录时,自动地创建主键字段的值.我们可以在表中创建一个 auto-incr ...
- XML 验证器
XML 错误会终止您的程序 XML 文档中的错误会终止你的 XML 程序. W3C 的 XML 规范声明:如果 XML 文档存在错误,那么程序就不应当继续处理这个文档.理由是,XML 软件应当轻巧,快 ...
- 获取当前国家与ip地址
JS获取当前国家示例: <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"& ...
- postgres select TOP X in group 查询每个组的前几名
参考: https://stackoverflow.com/questions/27415706/postgresql-select-top-three-in-each-group http://ch ...
- Tire树模板-于是他错误的点名开始了
题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人. 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次,然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉(详情请见已结束比赛CON900). ...
- 【转】Django restful framework中自动生成API文档
转自 https://www.cnblogs.com/sui776265233/p/11350434.html 自动生成api文档(不管是函数视图还是类视图都能显示) 1.安装rest_framewo ...
- HDU1237--简单计算器(栈的应用)
Problem Description 读入一个只包含 +, -, *, / 的非负整数计算表达式,计算该表达式的值. Input 测试输入包含若干测试用例,每个测试用例占一行,每行不超过200个字符 ...
- 域名、主机名与URL
什么是域名? google.com.baidu.com.163.com等. 域名.主机名与URL例子 例子1: http://mail.163.com/index.html 1)http://:这个是 ...
- linux系统PS命令,按CPU、内存使用率对进程排序
https://blog.csdn.net/weixin_42123737/article/details/90081318
- 一个蒟蒻的解题过程记录——洛谷P1003 铺地毯
这到题算是我“火线回归”后码的第一道题,病好了心情不错,发篇博客分享一下 目录: ·题目描述 ·题目分析 ·解题思路 ·代码实现 ·总结 ·题目描述: 为了准备一场特殊的颁奖典礼,组织者在会场的一片矩 ...