Dry foods: let you learn JS closure in minutes

Closures, is a more important concept of Javascript, for beginners, closures are a particularly abstract concept, especially the ECMA specification to the definition, if there is no actual combat experience, it is difficult to understand it from the definition. Therefore, this article does not have a large description of the concept of closures, directly on the dry goods, let you learn to close the pack minutes!


1, closure, a glimpse of the fast


One of the first things I do when I'm in touch with a new technology is to find its demo code. For us, looking at code is more about understanding the nature of a thing than natural language. In fact, closures are ubiquitous, such as: JQuery, Zepto's core code is contained in a large closure, so let me write a simplest and most primitive closure, so that you can produce a picture of the closure in the brain:


function A () {

function B () {

Console.log ("Hello closure!");

}

return B;

}

var C = A ();

C ();//hello closure!


This is the simplest closure.

With a preliminary understanding, we briefly analyze how it differs from the normal function, where the code is translated into natural language as follows:

(1) Define normal function A

(2) Define normal function B in a

(3) return B in a

(4) Execute A and assign the return result of a to the variable C

(5) Execute C

This 5-step operation is summed up in a sentence:

Function A's intrinsic function B is referenced by a variable C outside of function A.

To make this sentence a little bit more, it becomes the definition of closure:

When an intrinsic function is referenced by a variable outside its external function, a closure is formed.

Therefore, when you perform the above 5 steps, you have defined a closure!

This is the closure package.


2, the use of closures

Before we get into the role of closures, let's look at the GC mechanism in Javascript:

In Javascript, if an object is no longer referenced, the object will be recycled by the GC, otherwise the object will remain in memory.

In the above example, B is defined in a, so B relies on a, and the external variable C refers to B, so A is indirectly referenced by C.

In other words, A is not recycled by GC and is kept in memory. To prove our reasoning, the above example is slightly improved:


function A () {

var count = 0;

function B () {

Count + +;

Console.log (count);

}

return B;

}

var C = A ();

C ();//1

C ();//2

C ();//3


Count is a variable in function A, its value is changed in function B, function B is executed every time, and the value of count is accumulated 1 on the original basis. Therefore, the count variable in function A is persisted in memory.

When we need to define some variables in the module and want them to remain in memory but not "pollute" the global variables, we can use closures to define the module.


3, high-end wording

The above notation is actually the most primitive, and in practice, closures and anonymous functions are used together. Here is a common notation for closures:


(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 function of this component is to initialize a container and then add a child container to the container, or remove a container.

The functionality is simple, but here's another concept: executing functions immediately. A simple look at the line, it is important to understand how this type of writing is to implement the closure function.

The above code can be split into two parts: (function () {}) and (), 1th () is an expression, and the expression itself is an anonymous function, so adding () after the expression means executing the anonymous function.

So the execution of this code can be broken down as follows:


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, you seem to see the shadow of the closure, but there is no return value in F, it does not seem to have a closure condition, note this code:


Window.jview = obj


OBJ is an object defined in function f, which defines a series of methods that execute Window.jview = obj defines a variable jView in the Window global object and points this variable to the Obj object, where the global variable JView references obj. The function in the Obj object also references the variable viewport in function f, so the viewport in function f is not recycled by GC and viewport is kept in memory, so this writing satisfies the condition of the closure.


4, the Simple summary language

This is the simplest understanding of closures, of course, the closure has its deeper understanding, this involves more, you need to understand the JS execution Environment (execution context), the active object (Activation object), and scope (scope) and scope chain ( The operating mechanism of scope chain). But as a beginner, do not have to understand these, with a simple understanding, must be used in the actual project, and so you use more, for closures, you will naturally have a deeper understanding!

This article from "Stars Eternal" blog, reproduced please contact the author!

Dry foods: let you learn JS closure in minutes