Detailed explanation of the scope and pre-parsing of js

This time I will bring you a detailed explanation of the use of js scope and pre-parsing. What are the precautions for the use of js scope and pre-parsing? The following is a practical case, let's take a look.

Although ES6 is used more and more widely in our work, many projects still retain the ES5 writing method. Therefore, today, I will take you to reconsolidate the scope and pre-parsing mechanism under ES5.

Concept:

Scope: Domain refers to a space, range, and area. The function refers to the read and write operations that can be performed within the domain. The scope of a variable is the area where the variable is defined in the program source code.

In ES5, there are only global and function-level scopes. In ES6, block-level scope is introduced. The pre-parsing mechanism of js is roughly divided into two processes: pre-parsing and top-down step-by-step. Line interpretation

Pre-parsing: The js parser will first store variables, functions, parameters and other things defined by var into the warehouse (memory). Before the variable var is officially run, it is assigned the value undefined. Before the function function is run, it is the entire function block

Interpretation line by line

Expression=, +, - ,*,/,++,--,! , %...number(), and parameters can all be assigned values ​​

If there is a duplicate name, only one will be left. The variable and function have the same name, and the function has a higher priority than the variable. , leaving only the function

function call (the function is a scope, and when encountering the scope, it will be executed according to the process of pre-parsing first, and then interpreting it line by line). First, look for the parameters locally, and if they are not found locally, then Search from bottom to top (scope chain)

The concept is a long way off. I guess beginners are still a little confused. Experienced drivers can get off the bus in advance. Next, let’s give a few chestnuts. , combined with the above theory, for in-depth understanding.

Practice

Example 1:

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

Analysis:

Pre-analysis

As mentioned above, pre-analysis During parsing, only var, function, parameters, etc. will be stored, so:

Var function parameters are not found in the entire scope

Interpreted line by line

After pre-parsing, the memory There is a in and the entire variable of underfind is assigned a value. Therefore, the program directly reports an error during the execution of the code.

Example 2:

alert(a); //undefined
var a = 3;

Analysis:

Pre-parsing

As mentioned above, only var, function, parameters, etc. are stored, so:

When executing to the second line, the value of a is undefined.

Interpretation line by line

First line: After pre-parsing, a exists in the memory and is assigned underfined

Example 3:

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

Analysis:

Domain analysis

As mentioned above, only var, function, parameters, etc. will be stored during pre-parsing, so:

Execute to the first On the second line, the value of a is undefined.

When execution reaches the fourth line, the value of a is the function itself, which is function a(){alert(2);}.

When execution reaches the sixth line, the value of a is still the value of the fourth line, that is, function a(){alert(2);}, because the function has a higher priority than the variable.

When the eighth line is executed, the value of a becomes function a(){alert(4);}, because when two functions have the same name, the code is executed from top to bottom.

Interpretation line by line

After the pre-parsing is completed, the code is executed line by line.

The first line: function a(){alert(4);} will pop up , because after the pre-parsing is completed, the value of a stored in the memory is function a(){alert(4);}

Second line: There is an expression in the second line, and a is assigned The new value 1 expression changes the value of the variable. Expressions can change the preparsed value.

The third line: a is now assigned a value of 1, and all 1 will pop up

The fourth line: It is just a function declaration, no expression is used, and there is no function call. So the value of a will not be changed.

Line 5: Because the value of a has not changed, it is still 1

Line 6: An expression is used, and a is assigned a new value 3

Seven lines: 3

will pop up

第八行：函数的声明，不会改变a 的值。

第九行：a的值没有改变，所以还是3

通过上面的栗子，相信大家应该对变量作用域的预解析过程有一定的了解了，接下来，咋们再举几个函数作用域的栗子

例4：

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

例5：

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

例6：

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

例7：

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

async与await的用法详解

node+express实现聊天室

The above is the detailed content of Detailed explanation of the scope and pre-parsing of js. For more information, please follow other related articles on the PHP Chinese website!