Question

以下代码打印出“K”16次。

var rest = "KLMNOPQRSTUVWXYZ".split(""), fns = {};
for (var i=0; i<rest.length; i++) {
    (function(i){
        fns[rest[i]] = function() {
            console.log(rest[i]);
        };
        fns.K();
    })(i);
}

这段代码打印出所有字母“K”，“L”.......“Y”，“Z”

var rest = "KLMNOPQRSTUVWXYZ".split(""), fns = {};
for (var i=0; i<rest.length; i++) {
    fns[rest[i]] = function() {
        console.log(rest[i]);
    };
    fns.K();
}

我是JavaScript的新手，并不太明白在第二个例子中如何使用IIFE导致不同的行为。请有人澄清一下吗？

Answer 1

var rest = "KLMNOPQRSTUVWXYZ".split(""), fns = {};
for (var i=0; i<rest.length; i++) {
    (function(i){
        //the i inside this function is private, it is not the same i from outside, 
       //Any modification to the i from the loop won't affect this one.
        fns[rest[i]] = function() {
            console.log(rest[i]);
        };
        fns.K(); 
        // fns[rest[i]](); You should use this if for printing the correct letter
    })(i);
}

没有IIFE

var rest = "KLMNOPQRSTUVWXYZ".split(""), fns = {};
for (var i=0; i<rest.length; i++) {
    fns[rest[i]] = function() { //You declare a function for each letter
        console.log(rest[i]); //This i contains always the current iteration from the loop
    };
    fns.K(); //calls the first function defined, "K" that prints the current  iteration
}

Answer 2

您提出的问题实际上阐明了JavaScript中函数范围的主题。它与for循环无关。

尽管JavaScript使用块语法，但范围由函数决定。在这种情况下，有两个i变量。一个在函数内部，一个在函数外部。

var rest = "KLMNOPQRSTUVWXYZ".split(""), fns = {};
for (var i=0; i<rest.length; i++) {
    (function(i){
        //the i inside this function is private because of function scope
        fns[rest[i]] = function() {
            console.log(rest[i]);
        };
        fns.K(); 
    })(i);
}

Answer 3

在第一种情况下，IIFE将在每次迭代时创建一个局部范围。 i决定在IIFE中传递的任何i。因此，调用fns.K()将始终解析为rest[0]。

在第二种情况下，i绑定到循环i。致电fns.K()会记录rest[i]，其中i是当前值i。

理解for循环中的JavaScript范围

3 个答案: