A simple understanding of js closures

Definition of closure:

A closure refers to a function that has access to a variable in the scope of another function.

Another definition is used here:

When a function can remember and access the lexical scope it is in, a closure is generated, even if the function Called outside the lexical scope in which it was defined.

First point: JavaScript is based on lexical scope. Lexical scope means that the scope is determined by the position of the function declaration when writing code.
Lexical scope search rules: Scope search stops when the first matching identifier is found. Identifiers with the same name can be defined in multiple levels of nested scopes, which is called the "shadowing effect" (internal identifiers "shadow" external identifiers). Regardless of shadowing effects, scope search always starts from the innermost scope in which the runtime is located, and proceeds outwards or upwards until the first matching identifier is encountered.
No matter where a function is called, or how it is called, its lexical scope is determined only by the position in which the function is declared.
Second point: JavaScript has function-based scope, and functions are the most common scope unit in JavaScript. Function scope means that all variables belonging to this function can be used and reused within the scope of the entire function (in fact, they can also be used in nested scopes), external scope Nothing inside the wrapped function can be accessed.
The third point: function in JavaScript is first-class object
1) Properties that can be assigned to variables, array elements and other objects
2) Can be passed to the function as a parameter
3) Can be used as the return value of the function
The fourth point: closure

function foo() {
    var a = 2;    
    function bar() {
        console.log( a ); // 2。bar()对 a 的引用的方法是词法作用域的查找规则，而这些规则只是闭包的一部分
    }
    bar();
}
foo();

The above code does not actually use closure. The application of closure is generally divided into two situations-function as return value, Functions are passed as parameters.
Rewrite the above code:

function foo() {
    var a = 2;    
    function bar() {
    console.log( a );
    }    return bar;//函数作为返回值}var baz = foo();
baz(); // 2 —— 朋友，这就是闭包的效果。

Here the lexical scope of function bar() can access the internal scope of foo(). Then we pass the bar() function itself as a value type. In this example, we use the function object referenced by bar itself as the return value.
In this example, bar() is executed outside the lexical scope defined by itself. After the foo() function returns, its internal scope still exists, and bar() still holds a reference to the scope, and this reference is called a closure.
Write another example of passing a function as a parameter:

var max = 10,
fn = function(x) {
    if (x > max) {//注意词法作用域规则，这里的max是10，而不是100.
        console.log(x);  //15
    }
};
(function(f) {
    var max = 100;
    f(15);
})(fn);

The fifth point: JavaScript’s garbage collection mechanism GC

In js, if an object is no longer referenced, Then this object will be recycled by GC, otherwise this object will always be saved in memory

The sixth point: execution environment, active objects, scope and scope chain

After all the code in an execution environment is executed, the environment is destroyed, and all variables and functions stored in it are also destroyed.
When a function is called, an execution environment and corresponding scope chain are created, and the active object is initialized using the values ​​of arguments and other named parameters.

But in some cases, after the function call is completed, the scope chain of its execution environment will be destroyed, but its active objects will still remain in memory. This is the core of what you need to understand about closures.

The above is the detailed content of A simple understanding of js closures. For more information, please follow other related articles on the PHP Chinese website!