About JavaScript closure comprehension

Closures (closure) are a difficult and unique feature of the JavaScript language, and many advanced applications rely on closures.

One: about the scope of the variable

The special point of the JavaScript language is that the global variables can be read directly inside the function.

　　var n=999;  function//  999

On the other hand, a local variable inside a function cannot be read naturally outside the function.

　function F1 () {  var n=999//  error

When declaring a variable, remember to use the Var declaration, otherwise JavaScript will default to you declaring a global Object!

function F1 () {n=999//  999

Second, read the local variables from the outside

is to define a function inside the function.

function　　　　F1 () {  var n=999;  function//  999  }}

In the above code, the function F2 is included inside the function F1, and all local variables inside the F1 are visible to the F2. But the opposite is not possible, F2 internal variables, the F1 is not visible. This is the JavaScript-specific "chain-scoped" structure (chain scope), where child objects look up the variables of all the parent objects one level at a level. Therefore, all the variables of the parent object are visible to the child object, and vice versa.

Since F2 can read the local variables in the F1, we can not read its internal variables outside the F1 as long as the F2 is the return value!

　function　　　　F1 () {  var n=999; 　　　　 function  f2 () {alert (n);　　}  return  F2; }  var result=//  999

Three, the concept of closure

The F2 function in the previous section of the code is the closure.

The definition of "closure" (closure) in various professional literature is very abstract and difficult to read. My understanding is that closures are functions that can read other functions ' internal variables.

A closure can be simply understood as "a function defined inside a function". So, in essence, a closure is a bridge that connects the inside of the function to the outside of the function.

Iv. use of closures

Closures can be used in many places. Its maximum usefulness is two, one of the previously mentioned variables that can read the inside of a function, and the other is to keep the values of these variables in memory at all times.

How to understand this sentence? Take a look at the following code.

　function　　　　F1 () {  var n=999;　　　　Add=function() {n+=1}  function  f2 () {alert (n);　　}  return  F2; }  var result=//  999//  

In this code, result is actually the closure F2 function. It runs altogether two times, the first value is 999, the second value is 1000. This proves that the local variable n in the function F1 is kept in memory and is not

F1 is automatically cleared after the call. Why is that? The reason is that F1 is the parent function of F2, and F2 is assigned to a global variable, which causes F2 to always be in memory, and F2 is dependent on F1, so F1 is always in memory.

It will not be reclaimed by the garbage collection mechanism (garbage collection) after the call has ended.

Another notable part of this code is the line "add=function () {n+=1}", which first does not use the var keyword before add, so add is a global variable, not a local variable. Secondly

The value of add is an anonymous function (anonymous functions), and the anonymous function itself is a closure, so add is equivalent to a setter that can manipulate local variables inside the function outside of the function.

V. Note points for using closures

1) Because the closure will make the variables in the function are stored in memory, memory consumption is very large, so can not abuse closures, otherwise it will cause the performance of the Web page, in IE may cause memory leaks. The workaround is to remove all unused local variables before exiting the function.

2) The closure changes the value of the inner variable of the parent function outside the parent function. So, if you use the parent function as an object, and the closure as its public method, and the internal variable as its private property (private value), be careful not to arbitrarily change the value of the inner variable of the parent function.

Liu, study questions

1.

var name = "the window";  var object ="My object"function() {  returnfunction
    () {  returnthis. Name;　　　　};　　}　　}; Alert (Object.getnamefunc () ());

2.

 var  name = "The window" ;  var  object = {name:  "My Object"  function   () { var  that = this  
    
     ; 
     return  function   () { return   That.name;　　　　};　　}　　}; Alert (Object.getnamefunc ());  

Understand: The first code fragment ' use strict ' mode, that is, strict mode will error, the reason for this is the Getnamefunc () This is a pointer to the Global domain window, strict mode inside this is undefined, but not strict mode will not error, Instead, return to the Window; The second is a good understanding because it is saved with that object's own this before the call, so that is a variable that can be called within a closure.

About JavaScript closure comprehension