var中的变量提升

之前只知道var存在的变量提升,但不知道其原理是什么?

最近看了《深入理解es》 中明白了

当我们写循环的时候

var funcs = [];
		
for(var i=0; i< 10; i++){
   funcs.push(function() {
	console.log(i)
   })
}

funcs.forEach(function(func) {
	func(); // 输出10次数字10
})

是因为循环里每次迭代同时共享着变量i,循环内部创建的函数全部保留了对相同变量的引用

循环结束时,变量i为10,故每次输出都是10

当我们把循环改为如下时:

for (var i=0; i< 10; i++){
    funcs.push((function(value){
        return function(){
            console.log(value)
        }
    }(i)))
}

输出结果为 0 到 9

这是因为,在循环内部,IIFE表达式为接受的每一个变量i都创建了一个副本并存储为变量value,这个值就是相应迭代创建函数所使用的值,因此调用每个函数都会像从0到9循一样得到期望的值。

es6中的let,const不存在上述的问题,因为其内部也模仿了上述的IIFE表达式来简化循环过程

猜你喜欢

转载自blog.csdn.net/qq_39081958/article/details/82783334