Javascript closure (very detailed)

There are two reasons for writing another closure article: One is that the previous article was not very clear and vague. For previous articles, see js closure Article 1. The second reason is that closure is indeed the difficulty and focus of js, and many netizens have asked me, so I decided to write another article on closure.

Case

First, let's look at a simple case of closure.

Function (){
Function B (){
Console. log ("Hello haorooms! ");
    }
Return B;
}
Var c = ();
C (); // Hello haorooms!
This example is a simple closure, which is explained as follows:

(1) defines A common function.
(2) define common function B in
(3) return B in A (specifically, return B's reference in)
(4) execute A () and assign the returned result of A to variable c
(5) execute c ()
When an internal function is referenced by a variable other than its external function, a closure is formed.

Function of closure

In the above example, B is defined in A, so B depends on A, and the external variable c references B, so A is indirectly referenced by c, that is, A will not be recycled and will be stored in the memory all the time. In order to prove our reasoning, the above example is slightly improved. You can also see the example in my previous closure article :.

Function (){
Var count = 0;
Function B (){
Count ++;
Console. log (count );
    }
Return B;
}
Var c = ();
C (); // 1
C (); // 2
C (); // 3
Count is A variable in A, and its value is changed in B. Every execution of function B, the value of count is accumulated by 1 on the basis of the original. Therefore, the count in A is always stored in the memory.

This is the function of the closure. Sometimes we need to define a variable in a module: We want this variable to be kept in the memory but it will not "pollute" the global variable. At this time, we can use closures to define this module.

Common closure statements

In my previous article, I mentioned "self-calling anonymous functions" many times ",

The package method is as follows:

(Function (){

})()
Use the package above.

But there is another problem. When we study the code of Daniel, we often see ";", which is to avoid unnecessary errors such as code merging.

For example, we define a function:

Var haoroomsblog = function (){

}
(Function (){

})()
The haoroomsblog function is not followed by a plus sign, which leads to code errors. To avoid such a situation, it is usually written like this!

; (Function (){

})()
Wrap your plug-in code in it, which is a simple plug-in. (This is true for js plug-ins and jquery plug-ins)

Another problem

Package your plug-in

; (Function (){

})()
Basically, it can be said that it is perfect. However, to make your plug-ins more widely used and more compatible, you must consider some special practices of plug-ins. For example, some friends want to avoid conflicts between jquery and zeptojs, modify the prefix "$" of jquery to "jQuery", and some friends modify the default document and other methods. To make your plug-in run as usual when these items are fixed, we will wrap the code in the following:

; (Function ($, window, document, undefined ){
// Our code ..
}) (JQuery, window, document );

In fact, most self-called anonymous functions are applications and writing methods of closures.

For example

(Function (document ){
Var viewport;
Var obj = {
Init: function (id ){
Viewport = document. querySelector ("#" + id );
},
AddChild: function (child ){
Viewport. appendChild (child );
},
RemoveChild: function (child ){
Viewport. removeChild (child );
        }
    }
Window. jView = obj;
}) (Document );
The above code can be rewritten into the following code:

Var f = function (document ){
Var viewport;
Var obj = {
Init: function (id ){
Viewport = document. querySelector ("#" + id );
},
AddChild: function (child ){
Viewport. appendChild (child );
},
RemoveChild: function (child ){
Viewport. removeChild (child );
        }
    }
Window. jView = obj;
};
F (document );

In this code, we can see the shadow of the closure, but f does not return any values, and it does not seem to have the closure condition. Pay attention to this code:

Window. jView = obj;
Obj is an object defined in f. This object defines a series of methods to execute window. jView = obj defines a variable jView in the window global object and points the variable to the obj object. That is, the global variable jView references obj. The function in the obj object references the variable viewport in f, so the viewport in f will not be recycled and will be stored in the memory all the time. Therefore, this method meets the condition of closure. In addition, we assign obj to window. jView, so we can directly call the function in obj in the entire window, but the variables in the function will not be reclaimed. For example, we can call the init function of obj to write it like this:

Window. jView. init ("haorooms ")
Summary

The above is the simplest understanding of closures. Of course, closures have a deeper understanding. For example, the execution Environment (execution context), the activation object, the scope and scope chain operating mechanisms, and so on. Of course, we understand the closure from the simple beginning, more writes, and more understanding. This article is also the simplest way to get started with closures. I hope you will have some understanding of closures through this article.