JS Closed Package

The first two days to interview, the interviewer asked the usual writing about what aspects of closure knowledge, suddenly a little confused, although know that closure is a probably what concept, but in the ordinary work, seemingly use really less, these days through the books, think to write an article about closures, understand relatively shallow, Hope to see the great God can be a lot of advice.

1. What is closures

Closures also refer to functions that can access variables in other function scopes, and typically create closures by creating a function within a function.

2. Characteristics of closures

Closures are mainly characterized by the following three properties:

1. Function nesting functions

2. Internal parameters and variables can be accessed inside the function

3. The parameters and variables that are accessed are not recycled by the garbage collection mechanism.

3. Variable Scope

To better understand closures, you have to understand the concepts of the JS scope and the scope chain.

There are two variables in JS: Global variables and local variables;

The JS language is characterized by the ability to access variables defined in the global function, but outside the function cannot access local variables defined inside the function.

Example 1:var global = ' global ';//define a global variable

function Test1 () {
Console.log (global);
};

Test (); Output Global

Example 2:　

　　　　

Note: JS has no concept of block-level scope, only function scope

4. How can I read internal variables from outside?

Because of the characteristics of the JS language scope, in general, we are not able to get the value of the local variable. But in real-world applications, we sometimes need to access internal variables, and that's when closures come in handy.

Cases:

　　

　　This allows us to access the local variables defined inside the function, and the function test3 returns an anonymous function that is a closure.

5. Benefits of using closures

So what are the benefits of using closures, and the benefits of closures include the following:

1. Keep a variable in memory for a long time

2. Avoid contamination of global variables

3. Existence of Private members

I. Variable long-term presence in memory

Cases:

　　　　　　

　　　　　Parsing: The results of the above code, it can be seen that the local variable a after the function test4 () is executed, and is not directly destroyed, but has been stationed in memory.

Two. Modular code to reduce the pollution of global variables

Cases:

　　　　　　

Parse: Assigns the return value of an anonymous function directly to the TEST5 variable, and then executes the variable.

Three. Existence of private members

Some languages, such as Java, support the declaration of methods as private, that is, they can only be called by other methods in the same class, that is, they do not support such a primitive mechanism, but can be used to simulate private methods by means of closures.

Cases:

　　　　　

6. Using closures in loops: a common mistake

Sometimes you will encounter an Li list and click on the corresponding LI element to eject its corresponding index value.

Cases:

　　

Running in the browser, you will find that no matter which li you click, it will only pop up 3 instead of its corresponding index value.

The reason for this problem is that the value assigned to Li's onclick event is a closure function instead of a closure object, and the onclick loop is already completed when the callback is executed.

Another way to solve this problem,

　　

7. Performance Considerations

It is not recommended to use closures in situations where closures are not a necessity, as closures can have an impact on multiple scripting performance and consume a lot of performance.

8. Memory leaks

If an HTML element is stored in the scope of the closure, it means that the element cannot be destroyed.

Example: function Assignhandler () {
var element = document.getElementById (' id ');
Element.onclick = function () {
Console.log (element.id);
}
}

Parsing: The above code creates a closure of an event handler for element elements, which is also referenced inside the closure. Because the anonymous function holds a reference to the function object of Assignhandler (), the reference to the element variable is at least 1, so the variable will persist in memory and will not be recycled. Can be rewritten by:

function Assignhandler () {
var element = document.getElementById (' id ');

var id = element.id;

Element.onclick = function () {
Console.log (ID);
};

element = null;
}

By saving a copy of element.id in a variable and using it in closures eliminates circular references, it is important to remember that closures refer to the entire active object that contains the function, and that the active object contains element. The active object containing the function maintains a reference to it even if the closure is not referenced, so it is necessary to set it to null.

　　　　

JS Closed Package