Home > database >  JS execution context, closures
JS execution context, closures

Time:09-29

13-1 the execution context is introduced
The execution context concept
What is the execution context

The Execution Context (Execution Context) : the preparing work before function performs (also known as Execution Context),
Run JavaScript code, when the code into an environment, will create an execution context for the environment, it do some preparation work before running the code, for example, to determine the scope, create a local variable object, such as
# # # # in the JavaScript execution environment
1: the global environment
2: function environment
3: the eval function environment (has been eliminated)
# # # # that corresponds to the execution context types also have three
1: the overall execution context
2: the function execution context
The eval function execution context

JavaScript runtime will first enter the global environment, the corresponding will generate the global context, the program code in the basic there are function, then the function, will enter the function execution environment, creates the corresponding function of the execution context,

Because JavaScript is single-threaded, so the same time can only do a task, complete before they can continue to the next task, so they must have a queuing mechanism,

# # # # in the JavaScript to manage multiple execution context
Functional programming, the code will declare multiple functions, the corresponding execution context will have multiple, in JavaScript, through the access mode to manage the execution context stack, we can call it the execution stack
, or the function Call Stack (the Call Stack),

# # # #
stack data structure
Stack to follow the "advanced after Out, Last in, First Out" rule, or LIFO (" Last in First Out ") rules,
The characteristics of stack data structure:
1: last in, first out, after the advanced
2: export at the top, and only one

To perform (the function call stack)
How to manage multiple execution context by stack in JavaScript,

Program execution enters an execution environment, its execution context is created, and is pushed into the execution stack (stack), program execution is completed, its execution context will be destroyed, and was launched from the stack (stack), control to the next execution context,

Because JavaScript execution among the first to enter the global environment, so in the "bottom of the stack is always the execution context of the global environment", in "on the top of the stack is currently in the execution context", when the function call is completed, it will be launched from the stack (typically, closures will stop the operation),

Only one global environment, the corresponding global execution context is also only one, only when the page is closed will be launched from the execution stack, otherwise there has been on the bottom of the stack, there is no limit to the number as for the function of the context, each to perform a function called when the engine will automatically newly built up a function context,

Example:

(the function foo (I) {
If (I==3) {
return;
} else {
The console. The log (I);
Foo (+ + I);
}
}) (0);
//the steps
//the global context
//function context 0
//function context 1
//function context 2
# # # # the execution context lifecycle
Execution context of the life cycle has two stages:

1: create stage (into the execution context) : a function is invoked, enter the function environment, to create an execution context, entered the stage of creation at this time,
2: the execution phase (code) : executive function in the code, the execution context into execution phase,
# # # # to create stage operation
1: create the variable object

Initialization function environment will create the Arguments of the object, the form parameter (and value)
Common function declarations (and value)
Local variable declarations, the function expression statement (not assignment)

2: initialize the scope chain
3: make sure this point (this set by the caller)
4: to determine the scope (syntax environment decision, where statement to define, where is determined)

# # # # the operation of the execution phase

1: the variable object assignment

Variable assignment
Function assignment

2: * function call
3: order other code

# # # # the execution context and scope distinction
Note: the scope and execution context is not the same concept
Execution code, will produce an execution context, each function call will have execution context, when the function call is complete, the context and the data will be eliminated (in addition to the closures), only one active execution context,

And at the time of the function definition scope have been identified, not set at the function call (different from execution context, and this is the composition in the context)

//global scope
Let x=100;
The function bar () {
The console. The log (x);
}
//fn? Scope
The function fn () {
Let x=50;
//bar scope
Bar ();
}
fn();//100
Scope is just a "territory", there is no variable, the variable is through the corresponding execution context environment variables in the object scope, so the scope is a static concept, and the execution context is a dynamic, the two are not the same,

Presence of closure, there are two context with a scope is: yes, that is, the scope is used to partition your variables defined in the scope of effective range, out of the scope is invalid,

Under the same scope, for the same function of different calls can produce different execution context environment, you produce different variable values, however, so, when the value of the variable scope in the implementation process, and the scope is set at the function creates,

If you want to find a scope of a variable value, you need to find the scope corresponding execution context environment, to find the value of a variable,
13-2 variable object
More than the introduction of the concept of context, the execution context of life cycle includes two stages: establishment stage and implementation stage,

When at the stage of establishing the execution context, can see the whole context as an object, the object has three properties
Example

ExecutionContextObj={
VariableObject: {},//the variable object, containing the Arguments object, parameter and argument, function and the local variable
ScopeChain: {},//scope chain, contains a list of all internal context variable object
This: {}//in the context of this point object
}
Above the execution context abstract became an object that has three attributes, respectively is variable object, scope chain and this point to

Inside the variable object possessions
In the function of the establishment stage, will first establish the Arguments object, and then determine the parameters for the form, check the current context function declarations, find whenever a function declaration, will be under the variableObject an attribute set up by using the function name, attribute values is address of the function in the memory of a reference, if the function name already exists in the variableObject (VO) below, then the corresponding attribute value will be covered by the new reference to, finally, is to determine the local variables in the current context, if you meet and the names of the variables with the same name, will ignore the variable,

Function of the two stages and how to change the variable object is
Example:

Const foo=function (I) {
Var a="Hello".
Var b=function privateB () {};
The function c () {}}
Foo (10);
Firstly established in the phase of the variable object below

FooExecutionContext={
VariavleObject: {
The arguments: {0, 10, length: 1},//determine the arguments object
I: 10,//form parameters
C: a pointer to the function c (),//sure function reference
A: undefined undefined,//local variables
B: undefined undefined//local variables
},
ScopeChain: {},
This: {}
In establishment stage, therefore, in addition to the Arguments, function declarations, and formal parameters have been given a specific attribute values, other variable attributes default is undefined, and statement of common form function of ascension is on the top of the variables,

Once the build phase, the engine will enter code execution phase, this phase is completed, the execution context object is as follows, the value of the variable will be assigned on the specific

FooExecutionContext={
VariavleObject: {
The arguments: {0, 10, length: 1},
I: 10,
C: a pointer to the function (c),
A: "Hello",//a variable assigned to Hello
B: a pointer to the function privateB ()//b variable assigned to privateB () function},
ScopeChain: {},
This: {}
}
Only in code execution phase, the value of the local variable will be given specific stage in building the value of the local variable is undefined, it explains the principle of the variables increase,

To deepen understanding function in two stages of the process

(function () {
The console. The log (typeof foo);
The console. The log (typeof bar);
Var foo="Hello";
Var bar=function () {
Return "World";
}
The function foo () {
Return "good";
}
The console. The log (foo, typeof foo);
}) ()
Define a IIFE, the function in the establishment phase variable object is as follows:

FooExecutionContext={
VariavleObject: {
The arguments: {length: 0},
Foo: pointer to the function foo (),
Bar: undefined},
ScopeChain: {},
This: {}
}
First determine the Arguments object, followed by formal parameters, because in this case, there is no formal parameters, so the first to determine the function reference, find foo () function, after creating the foo identifier to point to the foo () function, after the foo variables with the same name will not be created, can avoid ignoring directly, and then create the bar variable, but the initial value is undefined,

Establishment phase is completed, the next stage of code execution, start the execution of the sentence by sentence code, and the results are as follows:

(function () {
The console. The log (typeof foo); nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull