如果你是前端，那么你一定见过这道题
for (var i = 0 ; i < 10; i++) { setTimeout(function () { console.log(i) }) } 上题的打印值是什么？修改代码，使其可以打印0-9
有经验的朋友会微微一笑，淡定回答 打印结果 十次10！
恭喜你，都会抢答了！！！
眼见为实 下面是打印结果
10
10
10
10
10
10
10
10
10
10
惊不惊喜？意不意外？？
那么新入坑的同学可能会有疑问了：这为啥啊？这不科学？！
原因分析：
划重点 ① var ②setTimeout()
重点1：你需要了解一下变量提升（hoisting）
var变量声明，无论发生在何处，都在执行任何代码之前进行处理。 用var声明的变量的作用域是它当前的执行上下文，它可以是嵌套的函数，也可以是声明在任何函数外的变量。如果你重新声明一个 JavaScript 变量，它将不会丢失其值。
然后上面的代码其实是这样的
var i = 0;
for (; i < 10; i++) {
setTimeout(function () {
console.log(i)
})
}
重点2、setTimeout()
它总是在当前的同步代码执行完成后开始运行。(出自简书---一斤代码) 几年后回来看这里 是因为浏览器事件队列，setTimeout中的代码会放到下一个宏任务中去执行
可以加入log进行跟踪验证：、
var i = 0;
for (; i < 10; i++) {
console.log('+++++', i)
setTimeout(function () {
console.log(i)
})
}
执行结果：
+++++ 0
+++++ 1
+++++ 2
+++++ 3
+++++ 4
+++++ 5
+++++ 6
+++++ 7
+++++ 8
+++++ 9
10
10
10
10
10
10
10
10
10
10
由此可见，当开始执行setTimeout()中的代码时for循环外面的变量i就已经变成了10，使用console.log(i)从作用域查找到的i值就是10，然后循环十次10。
解决方法
/*
方法一
ES6 let 块级作用域（推荐）
*/
for (let i = 0 ; i < 10; i++) {
setTimeout(function () {
console.log(i)
})
}
/*
方法二
闭包
*/
for (var i = 0 ; i < 10; i++) {
(function (i) {
setTimeout(function () {
console.log(i)
})
})(i)
}
问题拓展
参考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//面试经典问题:
function onMyLoad(){
/*
抛出问题:
此题的目的是想每次点击对应目标时弹出对应的数字下标 0~4,但实际是无论点击哪个目标都会弹出数字5
问题所在:
arr 中的每一项的 onclick 均为一个函数实例(Function 对象),这个函数实例也产生了一个闭包域,
这个闭包域引用了外部闭包域的变量,其 function scope 的 closure 对象有个名为 i 的引用,
外部闭包域的私有变量内容发生变化,内部闭包域得到的值自然会发生改变
*/
var arr = document.getElementsByTagName("p");
for(var i = 0; i < arr.length;i++){
arr[i].onclick = function(){
alert(i);
}
}
}
</script>
</head>
<body onload="onMyLoad()">
<p>产品一</p>
<p>产品二</p>
<p>产品三</p>
<p>产品四</p>
<p>产品五</p>
</body>
</html>
解决方案
/*
方法一
解决思路:
增加若干个对应的闭包域空间(这里采用的是匿名函数),专门用来存储原先需要引用的内容(下标),
不过只限于基本类型(基本类型值传递,对象类型引用传递)
*/
for(var i = 0;i<arr.length;i++){
//声明一个匿名函数,若传进来的是基本类型则为值传递,故不会对实参产生影响,
//该函数对象有一个本地私有变量arg(形参) ,该函数的 function scope 的 closure 对象属性有两个引用,
//一个是 arr,一个是 i
//尽管引用 i 的值随外部改变 ,但本地私有变量(形参) arg 不会受影响,其值在一开始被调用的时候就决定了.
(function (arg) {
arr[i].onclick = function () { //onclick函数实例的 function scope 的 closure 对象属性有一个引用 arg,
alert(arg); //只要 外部空间的 arg 不变,这里的引用值当然不会改变
}
})(i); //立刻执行该匿名函数,传递下标 i(实参)
}
/*
方法二
解决思路:
将下标作为对象属性(name:"i",value:i的值)添加到每个数组项(p对象)中
*/
for(var i = 0;i<arr.length;i++){
//为当前数组项即当前 p 对象添加一个名为 i 的属性,值为循环体的 i 变量的值,
//此时当前 p 对象的 i 属性并不是对循环体的 i 变量的引用,而是一个独立p 对象的属性,
//属性值在声明的时候就确定了
//(基本类型的值都是存在栈中的,当有一个基本类型变量声明其等于另一个基本变量时,
// 此时并不是两个基本类型变量都指向一个值,而是各自有各自的值,但值是相等的)
arr[i].i = i;
arr[i].onclick = function () {
alert(this.i);
}
}
/*
方法三
解决思路:
通过 new 使用 Function 的构造函数 创建 Function 实例实现,
由于传入的函数体的内容是字符串,故 Function 得到的是一个字符串拷贝,而没有得到 i 的引用
(这里是先获取 i.toString()然后与前后字符串拼接成一个新的字符串,Function 对其进行反向解析成 JS 代码)
*/
for(var i = 0;i<arr.length;i++){
//每 new 一个 Function 得到一个 Function 对象(一个函数),有自己的闭包域
arr[i].onclick = new Function("alert("+i+");");
}
// ......
