JavaScript Closure Details _ basic knowledge

Preface: It is also a primer article. There are several very important language features in JavaScript-objects, prototype inheritance, closures. The closures are a new language feature for programmers who use the traditional static language C/S. In this paper, we will introduce the language features of JavaScript closures with an example, and combine a little ECMAScript language specification to enable readers to understand the closure more deeply.

Note: This article is an introductory article, examples of materials organized in the network, if you are a master, welcome to the article to provide technical advice and advice. This article is about JavaScript, do not want to do language contrast, if you are not comfortable with JavaScript, please bypass.

What is closure
What is a closure? Closures are closure, a new feature that static languages do not have. But closures are not something that is too complex to be understood, in short, closures are:

Closures are the set of local variables of a function, except that these local variables continue to exist after the function returns.
The closure is that the function "stack" is not released after the function returns, we can also understand that these function stacks are not allocated on the stack but are allocated on the heap
When you define another function within a function, a closure is generated
The second definition above is the first to add that the first definition of the subject-verb-closure is the ' local variable ' collection of functions. Only this local variable can be accessed after the function returns. (This is not an official definition, but this definition should be more beneficial to your understanding of closures)

As local variables can be accessed by the code within the function, this and static language is no difference. The difference between closures is that local variables can be accessed by code outside the function at the end of the function execution. This means that the function must return a reference to the closure, or assign the reference to an external variable to ensure that the local variables in the closure are accessed by the external code. Of course the entity that contains this reference should be an object, because the rest of the basic type in JavaScript is the object. Unfortunately, ECMAScript does not provide relevant members and methods to access the local variables in the closure. But in ECMAScript, the internal function defined in the function object (inner function) is a local variable that can directly access the external function, and through this mechanism we can complete the access to the closure in the following way.

Copy Code code as follows:

function greeting (name) {
var text = ' Hello ' + name; Local variable
Each time a call is made, a closure is generated and the internal function object is returned to the caller
return function () {alert (text);}
}
var sayhello=greeting ("Closure");
SayHello ()//access to local variable text via closure

The result of this code is: Hello Closure, because the SayHello () function can still access the local variable text defined within it after the greeting function has finished executing.

Well, this is the legendary closure effect, closures in JavaScript have a variety of application scenarios and patterns, such as Singleton,power constructor and other JavaScript patterns are inseparable from the use of closures.

ECMAScript closed-pack model
How does ECMAScript achieve closure? Want to know more about the pro can get ECMAScript specifications for research, I also only do a simple explanation, content is also from the network.

When a function of a ECMAScript script is run, each function association has an execution context scenario (Execution context), which contains three parts

Grammar environment (the lexicalenvironment)
Variable environment (the variableenvironment)
This binding
The 3rd this binding has nothing to do with closures and is not discussed in this article. The variable identifier used to resolve function execution in a grammar environment. We can imagine the grammatical environment as an object that contains two important components, environmental records (Enviroment Recode), and external references (pointers). An environment record contains local variables and parameter variables that contain internal declarations of functions, and external references point to context execution scenarios for external function objects. This reference value is NULL in the global context scenario. Such a data structure constitutes a one-way list of links, each of which points to the context scene of the outer layer.

For example, the closure model of our example above should be like this, the SayHello function is at the lowest level, the upper layer is the function greeting, the outermost layer is the global scene. The following figure: So when SayHello is invoked, SayHello finds the local variable text value through the context scene, so the "Hello Closure" variable environment (the Variableenvironment) is displayed in the Screen dialog box. The function of the grammar environment is basically similar, the specific difference refer to ECMAScript's specification document.

Closure of the sample column
I've got a rough idea of what JavaScript closures are, and how closures are implemented in JavaScript. Here are some examples to help you get a deeper understanding of closures, with a total of 5 examples from JavaScript Closures for Dummies (mirroring). Example 1: A local variable in a closure is a reference rather than a copy

Copy Code code as follows:

function say667 () {
Local variable which ends up within closure
var num = 666;
var sayalert = function () {alert (num);}
num++;
return sayalert;
}

var Sayalert = say667 ();
Sayalert ()

So the execution result should pop up 667 instead of 666.

Example 2: Multiple functions bind to the same closure because they are defined within the same function.

Copy Code code as follows:

function Setupsomeglobals () {
Local variable which ends up within closure
var num = 666;
Store some references to functions as global variables
Galertnumber = function () {alert (num);}
Gincreasenumber = function () {num++;}
Gsetnumber = function (x) {num = x;}
}
Setupsomeglobals (); Assigning values to three global variables
Galertnumber (); 666
Gincreasenumber ();
Galertnumber (); 667
Gsetnumber (12);//
Galertnumber ();//12

Example 3: When assigning functions in a loop, these functions bind to the same closure

Copy Code code as follows:

function buildlist (list) {
var result = [];
for (var i = 0; i < list.length; i++) {
var item = ' Item ' + list[i];
Result.push (function () {alert (item + ' + List[i])});
}
return result;
}
function Testlist () {
var fnlist = buildlist ([1,2,3]);
Using J-to-help prevent confusion-could use I
for (var j = 0; J < Fnlist.length; J + +) {
FNLIST[J] ();
}
}

The result of the testlist is to eject the item3 undefined window three times, because the three functions bind the same closure, and the value of item is the result of the last calculation, but when I jump out of the loop I value 4, so the result of list[4] is undefined.

Example 4: All local variables of the external function are in the closure, even if the variable is declared after the intrinsic function definition.

Copy Code code as follows:

function Sayalice () {
var sayalert = function () {alert (Alice);}
Local variable which ends up within closure
var alice = ' Hello Alice ';
return sayalert;
}
var helloalice=sayalice ();
Helloalice ();

The execution result is a window that pops up "Hello Alice". Local variables can still be accessed even after the local variable declaration is sayalert by the function.

Example 5: Create a new closure every time the function is called

Copy Code code as follows:

function Newclosure (Somenum, Someref) {
Local variables this end up within closure
var num = somenum;
var anarray = [1,2,3];
var ref = Someref;
return function (x) {
num = x;
Anarray.push (num);
Alert (' num: ' + num +
' \nanarray ' + anarray.tostring () +
' \nref.somevar ' + Ref.somevar);
}
}
Closure1=newclosure (40,{somevar: ' Closure 1 '});
Closure2=newclosure (1000,{somevar: ' Closure 2 '});

Closure1 (5); Num:45 anarray[1,2,3,45] Ref: ' Somevar closure1 '
Closure2 ( -10);//num:990 anarray[1,2,3,990] Ref: ' Somevar closure2 '

The application of closure package
Singleton single piece:

Copy Code code as follows:

var singleton = function () {
var privatevariable;
function Privatefunction (x) {
... privatevariable ...
}

return {
Firstmethod:function (A, b) {
... privatevariable ...
},
Secondmethod:function (c) {
... privatefunction () ...
}
};
}();

This single piece is implemented through closures. The encapsulation of private members and methods is done through closures. The anonymous main function returns an object. The object contains two methods, Method 1 can be a private variable, and Method 2 accesses the internal private function. The place to note is the ' () ' where the anonymous main function ends, without which a single piece cannot be produced. Because an anonymous function can only return a unique object and cannot be invoked elsewhere. This is the use of closures to produce a single piece of the method.