Advanced Front-end BASICS (3): Describes variable objects, and teaches you how to easily interpret variable improvements

My work enthusiasm has not been very high since the start of the year, and I have been in a passive absenteeism status for the past few days. Don't want to get up in the morning, get up, don't want to go to work. I have been enthusiastic about my work before the holiday, and I have been eager to pull out the mini-program project. As a result, the style of painting is completely different after I come back from vacation. I feel like I have severe post-holiday syndrome. Fortunately, I wrote several articles, barely indicating that this week was not a waste of time. This article will introduce variable objects.

According to this rule, it is very easy to understand the variable upgrade. Although variable upgrading is mentioned in many articles, many people cannot tell me what is going on. In the future, the process of creating variable objects in the interview will be explained to the interviewer about variable upgrading, to ensure immediate improvement.

In the above rules, we can see that the function declaration has a higher priority than the var declaration. To help you better understand variable objects, we will discuss them with some simple examples.

// demo01function test() {    console.log(a);    console.log(foo());    var a = 1;    function foo() {        return 2;    }}test();

In the preceding example, we start to understand the execution context of test. When test () is run in the global scope, the execution context of test () is created. For ease of understanding, we use the following format to express

During the creation process, testEC ={// variable object VO :{}, scopeChain :{}, this :{}// this article does not detail the scope chain and this, therefore, the Variable Object is specifically proposed to describe // VO as the abbreviation of Variable Object, that is, the Variable Object VO = {arguments :{...}, foo:
 
  
// The address of foo references a: undefined}
 

Attributes in the variable object cannot be accessed before the execution phase begins! However, after the execution stage, the variable object is converted to the activity object, and all the attributes in the variable object can be accessed, and then the operations in the execution stage are started.

In this way, if you are asked about the differences between the variable object and the activity object during the interview, you can respond freely. They are actually the same object, it is only in different lifecycles of the execution context.

// Execution stage VO-> AO // Active ObjectAO = {arguments: {...}, foo:
 
  
, A: 1}
 

Therefore, in the demo1 example above, the execution sequence is like this.

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

Let's take another example to consolidate our understanding.

// demo2function test() {    console.log(foo);    console.log(bar);    var foo = 'Hello';    console.log(foo);    var bar = function () {        return 'world';    }    function foo() {        return 'hello';    }}test();

// Creation stage VO = {arguments: {...}, foo:
 
  
, Bar: undefined} // note that the variables declared by var will be skipped and not overwritten when an attribute with the same name is encountered.
 

// Execution stage VO-> aversions = {arguments: {...}, foo: 'hello', bar:
 
  
}
 

You need to carefully compare the changes of variable objects in this example from the creation stage to the execution stage. If you have understood the changes, it means that everything related to variable objects is hard for you.

Global context variable object

Take the browser as an example, and the global object is window.
The global context has a special point. Its variable object is the window object. This feature also applies to this point, which also points to Windows.

// Take the browser as an example, and the global object is window // global context javaswec = {VO: window, scopeChain :{}, this: window}

In addition, the life cycle of the global context is the same as that of the program. As long as the program runs continuously, such as closing the browser window, the global context will always exist. All other context environments can directly access the attributes of the global context.