javascript - 立即执行函数对变量值的影响

问题描述

问 题

A:

var key=[];
for(var i = 0;i<5;i++){
    (function(){
        var x = i;
        key[i] = function(){
            console.log(x)
        }
    })();
}

B:

var key=[];
for(var i = 0;i<5;i++){
    var x = i;
    key[i] = function(){
        console.log(x)
    }
}

请问上下两种情况，一种在for循环中加了个IIFE，一种没加,对于中间这个x = i有什么影响，对于情况B来说，x = i不能实时取到i的值么？

解决方案

这还是闭包的问题。你可以在这两段代码后面都加上这么一段看看会是什么结果——

for(i = 0; i < key.length; i++) {
    key[i]();
}

---

答案是，A段代码会分别打印出0、1、2、3、4，而B段代码会打印出5个4。

---

原因其实很简单，

1. key[i]里面仅仅只是存着函数而没有运行，所以它并没有和代码片段中的循环同时运行。

2. var声明的变量属于函数作用域，所以对于B段代码而言，无论你循环多少次，x和i都只有1个，这也就意味着key[i]函数里面存着的，对x的引用都是同一个。

3. 所以当key[i]的函数运行的时候，它们引用的都是同一个x = 4，那么当然打印出来的就是5个4了。

4. 对于A段代码而言，每次循环迭代都创建了个新的函数作用域，而其作用域内部的x当然也就随之创建了5个。

5. 这也就意味着，A段代码中key[i]函数中对于x的引用并不是同一个，而是每次迭代之中关于i的副本。所以，A段代码可以连续输出i的值。

6. 它们之中的区别就在于，B段代码之中引用的x是同一个，而A段代码中并不是。

这篇关于javascript - 立即执行函数对变量值的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！