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;
Copy after login
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;
Copy after login
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); // 3Copy after login
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) //1Copy after login
例5：
var a=1;
function fn1(a){
alert(a); //1
var a = 2;
}
fn1(a);
alert(a) //1Copy after login
例6：
var a=1;
function fn1(a){
alert(a); //1
a = 2;
}
fn1(a);
alert(a) //1Copy after login
例7：
var a=1;
function fn1(){
alert(a); //1
a = 2;
}
fn1(a);
alert(a) //2Copy after login
相信看了本文案例你已经掌握了方法，更多精彩请关注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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
