Categories
Uncategorized

Simple to explain in detail js closure (read do not understand you cut me !!!)

“Javascript advanced programming” concept closure:

Closures, in fact, is a language characteristic, it refers to a programming language, considered as a function to allow the object instance can then be defined as (local) variables in the function operating in the object image, and these variables can stored in the instance of the object function to function until the destruction, other code blocks can somehow get the value of these instances (local) variables and application extensions.

Our understanding:

In fact, the closure is a function, an external function and return by calling the function returns an internal function, where the function is a closure interior; in this case, access to the variables of the function inside the external function;

    

To understand closures, we need to understand the scope chain stack and heap memory; First, we explain the stack heap memory:

First we look at a demo:

        

var a=1;
var obj={"name":"咸鱼"}

The above two simple code is actually doing two things in memory, the effect is as follows:

  

In a simple realization of the depth of the text js copy (https://www.cnblogs.com/dengyao-blogs/p/11466598.html) we know the basic data types are stored in the stack memory, reference data types are stored in the heap memory in fact, the above two code memory is to do two things: 1 first opened up a space for variables and values ​​stored in a stack memory; 2 opened up a space in the heap memory in use. to store the value of obj, while the variable name in the address points to the stack memory obj

If we add the following code in an obj = { “name”: ‘Joe Smith “}, we store the name before this time value is salted obj original value will be recovered out of the garbage collection mechanism js, value is then re-directed obj {name: “San”} value;

 

The scope chain

Let’s look at this example:

var a = 1;
function fn(){
    var b = 2;
    function fn1(){
        console.log(b);//2
        console.log(a);//1
    }
    fn1();
}
fn(); 

The effect is as follows:

    

 

 

1.var a = 1; this time we are in a global execution environment, the global environment is the browser window scope, and there is a window fn our scope;

2. When we went down the fn when the stack memory will open up a new execution environment, at this time of the execution environment, we have fn b and fn1;

3. When we then went down fn1 time, then stack memory will also open up a new execution environment, execution environment at this time of fn1 is no variable data, but we output a, b in the fn1, we can all be read to; this is because the program reads the variable when starting from the inside to the outside of reading, along with the start-up layer by layer fn1 look, this is the order of execution (fn1 => fn => window), if the window has not been found to read the variable, then the program will be given;

Of course, in the process of implementation, the garbage collection mechanism to detect if the program will execute over garbage collection to avoid memory leaks and other problems; that is our fn1 inside after the execution of fn1 scope is destroyed, then the program fn execution, after executing the fn fn will be destroyed; execution up to the global, the entire program, there is no scope fn scope and fn1, leaving only the global scope of the browser window, this time window and in only a fn;

 

After understanding the scope chain knowledge and stack memory and heap memory of the above, we begin to explain js closure:

  

function outer() {
     var  a = '123'
    
    return function add(){
    //在这里因为作用域的关系,add是能访问到outer的所有变量的,但是outer是访问不到add的变量;
    //所以思路一转,把add的值作为结果return出来变通实现outer外部函数访问到了内部函数变量
//

add function is a closure, because he was able to access the scope of outer functions, add not found in the variables a, we will continue to find top Scope

console.log(a); } } var inner = outer() //

Add the closure function to obtain

inner() //"123"

 

First, we can see that in the global scope we have a function of outer, outer which has a scope and add, add a scope inside the console output variables, then add function here on the formation of a closures, because there needs to add a function to access a variable in the outer scope, but they are not in the same scope, so that the two are pulled, a required output, the above outer variables must have a in, outer scope chain to find the time to find a, and output a time, garbage collection will think add yet executed, because the scope chain has to find the next outer scope, so it will not clean up a memory space; so it will bring a question: If we use multiple closures, then he will bring to our program too much memory footprint, leading to performance problems;

Internal functions can access the global variables javascript is special about the language, but if we want to achieve external functions to access internal variables, we can use a closure, which is contracted out to close the convenience we bring;

Advantages and disadvantages of closing package:

advantage:

1. The function of the internal variable can be read global pollution 2. avoided

Disadvantages:

1. The closure will result variable will not be garbage collection mechanism, will consume a lot of memory;

2. Improper use closures may cause memory leak;

to sum up:

1. The scope chain variable to find a way to find up layer by layer, until you find, if found not found window global scope, it reported undefined;

2. nested function, not in the same scope as the lower, external function is normally not accessible internal function, but can be achieved by a closure;

3. Use as little as possible closure because it will result in large memory consumption and may cause memory leaks (if not needed, it should not use);

  

 

  

Leave a Reply