Front-end Basic advanced Variable Object detailed essence

After years of work enthusiasm has not been very high, these days have been in a state of slack. Don't want to get up in the morning, get up don't want to work. Obviously before the holiday work enthusiasm has been very high, has been actually to the small program project frontline out, the result of vacation back after the painting wind completely different. I feel like I've got a serious syndrome. Fortunately, a few articles, reluctantly said this week's time is not completely wasted. This article is to introduce you to the variable object.

In JavaScript, it is inevitable that we need to declare variables and functions, but how does the JS parser find these variables? We also have to have a further understanding of the execution context.

In the previous article, we already know that when a function is invoked (activated), a new execution context is created. The lifecycle of an execution context can be divided into two phases.

Create phase
In this phase, the execution context creates the variable object separately, establishes the scope chain, and determines which point to

Code Execution phase
After the creation is complete, the execution of the code begins, at which point the variable assignment, the function reference, and the execution of other code are completed.
Execution context life cycle

From here we can see that it is extremely important to understand the execution context in detail, because it involves the variable object, the scope chain, this, and so on, which many people do not understand, but are extremely important, so it's about whether we can really understand JavaScript. In the following article we will be a detailed summary, here we first focus on the variable object. variable objects (Variable object)

The creation of variable objects, followed by several procedures.

Create a arguments object. Checks the parameters in the current context to establish the properties and property values under the object.

Checks the function declaration of the current context, which is the function declared using the functions keyword. In a variable object, establish a property 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.

Check the variable declaration in the current context, each found a variable declaration, in the variable object in the variable name to establish a property, the property value is undefined. If the property of the variable name already exists, to prevent a function with the same name from being modified to undefined, it is skipped and the original property value is not modified.
I know some people don't like reading words.

According to this rule, it becomes very easy to understand the variable ascension. In many articles, although the reference to the variable promotion, but the specific is how a lot of people can not say, later in the interview with the process of creating variables with the interviewer to explain the variable ascension, to ensure the instant promotion force lattice.

We see in the above rules that a function declaration is a bit higher than the Var declaration priority. In order to help us better understand the variable object, we combine some simple examples to discuss.

Demo01
function Test () {
    console.log (a);
    Console.log (foo ());

    var a = 1;
    function foo () {return
        2;
    }
}

Test ();

In the example above, we begin to understand directly from the execution context of test (). When test () is run in the global scope, the execution context of test () begins to be created. To facilitate understanding, we use the following form to express

CREATE PROCEDURE
Testec = {
    //Variable object
    VO: {},
    Scopechain: {},
    this: {}
}

//Because this article temporarily does not explain the scope chain and this in detail, So the variable object is specifically presented to describe

//VO as the abbreviation for Variable object, that is, the variable object
VO = {
    arguments: {...},  //Note: In the browser display, The parameters of the function may not be placed in the arguments object, and I do this for ease of understanding.
    Foo: <foo reference>  //= Address reference for Foo
    a:undefined
}

None of the properties in the variable object can be accessed until the execution phase is entered. But after entering the execution phase, the variable objects are converted to the active object, the attributes inside can be accessed, and then the execution phase is initiated.

In this way, if you are asked the difference between the variable object and the active object in the interview, you can answer it freely, they are all the same object, but in the different lifecycle of the execution context.

Implementation phase
VO->  ao   //Active Object
ao = {
    arguments: {...},
    foo: <foo reference>
    : 1
}

So, the example above Demo1, the order of execution becomes this

function test () {
    function foo () {return
        2;
    }
    var A;
    Console.log (a);
    Console.log (foo ());
    A = 1;
}

Test ();

Let's take another example to reinforce our understanding.

Demo2
function Test () {
    console.log (foo);
    Console.log (bar);

    var foo = ' Hello ';
    Console.log (foo);
    var bar = function () {return
        ' world ';
    }

    function foo () {return
        ' hello ';
    }
}

Test ();

Create phase
VO = {
    arguments: {...},
    foo: <foo reference>,
    bar:undefined
}
// There is a point to note because VAR declares a variable that skips when it encounters an attribute of the same name and does not overwrite

Implementation phase
VO-> AO
vo = {
    arguments: {...},
    foo: ' Hello ',
    bar: <bar reference>
}

You need to combine the above knowledge to carefully compare the variables in this example from the creation phase to the implementation phase, and if you have already understood, it is difficult to explain what the variable object is all about. Variable object for global context

In the browser, for example, the Global object is window.
The global context has a special place, its variable object, the Window object. This particular, also applies to the this point, and this also points to window.

In the browser as an example, the Global object is window
//Global Context
WINDOWEC = {
    Vo:window,
    scopechain: {},
    This:window
}

In addition, the global context life cycle, consistent with the lifecycle of the program, as long as the program is not finished, such as the browser window off, the global context will always exist. All other context environments have direct access to the properties of the global context.

If you have any problems in learning or want to acquire learning resources, you are welcome to join the Learning Exchange Group
343599877, we learn the front end together.