Detailed introduction to the principle of closure in JavaScript

This article brings you a detailed introduction to the closure principle in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

To understand the closure mechanism in js, you must first understand the global execution environment, block-level execution environment, function execution environment, variable object, environment stack, scope chain, and destroy the execution environment .

Global execution environment

The global execution environment refers to the outermost execution environment. In the web, the global execution environment is considered a window object, so the variables and functions you create in the global environment are properties and methods of the object.

Function execution environment

The function execution environment refers to the function body.

Block-level execution environment

The block-level execution environment refers to the block-level definition area.

'use strict';
// 全局执行环境
// .....
{
    // 块级执行环境
    // 代码 ....
}

function func() {
   // 函数执行环境
   //... 
}

Variable object

Each execution environment has a variable object associated with it. In the variable object Stores variables and functions defined in the current environment. When using variables or functions, members are found on a variable object. This object is inaccessible, but you can view the defined members in the scope chain [scope] (you may not be able to see it if it is not used, this is related to optimization).

Environment stack

Each function or block has its own execution environment. When the execution flow enters a function, the function's environment is pushed into the "environment stack". After the function is executed, the stack pops it and destroys the variable object, and then returns control to the previous execution environment. If the variable object of the internal execution environment is referenced by the external execution environment, the internal environment variable object cannot be destroyed (such as closure).

Scope chain

The scope chain is a list that stores variable objects related to the execution environment. The list of variable objects can be viewed through the [scope] attribute.

relation chart

Explanation with examples

// Example 1: Common function nesting

'use strict';
function a() {
    let x = 2;
    return function() {
        return x;
    }
}
let func = a(); // 返回a函数体内的 匿名函数
console.log(func()); // 在全局执行环境中，访问a函数内部变量。 如果是非闭包函数，那么执行完后

Let’s take a look at the scope chain of the anonymous function in the body of a function.

[Scopes]: Is the scope chain of the current anonymous function.

The index is 0: it is the variable object of the execution environment of function a, and x represents the variable object.

Index 1: Global execution environment variable object.

// Example 2: Access block internal variables

1: Return block-level content function to access block-level content variables in the global execution environment.

'use strict';
let func = null;
{
    let x = "你好";
    func = function () {
        return x;
    }
}
// 返回块级内容函数 实现在全局执行环境中访问块级内容变量。
console.log(func());

Scope chain diagram:

The above is the detailed content of Detailed introduction to the principle of closure in JavaScript. For more information, please follow other related articles on the PHP Chinese website!