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的取值,分四种情 ...
随机推荐
- C语言提高 (7) 第七天 回调函数 预处理函数DEBUG 动态链接库
链表就是一个结构体 指针指向自身结构体类型 双向链表插入的时候 先改变自身 再改变两边 双向链表删除的时候 先改变两边 再改变自己 逆序一个单向链表 回调函数 指向函数的指针 4链表的遍历回调用法 / ...
- css中的流，元素，基本尺寸
流 元素 基本尺寸 流之所以影响整个css世界,是因为它影响了css世界的基石 --HTML HTML 常见的标签有虽然标签种类繁多,但通常我们就把它们分为两类: 块级元素(block-level e ...
- C/C++ 获取文件夹下的所有文件列表
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51009608 提供一段C/C++代码示 ...
- G - Arctic Network
G - Arctic Network #include<cmath> #include<cstdio> #include<cstring> #include&l ...
- [笔记][Java7并发编程实战手冊]系列文件夹
推荐学习多线程之前要看的书. [笔记][思维导图]读深入理解JAVA内存模型整理的思维导图文章里面的思维导图或则相应的书籍.去看一遍. 能理解为什么并发编程就会出现故障. Java7并发编程实战手冊 ...
- Android-自己定义标题栏
Android-自己定义标题栏 2014年4月25日 分享知识点 最近也比較多事情,想发发博客就是心有余而力不足,本篇博文主要教大家怎样实现自己定义标题栏,非常easy.那么聪明的你一下就看懂. 有兴 ...
- Android实现能够揉动的图片
public class Demo01 extends Activity{ private Bitmap bitmap = null; @Override protected void onCreat ...
- Codeforces Beta Round #29 (Div. 2, Codeforces format) C. Mail Stamps 拓扑排序
C. Mail Stamps One day Bob got a letter in an envelope. Bob knows that when Berland's post offic ...
- tp中使用事务
是什么 事务是为了防止,多个操作,其中有失败,数据有部分被执行成功的时候使用的. 比如,银行,用户转账.张三钱扣了,结果李四钱还增加! 这个时候需要使用事务,确保张三钱扣了,李四的钱也增加,才真正的成 ...
- tflearn中一些CNN RNN的例子
lstm.py # -*- coding: utf-8 -*- """ Simple example using LSTM recurrent neural networ ...