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. ...
随机推荐
- 【canvas学习笔记三】样式和颜色
上一节我们学习了如何用路径绘制各种形状,但我们只能用默认的颜色和线条.这节就来学习设置不同的颜色和线条样式. 颜色 设置颜色主要有两个属性: fillStyle = color 设置填充颜色 stro ...
- VTK 编译过程中出现的hdf5长度(I64)错误解决办法
最近在使用vtk和cuda做大规模图像处理方面的问题研究,在编译vtk的过程中发现第三方库hdf5不能够解决I64长度的探测识别问题.为了节约大家的时间,现在把我经过实践得到的解决方案共享出来,这里要 ...
- es之索引的别名操作
1:增加别名 为索引school添加一个别名alias1: 1.1:创建索引 PUT student{ "settings": {"number_of_shards&qu ...
- Web Api试图加载格式不正确的程序,解决方法
Web Api试图加载格式不正确的程序,错误如下: 问题原因: 出现上述问题的原因是,所加载的程序集中有32位的,也有64位的,IIS 7 程序池 在Windows下.Net FrameWork是64 ...
- NOIP2009靶形数独(暴搜)
题目传送门 题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向Z博士请教,Z博士拿出了他最近发明 ...
- 白鹭http请求post
示例demo: //new http请求 var request = new egret.HttpRequest(); //请求参数 var params = "p1=postP1& ...
- Linux shell - shift命令用法(转载)
位置参数可以用shift命令左移.比如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1.$2.$3丢弃,$0不移动.不带参数的shift命令相当于shift 1. 非常 ...
- Linux高级调试与优化——信号量机制与应用程序崩溃
背景介绍 Linux分为内核态和用户态,用户态通过系统调用(syscall)进入内核态执行. 用户空间的glibc库将Linux内核系统调用封装成GNU C Library库文件(兼容ANSI &am ...
- 在vi vim中使用正则表达式与 普通perl正则的区别?
参考这篇文章很好 vim中的正则表达式常用的命令有种, 即搜索和替换 /: 搜索 :s 替换 在vim中的正则表达式和perl编程的正则表达式还是有区别的: 正则表达式中的内容包括: 字面字符... ...
- 【linux】杀掉进程命令
1.找到对应的进程 通过端口查找 lsof -i:端口号 netstat -tunlp | grep 端口 lsof -i:9500 netstat -tunlp | grep 9500 2. ...