Analysis of JavaScript closures and javascript closures

Analysis of JavaScript closures and javascript closures

Closure and prototype are two major features of the javascript language. The prototype has been summarized in the previous blog article "Analysis of JavaScript prototype". Today we will summarize the knowledge of closure.

Preface

Before starting the closure, we need to introduce the concepts of anonymous functions and JavaScript garbage collection mechanism.

Anonymous Functions

Anonymous functions are easy to understand, that is, functions without names.

// Function box () {return 'this's just a test () {return 'this's just a test';} // 1. self-execution by expression // form (), the first () puts an anonymous function, and the second () indicates execution and passing of parameters (function () {alert ('this's just a test') ;}) (); // 2. copy the anonymous function to the variable var test = function () {return 'this's just a test';} alert (test); // function () {return 'this's just a test';} alert (test (); // The call method is similar to the function call method.

JavaScript garbage collection mechanism

In Javascript, if an object is no longer referenced, the object will be recycled by GC. If two objects are referenced by each other and no longer referenced by 3rd, the two objects referenced by each other will be recycled. However, if function a is referenced by function B and function B is referenced by Function c outside of function a, function a will not be recycled after execution.

Now, after learning about anonymous functions and garbage collection mechanisms, let's take a look at what is a closure.

Closure

What is a closure?

A closure is a function that can access variables in a function scope. In general, a closure is a protected variable space and can return local variables through a closure. All functions in JavaScript are a closure, but in general, nested functions generate more powerful closures, which are also called "closures" in most cases: create another function in one function, access the local variable of this function through another function. The main application of closure is mainly to: Design private methods and variables.

Features

General Creation Mode: When a function is nested with a function, the internal function can access the variables in the external function. When the return function is an internal function, it is a closure.

// Outer function a () {// temporary variable I var I = 0; // inner function B () {// reference the outer temporary variable I alert (++ I) ;}// execution result, returns the inner function B return B;} // executes the outer function, at the same time, give c a reference pointing to the inner function B var c = a (); // execute the inner function. Due to the closure, in function B, I still references the external temporary variable I alert (c ();)

The internal function is declared as an anonymous function in the closure, and the equivalent form of function a () is usually

// Outer function a () {// temporary variable I var I = 0; // return the inner function return function {// reference the outer temporary variable I alert (++ I );}}

During execution, the internal function references the private variable of function a (), so function a is not recycled after execution.

Advantages

1. No additional global variables are added. The closure stores local variables in the memory to avoid using global variables.
We know that if the variable declaration does not contain the var keyword, the global variable is used by default, which brings a lot of trouble. For example, other functions may misuse these variables, cause naming conflicts, the global object is too large, and the access speed is affected.
2. Protection of variable security in functions and enhanced Encapsulation
3. Maintain a variable in the memory (if too many variables are used, it becomes a disadvantage, occupying the memory)

Disadvantages

1. The resident memory will increase the memory usage. improper use may easily cause memory leakage. The solution is to delete all unused local variables before exiting the function.
2. The closure changes the value of the internal variable of the parent function outside the parent function. Therefore, if the parent function is treated as an object, the closure is treated as its public method, and the internal variable is treated as its private property, the value of the internal variable of the parent function must not be changed.

Disadvantage 1 solving instances

Function box {var myDiv = document. getElementById ('test'); var text = myDiv. innerHTML; myDiv. onclick = function () {alert (text) ;}; myDiv = null // unreference}

While studying closures, a Daniel explained: The namespace we use is the closure. Do you think about it now? Indeed, it's very special! Through closures, we can access some private variables in some specific scopes and play the role of caching. Isn't it a well-known namespace?