The true meaning of JS (function (window, document, undefined) {}) (window, document)

Original address: What (function (window, document, undefined) {}) (window, document); Really means

Translate by source

In this article, we will explore what the title implies and explain what has been brought to us from the invocation of the function settings.

Interestingly, I was asked a lot about Iife (the function expression of instant invocation), which takes the following settings:

(function  (window, document, undefined) {  // }) (window, document);

So why not write an article about it? :-)

First of all, this is a series of different things. From top of:

JavaScript has a function scope, so you first create some "private scopes" that you need. For example:

(function  (window, document, undefined) {  var name = ' Todd '// name is not defined, it's within a different range

Simple.

A normal function is this:

var function (name) {  console.log (name);}; Logmyname (' Todd ');

We can choose to call it in any position we need/think of.

"Iife" is created because they are directly called function expressions.

This means that they are called immediately at run time,

We can no longer invoke them, they run only once:

var logmyname = (function  (name) {  //  Todd}) (' Todd ');

The secret here is that (I assign a variable in the previous example):

(function  () {  }) ();

The extra pair of parentheses is necessary because it does not work:

function  () {  }();

While there are some tricks you can use to trick JavaScript into "making it work."
This forces the JavaScript parser to handle! The following code:

! function  () {  }();

There are other variants:

+function  () {  } (); -function  () {  } (); ~function  () {  } ();

But I won't use them.

See the @ mariusschulz decomposition JavaScript iife syntax for a detailed explanation of Iife syntax and its variants.

Https://blog.mariusschulz.com/2016/01/13/disassembling-javascripts-iife-syntax

Now that we know how it works, we can pass the argument to our Iife:

(function  (window) {  }) (window);

How does it work?
Remember, (window); is where the function is called,
We pass the Window object.
The function is then passed to the function, and I name it window.
You can think of it as meaningless, because we should name it something different, but now we will also use the window.

What else can we do? Pass all the things! Let's go through the Document object:

(function  (window, document) {  //}) (window, document);

What about undefined it?

In ECMAScript 3, undefined is mutable.

This means that its value can be reassigned, such as Undefined = true;

Oh my! Fortunately, in ECMAScript 5 (' use strict ';) syntax will throw an error telling you that you are an idiot.

Before that, we began to protect our Iife:

(function  (window, document, undefined) {}) (window, document);

In other words, if someone does this, we'll be fine:

true ;( function (window, document, undefined) {  //  undefined is a partially undefined variable }) (window, document);

Narrowing the local variables is the magic of the iife pattern.
If a local variable name is passed in,
So we can name it arbitrarily.

(function  (window, document, undefined) {  //  Object window}) (Window , document);(function  (A, B, c) {  //  Object Window}) (Window, Document);

Imagine that all of your references to the Library,window , and document have shrunk nicely.
Of course you don't have to stop,
We can also use jquery, or a method that can be used within the vocabulary range:

(function  ($, window, document, undefined) {  // use $ to refer to JQuery    $ (document). addclass (' test '); }) (JQuery, window, document);(function  (A, B, C, D) {  //  becomes   //  A (c). addclass (' test ');}) (JQuery, window, document);

This also means that you do not need to call jquery.noconflict ();
Or anything else as $ is allocated locally to the module.
Understanding how scopes and global/local variables work will further help you.

There is a small section left, do not want to see, hungry. Feel like being stuffed with a JS of knowledge.

The reason is that I want to know what this piece of code means.

(function  (angular) {    ' use strict ';     // Do something     }) (window.angular);

The true meaning of JS (function (window, document, undefined) {}) (window, document)