Shulou(Shulou.com)06/03 Report--

This article mainly explains the concept and function of javascript closure. The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn the concept and function of javascript closure.

1 closure-the first experience of love

One of the first things I do when I come into contact with a new technology is to find its demo code. For programmers, code sometimes understands a thing better than natural language. In fact, closures are everywhere. For example, the main codes of jQuery and zepto are all contained in a large closure, so let me first write a simple and primitive closure demo, so that you can create a picture of closures in your mind:

Function A () {function B () {console.log ("Hello Closure!");} return B;} var b = A (); b (); / / Hello Closure!

This is the simplest closure in history. It can't be simpler. If it's simpler, it won't be a closure.

With a preliminary understanding, we briefly analyze the difference between it and the ordinary function, so that we can recognize "her" at a glance from the "vast sea of people".

The above code is translated into natural language as follows:

The main results are as follows: (1) A general function An is defined.

(2) the ordinary function B is defined in A.

(3) return B in A

(4) execute A () and assign the return result of A to variable b

(5) execute b ()

Sum up these five steps into a piece of bullshit:

The inner function B of function An is referenced by a variable b outside function A.

Reprocess this bullshit and turn it into the definition of closure:

When an internal function is referenced by a variable other than its external function, a closure is formed.

Don't try to remember this definition. I tell you that the purpose of this definition is to make you understand that the above five steps are illustrating the definition of closures.

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

This is the closure.

2 the function of closure

Before we understand the role of closures, let's take a look at the GC mechanism in javascript: in javascript, if an object is no longer referenced, the object will be reclaimed by GC, otherwise the object will always be kept in memory.

In the above example, B is defined in A, so B depends on A, and the external variable b refers to B, so An is indirectly referenced by b, that is, A will not be recycled by GC and will always be stored 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 b = A (); b (); / / 1b (); / / 2b (); / / 3

Count is a variable in A whose value is changed in B. each time B executes, the value of count accumulates 1 on the original basis. Therefore, the count in An is always kept in memory.

This is what closures do. Sometimes we need to define a variable in a module that we want to keep in memory without "polluting" the global variable. At this time, we can use closures to define the module.

3 high-end writing

The above is actually the simplest and most primitive way to write, and in practical applications, no one plays like this, especially in some large JS frameworks. The reason I want to tell you this way of writing is that the fewer distractions, the easier it is to focus on one thing. Let me write a simple demo component in the usual way:

(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 purpose of this component is to initialize a container, and then you can add a child container to the container or remove a container. The function is simple, but there is another concept involved here: execute the function immediately. Just get to know it briefly. The main thing is to understand how this method of writing realizes the closure function.

The above code structure can be divided into two parts: (function () {}) () the red part is an expression, and the expression itself is an anonymous function, so adding () to the expression means that the anonymous function is executed.

So the execution process 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)

It seems to see the shadow of the closure in this code, but there is no return value in f, and it does not seem to have the conditions for the closure. Note this code:

Window.jView = obj

Obj is an object defined in f, in which a series of methods are defined. To execute window.jView = obj is to define a variable jView in the window global object and point this variable to the obj object, that is, the global variable jView refers to obj. The function in the obj object refers to the variable viewport in f, so the viewport in f will not be recycled by GC and will always be saved in memory, so this writing satisfies the condition of closure.

Thank you for your reading, the above is the content of "the concept and function of javascript closure". After the study of this article, I believe you have a deeper understanding of the concept and function of javascript closure, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.