Home > Article > Web Front-end > How do browsers parse JavaScript? Introduction to analytical principles
How do browsers parse JavaScript? Introduction to analytical principles
- 青灯夜游forward
- 2019-01-05 10:46:274261browse
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类型
(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(){
} Before execution:
1), first generate a GO (global object) object, which cannot be seen, but can be simulated for analysis
GO = { //自带的属性都不写
}
2), analysis Variable declaration, the variable name is the attribute name, the value is undefined
GO = {
a : undefined,
b : undefined,
c : undefined
}
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(){
}
}
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(){
}
}
2, Local (when the function is executed)
Take this demo as an example:
num = 100510)
1), when pre-compiled
GO = {
num : undefined,
fun : function
}
2), execution process
GO = {
num : 100,
fun : function
}
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 = {
}
ⅱ. 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
}
ⅲ. 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
}
ⅳ. 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:
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
8019067d09615e43c7904885b5246f0a
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逐行执行
*/
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e Example 2:
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
8019067d09615e43c7904885b5246f0a
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
// }
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
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!