what is self-executing anonymous function or what

问题:

var module = {};


(function(exports){

  exports.notGlobalFunction = function() {
    console.log('I am not global');
  };  

}(module));

function notGlobalFunction() {
  console.log('I am global');
}

notGlobalFunction(); //outputs "I am global"
module.notGlobalFunction(); //outputs "I am not global"

Can anyone help me understand what's going on here? I get that if you call notGlobalFunction(), it will just call the second function.

But what is var module = {} doing? and why is it called again inside the first function?

It says this is commonly known as a self-executing anonymous function but I don't really know what that means.

回答1:

Immediately invoked functions are typically used to create a local function scope that is private and cannot be accessed from the outside world and can define it's own local symbols without affecting the outside world. It's often a good practice, but in this particular case, I don't see that it creates any benefit other than a few more lines of code because it isn't used for anything.

This piece of code:

(function(exports){

  exports.notGlobalFunction = function() {
    console.log('I am not global');
  };  

}(module));

Would be identical to a piece of code without the immediate invocation like this:

module.notGlobalFunction = function() {
   console.log('I am not global');
};  

The one thing that is different is that in the first, an alias for modules called exports is created which is local to the immediately invoked function block. But, then nothing unique is done with the alias and the code could just as well have used modules directly.

---

The variable modules is created to be a single global parent object that can then hold many other global variables as properties. This is often called a "namespace". This is generally a good design pattern because it minimizes the number of top-level global variables that might conflict with other pieces of code used in the same project/page.

So rather than make multiple top level variables like this:

var x, y, z;

One could make a single top level variable like this:

var modules = {};

And, then attach all the other globals to it as properties:

modules.x = 5;
modules.y = 10;
modules.z = 0;

This way, while there are still multiple global variables, there is only one top-level global that might conflict with other pieces of code.

---

Similarly, an immediately invoked function creates a local, private scope where variables can be created that are local to that scope and cannot interfere with other pieces of code:

(function() {
    var x, y, z;

    // variables x, y and z are available to any code inside this immediately invoked function
    // and they act like global variables inside this function block and
    // there values will persist for the lifetime of the program
    // But, they are not truly global and will not interfere with any other global
    // variables and cannot be accessed by code outside this block.
    // They create both privacy and isolation, yet work just as well


})();

Passing an argument into the immediately invoked function is just a way to pass a value into the immediately invoked function's scope that will have it's own local symbol:

(function(exports) {
    // creates a local symbol in this function block called exports
    // that is assigned an initial value of module
})(module);

回答2:

This creates a new empty object:

var module = {};

It does the same as:

var module = new Object();

This wrapper:

(function(exports){
  ...
}(module));

only accomplishes to add an alias for the variable module inside the function. As there is no local variables or functions inside that anonymous function, you could do the same without it:

module.notGlobalFunction = function() {
  console.log('I am not global');
};  

An anonymous function like that could for example be used to create a private variable:

(function(exports){

  var s = 'I am not global';

  exports.notGlobalFunction = function() {
    console.log(s);
  };  

}(module));

Now the method notGlobalFunction added to the module object can access the variable s, but no other code can reach it.

回答3:

The IIFE is adding a method to the module object that is being passed in as a parameter. The code is demonstrating that functions create scope. Methods with the same name are being added to a object and the the head object (window) of the browser.

回答4:

"self-executing" might be misleading. It is an anonymous function expression, that is not assigned or or given as an argument to something, but that called. Read here on Immediately-Invoked Function Expression (IIFE).

what is var module = {} doing?

It initializes an empty object that is acting as a namespace.

why is it called again inside the fist function?

It is not "called", and not "inside" the first function. The object is given as an argument ("exports") to the IEFE, and inside there is a property assigned to it.