Interpreting closures from structured context

There are two common statements about closures , The first is , A closure is a combination of a function and the Lexical Environment in which it is declared . This statement comes from MDN- Closure .

Another way of saying it , A closure is a function that has access to variables in the scope of another function .
Closures do have access to the functions of another function's scope variables , But closures are not functions .

Let's first understand the Lexical Environment

Lexical environment

We can see ES5 Chapter 10 of the code （ Executable code and execution context ） What does the lexical environment say in the second section of .

A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript code.

Lexical environment is a canonical type （specification type）, It defines the identifier and ECMAScript The relationship between specific variables and functions in code .
The problem is coming. , Type of specification （specification type） What is it again? ？specification type yes Type A kind of . from ES5 You can see in the specification Type It is divided into language types and specification types Two categories: .

language types It's the language type , The type we're familiar with , That is to use ECMAScript The types of data that programmers can manipulate , Include Undefined, Null, Number, String, Boolean and Object.
And the specification type （specification type） Is a more abstract meta value （meta-values）, Used to describe in an algorithm ECMAScript The language structure and the specific semantics of language types .

We know , Executing the function creates a new lexical environment .
We also agree with ,with Statement will “ extend ” Scope （ It's actually called NewObjectEnvironment, Created a new lexical environment , The environment record of lexical environment is an object environment record ）.
The above are easy to understand . that catch What does clause do to the Lexical Environment ？ although try-catch I usually use it a lot , But many people will not notice the details of the lexical environment , Including me ！
We know ,catch Clause will have an error object e

function test(value) {
    
  var a = value;
  try {
    
    console.log(b);
    //  Directly refer to a variable that doesn't exist , Will be submitted to the ReferenceError
  } catch(e) {
    
    console.log(e, arguments, this)
  }
}
test(1);

stay catch Clause arguments, Just to prove catch Clause is not a function . Because if catch It's a function , Obviously it's printed here arguments It shouldn't be test Functional arguments. since catch Not a function , So why can one be limited to catch The error object accessed in clause e？
The answer is catch Clause use NewDeclarativeEnvironment Created a new lexical environment （catch The external lexical environment of the Lexical Environment in clause refers to the function test The lexical environment of ）, And then through CreateMutableBinding and SetMutableBinding Will identifier e Associated with the environmental record of the new lexical environment .

Global environment （The Global Environment） It's a special lexical environment , stay ECMAScript Code is created before it is executed . Environmental records in the global environment (Environment Record) It's an object environment record （object environment record）, It is bound to a global object （Global Object） On , Embodied in the browser environment , And Global Object The connection is window object .
The global environment is a top-level lexical environment , So the global environment no longer has an external Lexical Environment , In other words, the reference of its external lexical environment is null.

Execution context

When program control shifts to ECMAScript Executable code （executable code） when , You enter an execution context （execution context）, The execution context is a logical stack structure （Stack）. The top execution context in the stack is the running execution context .
Many people may have doubts about executable code again ,javascript Isn't it all executable code ？ No, it isn't , For example, comments （Comment）, Blank character （White Space） It's not executable code .

Creation of execution context

We know , Explain to perform global code Or use eval function, Calling a function creates a new execution context , The execution context is a stack structure .
When the control program enters the execution context , This is going to happen 3 An action ：

this The value of the keyword is set .
meanwhile VariableEnvironment（ constant ） and initial LexicalEnvironment（ It could change , So this is about initial） Defined .
Then perform the declarative binding initialization operation .

The execution details of these actions depend on the type of code （ It is divided into global code, eval code, function code Three types of ）.

Closure

The necessary condition for closure is ：

 There are nested functions ;
 Nested inner functions must refer to variables defined in the outer functions ;
 Nested inner functions must be executed .

The function of closures

Function execution creates a completely new private context , This context may be released , It may not be released , Whether released or not , Its function is ：

Protect ： Divide a separate code execution area , In this area, you have your own private variable storage space , There will be no conflict between the private variables used and the variables in other areas （ Prevent contamination of global variables ）
preservation ： If the context is not destroyed , Then the value of the stored private variable will not be destroyed , Can be retrieved from its subordinate context.