JavaScript Learning Series execution context and variable object Chapter

A novice who loves technology ... With a bit of accumulation to cast tomorrow's talent

Body

The JavaScript memory model is explained in the previous article, which mentions the concept of executing context and variable objects. For JavaScript developers, understanding the basic theoretical knowledge of execution contexts and variable objects is the key to understanding closures and the prototype chain (closures and prototype chains are described in the next article). This article will take you into JavaScript execution context and variable object, because I Caishuxueqian, if there is any wrong expression, welcome crossing can guide twos, in this greatly appreciated ...

Before reading this article, by default you have mastered the basic concept of JavaScript, stack heap and other basic data structure and basic computer theory, if there is a lack of understanding, please go to the relevant blog post and then read this article.

First, the execution context

When JavaScript executes a program, it first creates a global execution context, puts it on the stack, and becomes the bottom of the stack. Each time a function is executed, the execution context of the current function is created and then pushed into the stack, and the execution context of the current function is ejected from the stack when the function ends or returns. The execution context is actually the execution environment of the function, similar to the stack frame in Java, but unlike Java, because JavaScript is single-threaded, JavaScript has only one stack, and all execution context stacks and stacks are relative to the same stack.

The life cycle of the execution context consists of three parts: the creation phase, the code execution phase, and the completion phase of the execution

• Creation phase: In this phase, the execution context creates variable objects, establishes scope chains, and determines the point of this
• Code Execution phase: Once the creation is complete, the code is executed, at which point the variable assignment, function reference, and other code execution are done.
• Completion stage: After execution, the execution context is started to stack, and then the occupied memory is freed

The following is a graphical way to describe the execution context of the stack and the stack of steps, first look at a program

function method_a () {    method_b ();    Method_c ();} function Method_b () {}function Method_c () {    method_d ();} function Method_d () {}method_a ();

At the beginning of the execution of the program, a global execution context is first created and pressed into the stack

Subsequent execution of method_a () creates a method_a execution context, which is pressed into the stack

Then, the code in the Method_a () function is executed, and when it executes to the first line, it is discovered to execute the method_b () function, so we start to create a method_b execution context and press it into the stack.

After a smooth execution of the method_b () function code, the execution environment of the method_b is stacked, then the remaining code of the Method_a () function is executed, and the Method_c () function is executed, so the Method_c execution context is created and pushed into the stack.

When executing the Method_c () function, it is found that the Method_d () function is also executed, so the execution context of the method_d is created, then the execution of Method_d () is executed, then it is stacked, then method_c out of the stack, method_a out of the stack, Last remaining global execution context

At this point, the implementation context concept in JavaScript is complete ...

Second, variable object (VO)

When describing the creation phase of the execution context, there is a reference to the concept of variable objects ... This section first focuses on variable objects. The creation of variable objects went through the following processes in turn.

• Establishes a arguments object (a parameter object that encapsulates a parameter as a arguments object when a function receives a parameter)
• Checks the function declaration of the current context, that is, a function declared with functions. Establishes a property in a variable object with the function name, which is a reference to the memory address where the function resides. if the property of the function name already exists, the property will be overwritten by the new reference .
• Checks the variable declaration of the current context, and for each variable declaration, the Variable object establishes an attribute with the variable name and the property value is undefined. if the variable Name property already exists, it is skipped directly and the original property value remains unchanged (This is to prevent overwriting of a function name with the same name)

As you can see in the above rule, the function declaration takes precedence over the Var declaration, and then we take a demo to learn and validate the proposition.

Function method (NUM1, num2) {    console.log (arguments);    Console.log (NUM1, num2);    Console.log (Vara, func);    Console.log (func ());    var vara = ten;    Console.log (VARA);    function func () {        return 1;    }    function func () {        return 2;    }} Method (1, 2);

The output is as follows

{' 0 ': 1, ' 1 ': 2}1 2undefined [function:func]210

The first output is the arguments object, by comparing with the output num1,num2 of the second row, it is known that the argument object is a Key-value format object, where key is incrementally incremented from 0, and value sequentially corresponds to the incoming parameter.

Subsequently, according to the rules of variable declaration and function declaration, because of the variable declaration, the variable is assigned a value undefined during the execution context creation phase, and the function declaration assigns a value to the function variable at the execution context creation stage to the reference address of the function. So the third line output is undefined and [Function:func]

Again, because the code declares two func functions, in order to verify the existence of a function overlay, the result of printing output func (), the output is 2, means that the second defined Func function, in the execution context phase, overrides the beginning of the Func function.

Finally, the Vara is assigned a value of 10, then output Vara, get 10

Third, OV and AO

In the beginner javascipt, there will always be classmates on the variable object and the active object confused, to explain the two nouns. A variable object is created at the stage of execution context creation, the variable object holds the function of the arguments,function declaration, the variable of VAR declaration, the specific second section has been introduced, here does not do too much elaboration. When the execution of the context creation process ends, the code execution phase begins, at which time JavaScript converts the variable object (VO) into the active object (AO). The properties in the variable object cannot be accessed until the execution phase is entered, but after entering the execution phase, the property can be accessed after the variable object is converted to the active object, and then the code execution begins. So in the second section of the example, the output is actually the properties of the active object (but the variable object and the active object contain the same properties and values, so consider it a variable object)

To summarize, the variable object is the same object as the active object, except that they are in a different execution context life cycle.

IV. Global variable objects

In the case of a browser, the global variable object is the Window object. In addition, the lifetime of the global variable object is consistent with the execution context, so if the browser window is not closed, the global variable object will persist.

JavaScript Learning Series execution context and variable object Chapter