How does the browser parse JavaScript? This article will introduce you to the principle of browser parsing JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. [Recommended video tutorial: JavaScript video tutorial]
Browser parsing JavaScript principle features:
1. Cross-platform
2. When defining weakly typed JavaScript, you do not need to define the data type. The data type is determined based on the variable value.
var a = 10; //数字类型
var a = true //boolean类型
Copy after login
(Strong type: When defining a variable, you need to define the type of the variable. :For example, int a = 10 boolean a = true in java, C#, directly determines the data type)
3. Interpret and execute, execute line by line
javascript execution process
1. Grammar detection
It is to see if you have any basic grammatical errors, such as Chinese, keyword errors...
2. Lexical analysis (pre-compilation)
3. Execute line by line
lexical analysis
pre-compilation process (Two situations)
1. Global (directly the code in the script tag, excluding function execution)
Take the following demo as an example:
console.log(a); console.log(b)
var a = 100;
console.log(a) var b = 200 var c = 300 function a(){
} function fun(){
}Copy after login
Before execution:
1), first generate a GO (global object) object, which cannot be seen, but can be simulated for analysis
GO = { //自带的属性都不写
}Copy after login
2), analysis Variable declaration, the variable name is the attribute name, the value is undefined
GO = {
a : undefined,
b : undefined,
c : undefined
}Copy after login
3), analyze the function declaration, the function name is the attribute name, the value is the function body, if the function name and variable name are the same, they will be overwritten ruthlessly
GO = {
a : function a(){
},
b : undefined,
c : undefined,
fun : function fun(){
}
}Copy after login
At this time, GO is the final object that is precompiled, and the lexical analysis is completed.
4), execute line by line, analyze (variable declaration, function declaration), don’t worry about it, just assign value (variable assignment)
a赋了一次值,值改变为100
GO = {
a : 100,
b : undefined,
c : undefined,
fun : function fun(){
}
}Copy after login
2, Local (when the function is executed)
Take this demo as an example:
num = 100510)
Copy after login
1), when pre-compiled
GO = {
num : undefined,
fun : function
}Copy after login
2), execution process
GO = {
num : 100,
fun : function
}Copy after login
3) Function calls will also generate their own scope (AO: active object), AO active objects. When a function is called, it is generated a moment before execution. If there are multiple function calls, it will Generate multiple AO
ⅰ. The moment before the function is executed, generate the AO active object
fun.AO = {
}Copy after login
ⅱ. Analyze the parameters. The formal parameters are used as the attribute names of the object, and the actual parameters are used as the attribute values of the object.
fun.AO = {
num : 5
}Copy after login
Copy after login
ⅲ. Analyze the variable declaration. The variable name is the attribute name and the value is undefined. If you encounter a property with the same name on the AO object, do not make any changes.
fun.AO = {
num : 5
}Copy after login
Copy after login
ⅳ. Analyze the function declaration. The function name is the attribute name, and the value is the function body. If the attribute with the same name on the AO object is encountered, it will be overwritten mercilessly (there is no function declaration here, skip it)
4) Execute line by line
Examples:
Here we look at a few examples:
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
console.log(test); //function
function test(test){
console.log(test); //function
var test = 123;
console.log(test); //123
function test(){
}
console.log(test); //123
var test = function(){}
console.log(test); //function
}
test(10);
var test = 456;
/*1.分析变量
GO={
test:undefined
}
2.分析函数{
test:function
}
3.逐行执行
第21行函数的调用
3.1test.AO={}
3.2参数
test.AO={
test:10
}
3.3变量声明
test.AO={
test:10
}
3.4函数的声明
test.AO={
test:function
}
4逐行执行
*/
</script>
</body>
</html>Copy after login
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function test(){
console.log(b); //undefined
if(a){ //undefined转换成false
var b = 100;
}
c = 123;
console.log(c); //123
}
var a;
test();
a = 20;
test();
console.log(c); //123
// 1.生成GO
// GO = {
//
// }
// 2.var
// GO = {
// a : undefined
// }
// 3.函数声明
// GO = {
// a : undefined,
// test : function
// }
// 4.逐行执行
// 4.1.1 18行,test调用,生成test.AO ={}
// 4.1.2 参数 没有,跳过
// 4.1.3 var
// test.AO = {
// b : undefined
// }
// 4.1.4 函数声明 没有,跳过
// 4.1.5 结果
// test.AO = {
// b : undefined
// }
// 4.1.6 逐行执行
// 14行,改变GO
// GO = {
// a : undefined,
// test : function,
// c : 123
// }
//
// 4.2 19行 a值发生了改变
// GO = {
// a : 20,
// test : function,
// c : 123
// }
//
// 4.3 20行,test调用 生成test.AO={}
// 4.3.1 参数 没有
// 4.3.2 变量声明
// test.AO = {
// b : undefined
// }
// 4.3.3 函数声明 没有
// 4.3.4 结果
// test.AO = {
// b : undefined
// }
// 4.3.5 逐行执行
// test.AO = {
// b : 100
// }
</script>
</body>
</html>Copy after login
The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How do browsers parse JavaScript? Introduction to analytical principles. 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)
