JS一个经典闭包问题
这里是记录一些本人在学习过程中觉得重要的知识点,记录下来以供日后查看,如有不对欢迎指正,望在前端的路上共勉!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 在页面添加三个按钮 -->
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3"> <script>
// 获取页面所有的input
var aBtn = document.getElementsByTagName('input'); // 循环绑定点击事件,当然毫无疑问这里点击之后会弹出3,
//因为我们知道js是单线程的,当基本逻辑语句执行完之后,才会执行点击事件
//而当你触发点击事件的时候,for循环都已经跑完了,所以i已经变成了3;
for(var i = 0; i < aBtn.length; i++){
aBtn[i].onclick = function(){
alert(i);
}
} // 解决方法1:也是最简单的方法,就是将for循环的var变成let
//这样当点击每个按钮的时候,就会依次弹出0,1,2;
//let是ES6新增的一个变量声明方式,拥有块级作用域;
for(let i = 0; i < aBtn.length; i++){
aBtn[i].onclick = function(){
alert(i);
}
} //解决方法2:利用闭包(说是闭包,貌似也不完全是),也就是函数作用域访问原则的特性
//函数内部可以访问外部的变量,外部却访问不了里边的;
for(var i = 0; i < aBtn.length; i++){
(function(i){
aBtn[i].onclick = function(){
alert(i);
}
})(i);
}
</script>
</body>
</html>
当然,这里也不仅仅局限于点击事件,也可以换成setTimeout等也有相同的问题,可以用这两种方法来解决;
JS一个经典闭包问题的更多相关文章
- js经典闭包
setTimeout函数之循环和闭包 前言 之前对于setTimeout的一个经典问题的理解总是感到很迷惑,现在好像清晰一点了,所以把我的理解写下来,我对js的理解也不深入,如果有错误,请务必指出.以 ...
- 详解js中的闭包
前言 在js中,闭包是一个很重要又相当不容易完全理解的要点,网上关于讲解闭包的文章非常多,但是并不是非常容易读懂,在这里以<javascript高级程序设计>里面的理论为基础.用拆分的方式 ...
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- 「JavaScript」同步、异步、回调执行顺序之经典闭包setTimeout分析
聊聊同步.异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你做完再离开”.小T微笑着答应了,眼角却滑 ...
- 彻底理解js中的闭包
闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,那么什么是闭包呢?它又有什么用呢? 我们都知道,js的作用域分两种,全局和局部,基于我们所熟悉的作用域链相关知识,我们知道在js作用 ...
- 同步、异步、回调执行顺序之经典闭包setTimeout分析
聊聊同步.异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你做完再离开”.小T微笑着答应了,眼角却滑 ...
- JS基础学习——闭包
JS基础学习--闭包 什么是闭包 闭包的定义如下,它的意思是闭包使得函数可以记住和访问它的词法范围,即使函数是在它声明的词法范围外执行.更简单来讲,函数为了自己能够正确执行,它对自己的词法范围产生闭包 ...
- 【学习笔记】深入理解js原型和闭包(15)——闭包
前面提到的上下文环境和作用域的知识,除了了解这些知识之外,还是理解闭包的基础. 至于“闭包”这个词的概念的文字描述,确实不好解释,我看过很多遍,但是现在还是记不住. 但是你只需要知道应用的两种情况即可 ...
- 【学习笔记】深入理解js原型和闭包(10)——this
接着上一节讲的话,应该轮到“执行上下文栈”了,但是这里不得不插入一节,把this说一下.因为this很重要,js的面试题如果不出几个与this有关的,那出题者都不合格. 其实,this的取值,分四种情 ...
随机推荐
- [NOI 2002] 银河英雄传说 (带权并查集)
题目描述 公元五八○一年,地球居民迁至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军事集团在巴米利恩星域爆发战争.泰山压顶 ...
- 关于linux三种网络形式
今天是开始的第一天,额,没什么仪式.舍友偶然间提醒我,应该把学习的东西,做一下规划和整理.我想一想也是对的.所以开通了这个.希望以后回来可以看看自己曾经的幼稚,那证明了我不断在学习在进步.最近在准备C ...
- python对大文件的处理
多线程框架中采取queue来实现线程间资源的互斥. 在文件过大的情况下,如果都读入内存的话,占用内存就太多了. 这里手动实现了一个多线程调用文件迭代器来使用f.next() # -*- coding: ...
- CF787A - The Monster
/* CF787A - The Monster http://codeforces.com/contest/787/problem/A 数学 扩展欧几里得 注意x或y为0的时候要特判 并且结果要大于b ...
- CF899A Splitting in Teams
CF899A Splitting in Teams 题意翻译 n个数,只有1,2,把它们任意分组,和为3的组最多多少 题目描述 There were nn groups of students whi ...
- 洛谷 U6850 手机密码
U6850 手机密码 题目背景 小明的手机上设了一个由四个数字组成的密码,但是小明自己的记性不好,但又不想把密码直接记在纸上,于是便想了一个方法. 题目描述 小明有四行数字,每行数字都有n[i](&l ...
- windows系统中软件开发常用的软件
1.windwos快速打开控制面板:热键+r打开运行框,输入control就打开windows的控制面板了 2.windows自带的远程桌面控制系统:mstsc -Microsoft terminal ...
- Android通过泛型简化findViewById类型转换
曾经老用findViewById,每次使用还得add cast一下今天看到一个视频(依据视频中使用的IDE判断,应该是几年前的视频了..),使用了一个方法,能够不用每次使用findViewById都去 ...
- Android 获取屏幕截图 和保存到本地的sd卡路径下
/** * 获取和保存当前屏幕的截图 */ private void GetandSaveCurrentImage() { //1.构建Bitmap WindowManager windowManag ...
- 软件測试、ios中的測试概念以及步骤
软件測试: 软件測试的目标是应该服务于软件项目的目标,能够通过建议反馈使用更加高效的方法和工具,提升软件开发效率以及软件开发质量.同一时候还能够通过过一些手段,更早.更快.很多其它地发现缺陷.从容减少 ...