当我在for循环中复制变量时，为什么我的JavaScript代码有效

Question

This JavaScript code for a Google Chrome Extension .

It works, but I wonder about one thing. It's in the for loop that iterates an associative array and utilizes its values in a Chrome function.

This works just fine:

var links =
{
    apps: 'chrome://apps/',
    bookmarks: 'chrome://bookmarks/',
    history: 'chrome://history',
    ...
};

for (var link in links)
{
    (function()
    {
        var href = links[link];
        document.querySelector('#' + link).addEventListener('click', function() { chrome.tabs.create({ url: href }); });
    })();
}

But with some changes it suddenly doesn't (changes are highlighted)

var href = links[link];                                            
[...].addEventListener('click', function() { chrome.tabs.create({ url:  }); });

Also I have to use the (function() { })(); pattern (I don't know the name), otherwise it also doesn't work.

Question

Why does this only work when using both the pattern and the variable copying? Please explain to me how JavaScript processes variables in a way that these contraptions are required.

Answer 1

There is no special scope in a for loop, so the variable is overwritten on each iteration when you do

for (var link in links) {
    var href = links[link];
    element.addEventListener('click', function() { 
        chrome.tabs.create({ url: href }); 
    });
}

Note that the click happens later, when the for loop has completed, and because there is no new scope created inside the for loop, the variable changes on each iteration, and by the time you click the element, the href variable inside the event handler callback is the last value it was set to.

What's really happening is that any function declaration will create a new scope, so the variable isn't being overwritten on each iteration, and an Immediately Invoked Function Expression is such a function declaration, and it keeps the value of the variable constant because it creates a new scope

for (var link in links) {
    (function() { // new scope, variables inside this isn't changed on next iteration
        var href = links[link];
        element.addEventListener('click', function() { 
            chrome.tabs.create({ url: href }); 
        });
    })();
}

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global.

Answer 2

When you create a reference to a function, like you do when adding that event-listener, the js interpreter preserves any variable references it finds inside that function, preventing those references from being garbage-collected.

In the first snippet, the preserved reference is a reference to a string, called href. Since this string is declared inside the self-executing anonymous function (the one you declare just within the for-loop), a new reference is created and preserved for each run of that function. Although each reference is named 'href', each reference is actually a unique variable, unique to that run of the anonymous function.

Now in the second snippet, there are two references inside your event listener function: 'link' and 'links,' but those variables are declared in the outer-scope , (from the code provided, it appears to be global, but I'm betting there's some function(){ declared above, off-screen)... because this variable is declared only once, in the same scope as the for loop, the anonymous function inside the for loop is actually always referring to the same object as the other copies. Since the for-loop changes the value referred to by 'link' every time it loops, and every binding you created is looking at the same instance of 'link' and 'links', every function you bound will always wind up referring to the last link in the list (unless you could click so fast that you hadn't completed the for-looping when you clicked, then it would point to whichever link the for loop was currently working on.)

(Edit: This behavior is actually pretty useful, btw - you can use it to emulate "public/private properties" seen in other languages, and to insulate properties from being changed by external code, like this:

var MyCounter = Counter();

MyCounter.Increment();
MyCounter.Increment();
MyCounter.Increment();
console.log(MyCounter.GetCount());

function Counter() {
    // count is a locally-scoped variable, inaccessible to the outside world
    var count = 0;

    // The object below is what's going to be assigned to MyCounter
    //  the functions hold references to count, so it won't be garbage-collected
    //  count will also be unique to each run of Counter()
    return { 
        Increment : function() { 
            count++; 
        }, 
        GetCount : function() { 
            return count; 
        }
    }
};

end edit)

Answer 3

The pattern you're referring to is called a "closure", and it's the source of endless JavaScript confusion for lots of folks.

When you create a new function inside a function, a reference to the execution state of the current function is captured and saved for later execution of the created function. The problem with doing so in a loop is that only one closure is created for any given containing function, so by the time you get to executing any of the created functions, the state saved in the closure is pointing to the last item in the loop.

Mozilla has a great explanation of the whole concept here , including a section specifically on your issue.

Answer 4

为了增加adeneo的答案， 本文解释了闭包，特别是外部函数变量值范围发生变化的场景。