将全局变量传递给自动调用函数或“IIFE”的目的

Question

I see a lot of this in older JavaScript

(function (w){

    w.bar = 'baz';

 })(window); 

What is the advantage of the above, over

(function(){

    window.bar = 'baz';

})(); 

same goes for any global variable , or variable defined outside the IIFE .

Answer 1

1. Makes it explicit that you are using (and probably modifying) globals in the function.
2. Allows you to modify the behavior in the future. Maybe you have a mockWindow for a unit test. Maybe you are using Node.js and you don't have a window , but want to add to the globals var instead.

ps IMO the trivial performance gain mentioned by @Rayon is a red herring.

Answer 2

In practice there is not much (any?) difference wit the example you have given, but you have probably oversimplified it from the code you are actually looking at.

In a more realistic program, you will have scopes and calls backs which are triggered and run in the eventloop asynchronously, and you are binding the variable to a specific instance in a closure -- so;

(function (w){
    setTimeout(function(){w.bar = 'baz';},100);
})(window); 
window = window2;

The bar is still being set in the original window, since that is what is bound to w - where in

(function (){
    setTimeout(function(){window.bar = 'baz';},10);
})(window); 
window = window2;

It will be set in the instance window2, since that is how the window is bound when the execution of the code eventually happens.

In this example "window" is a global variable, but the same is the case regardless of the scope of the variable that is bound.

Answer 3

Passing window is done because local variables are easier and faster to access than global variables ...this may show slight difference in performance . The method really comes in handy with module patterns and/or dependency injection .

Example

var moduleFirst = (function(){
    var name = "harry";
    return {
        firstparam : name
    }
})();
var moduleTwo = (function(x){
    console.log(x.firstparam);
})(moduleFirst)

Output will be : harry

So when window gets passed in IIFE ; all of its revealed methods are available in a local variable .

Answer 4

By passing global objects like window, document, $ to IIFE(Immediately Invoked Function Expression) one can enhance the performance by reducing the scope lookup time. Remember Javascript looks for property at first in local scope and way up chaining till global scope. So accessing window object at local scope reduce the lookup time.