Details about js scope and pre-resolution mechanism, and details about js Parsing

Details about js scope and pre-resolution mechanism, and details about js Parsing

Although ES6 is widely used in our work, many projects still keep ES5 writing. So today, we will take you to reconsolidate the scope and pre-resolution mechanism of ES5.

Concept:

Scope: A Domain refers to a space, range, and region. It is used to perform read/write operations within the domain. The scope of a variable is the region of the variable defined in the program source code.

In ES5, only global and function-level scopes exist. In ES6, block-level scopes are introduced. js pre-resolution mechanisms are divided into two processes: Pre-resolution and top-down line-by-line interpretation.

Pre-parsing: The js parser stores the variables, functions, parameters, and other things defined by var in the repository (memory ). Before the variable var is officially run, all values are assigned as undefined. Before the function is run, it is the entire function block.

Line by line

Expressions =, +,-, *,/, ++, --, and ,--,! , %... Number (), parameters can be assigned values

If there is a duplicate name, only one is left. The variable and function have the same name. The priority of the function is higher than that of the variable. Only the function is left.

Function call (a function is a scope. When a function encounters a scope, it will be pre-parsed first, and then executed in a line-by-line interpretation process). First, we need to find the parameter locally, if you cannot find a part, you can find it from the bottom up (scope chain)

It is estimated that a beginner is still a little dizzy and the old driver can get off the bus in advance. Next, let's give you a few small chestnuts and have a deep understanding based on the above theory.

Practice

Example 1:

alert(a); //error: a is not defineda = 3;

Analysis:

Pre-resolution

As mentioned above, pre-resolution only stores var, function, and parameters. Therefore:

The var function parameter is not found in the whole scope.

Line by line

After pre-resolution, there is a in the memory and the entire variable is assigned the value of underfind. for all, the program directly reports an error during code execution.

Example 2:

alert(a); //undefinedvar a = 3;

Analysis:

Pre-resolution

As mentioned above, pre-resolution only stores var, function, and parameters. Therefore:

When the second row is executed, the value of a is undefined.

Line by line

Row 1: After pre-resolution, a exists in the memory and is assigned an underfined value.

Example 3:

alert(a);          // function a (){ alert(4); }var a = 1;alert(a);          // 1function a (){ alert(2); }alert(a);          // 1var a = 3;    alert(a);          // 3function a (){ alert(4); }alert(a);          // 3

Analysis:

Domain resolution

As mentioned above, pre-resolution only stores var, function, and parameters. Therefore:

When the second row is executed, the value of a is undefined.

When the fourth row is executed, the value of a is the function itself, that is, function a () {alert (2 );}.

When the sixth row is executed, the value of a is the value of the fourth row, that is, function a () {alert (2) ;}, because the priority of the function is higher than that of the variable.

When the eighth row is executed, the value of a is changed to function a () {alert (4) ;}, because when two functions are renamed, the code is executed from top to bottom.

Line by line

After the pre-resolution is completed, the code is executed line by line,

Line 1: function a () {alert (4) ;}will pop up, because after the pre-resolution is complete, the value of a stored in the memory is function () {alert (4 );}

Row 2: There is an expression in the second row. If expression a is assigned a new value 1, the value of the variable is changed. The expression can change the pre-resolution value.

Row 3: a is now assigned a value of 1, and 1 is displayed for all

Row 4: It is just the declaration of a function. It does not use an expression and does not call a function. Therefore, it does not change the value of.

The fifth line: because the value of a has not changed, it is still 1

Row 6: When an expression is used, a is assigned a new value of 3.

Row 7: 3 is displayed.

Row 8: The function declaration does not change the value of.

Row 9: The value of a has not changed, so it is 3.

Through the examples above, I believe you should have some knowledge about the pre-resolution process of the variable scope. Next, let's look at several examples of the function scope.

Example 4:

var a=1;function fn1(){  alert(a); //undefined  var a = 2;}fn1();alert(a) //1

Example 5:

var a=1;function fn1(a){  alert(a); //1  var a = 2;}fn1(a);alert(a) //1

Example 6:

var a=1;function fn1(a){  alert(a); //1  a = 2;}fn1(a);alert(a) //1

Example 7:

var a=1;function fn1(){  alert(a); //1  a = 2;}fn1(a);alert(a) //2

You may not need to analyze these chestnuts step by step. However, the results may be completely different if you make a small change. Therefore, you need to think carefully.