js scope and pre-parsing mechanism (detailed tutorial)

This article mainly gives you a detailed analysis of the scope of js, pre-parsing mechanism and related code analysis. Friends who are interested in this can learn from it.

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 are duplicate names, only one will be left. Variables and functions have the same names, and functions have higher priority than variables. Only functions will be left

Function call (the function is a scope. When encountering a 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. If the function cannot be found locally, search from bottom to top (function Domain chain)

The concept has been stretched for a long time. It is estimated that beginners are still a little dizzy, and experienced drivers can get off the bus in advance. Next, let’s give a few small chestnuts and combine them with the above theory. Deep 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 execution reaches the eighth line, 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

Line 7: 3

will pop up. Line 8: The declaration of the function will not change the value of a.

Line 9: The value of a has not changed, so it is still 3

Through the above example, I believe everyone should have a certain understanding of the pre-parsing process of variable scope. Next, Let’s give a few more examples of 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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to dynamically add HTML tag elements with styles in jquery

How to implement it in node.js fs file system directory operation and file information operation?

How to dynamically add li tags, add attributes and bind event methods in jQuery

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