Home >Web Front-end >JS Tutorial >What is JavaScript preinterpretation? JavaScript pre-interpretation parsing (with code)
The content of this article is about what is JavaScript pre-interpretation? The analysis of JavaScript pre-interpretation (with code) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
JavaScript is an interpreted language. Running JavaScript code requires two stages
Compilation stage: The compilation stage is what we often call JavaScript pre-interpretation ( Preprocessing) stage, at this stage the JavaScript interpreter will complete the conversion of JavaScript script code into bytecode
Execution stage: During the compilation stage, the JavaScript interpreter converts the bytecode into bytecode with the help of the execution environment Generate mechanical code and execute it sequentially from top to bottom
This article focuses on pre-interpretation. The framework diagram is as follows:
Pre-interpretation:Before JavaScript code is executed, the browser will first declare or define all vars and functions in advance by default
Declaration (declare): For example, var num;=> tells the browser that there is a num variable in the global scope; if a variable is only declared but There is no assignment, and the default value is undefined
Definition (defined): For example, num=12;=> assign a value to our variable.
var => is only declared in advance during pre-interpretation.
function => During pre-interpretation, all declarations and definitions in advance are completed
For example: only the contents under window will be pre-interpreted at first, and the functions in the function will be pre-interpreted only when the function is executed.
1) Variables declared in the global scope (when pre-interpreted) are global variables
2) Only function execution will produce private effects Domains, such as for(){}, if(){} and switch(){} will not generate private scope
3) Variables declared in "private scope" (var declaration)" and "function parameters" are both private variables. In the private scope, when the code is executed and a variable is encountered, first we need to determine whether it is a private variable. If it is a private variable, it has no relationship with the outside; if it is not private, it will go to Search the upper-level scope of the current scope. If there is no upper-level scope, continue to search until the window is found. This is the scope chain.
Let’s take an example to distinguish between private variables and global variables:
//=>变量提升:var a;var b;var c;test=AAAFFF111; var a=10,b=11,c=12; function test(a){ //=>私有作用域:a=10 var b; a=1;//=>私有变量a=1 var b=2;//=>私有变量b=2 c=3;//=>全局变量c=3 } test(10); console.log(a);//10 console.log(b);//11 console.log(c);//3
One criterion for judging whether a private variable is a variable declared by var in a function and a formal parameter of the function They are all private variables. In this question, a is a formal parameter in the test function and the variable b defined by var b is a private variable.
This is because when the function is executed, a new private scope will first be formed, and then executed according to the following steps:
1) If there are formal parameters, assign values to the formal parameters first
2) Perform pre-interpretation in the private scope
3) The code in the private scope is executed from top to bottom
Let’s look at an example
var total=0; function fn(num1,num2){ console.log(total);//->undefined 外面修改不了私有的 var total=num1 +num2; console.log(total);//->300 } fn(100,200); console.log(total);//->0 私有的也修改不了外面的
Stack memory: used Provide an environment for JS code execution, that is, scope (global scope/private scope)
Heap memory: used to store values of reference data types. Objects store attribute names and attribute values, and functions store code strings.
Let’s first look at the following two examples:
//例题1 console.log(num);//->undefined var num=12;
//例题2 console.log(num2);//->Uncaught ReferenceError:num2 is not defined num2=12;//不能预解释
When you see var num=12 , you might think it is just a statement. But JavaScript will actually treat it as two declaration statements: var num; and num=12; The first definition statement is made in the pre-interpretation stage. The second assignment statement will be left in place waiting for the execution phase . num2=12 is equivalent to adding an attribute name called num2 to window, and the attribute value is 12; and var num=12 is equivalent to adding a global variable num to the global scope. It is also equivalent to adding a global variable num to window. The attribute name is num2, and the attribute value is 12. The biggest difference between the two: the one with var can be pre-interpreted, so no error will be reported when executed before the assignment; the one without var cannot be pre-interpreted, and an error will be reported when executed before;
Next we give an example:
//例题1 var total=0; function fn(){ console.log(total);//undefined var total=100; } fn(); console.log(total);//0
//例题2 var total=0; function fn(){ console.log(total);//0 total=100; } fn(); console.log(total);//100
In Example 1, the var variable can be pre-interpreted in the private scope, so the value printed by the first console is undefined. If a variable that appears in the private scope is not private, search in the upper-level scope. If there is no upper-level scope, continue to search upward until you find the window.. In Example 2, the variable without var is not private, so Go to your superiors
Please look at the following example question:
if(!("num" in window)){ var num=12;//这句话会被提到大括号之外的全局作用域:var num;->window.num; } console.log(num);//undefined
请看下面这道例题:
fn();//报错 var fn=function (){ //window下的预解释:var fn; console.log("ok"); };
自执行函数定义的那个function在全局作用域下不进行预解释,当代码执行到这个位置的时候定义和执行一起完成了。常见有以下几种形式:
(function(num){})(10); ~function(num){}(10); +function(num){}(10); -function(num){}(10); !function(num){}(10);
function fn(){ //预解释:var num; console.log(num);//->undefined return function(){}; var num=100; }
我们先来看下两个简单的例子:
//例题1 function a() {} var a console.log(typeof a)//'function'
//例题2 var c = 1 function c(c) { console.log(c) var c = 3 } c(2)//Uncaught TypeError: c is not a function
当遇到存在函数声明和变量声明都会被提升的情况,函数声明优先级比较高,最后变量声明会被函数声明所覆盖,但是可以重新赋值,所以上个例子可以等价为
function c(c) { console.log(c) var c = 3 } c = 1 c(2)
接下来我们看下两道比较复杂的题目:
//例题3 fn(); function fn(){console.log(1);}; fn(); var fn=10; fn(); function fn(){console.log(2);}; fn();
1.一开始预解释,函数声明和赋值一起来,fn 就是function fn(){console.log(1);};遇到var fn=10;不会重新再声明,但是遇到function fn(){console.log(2);}就会从重新赋值,所以一开始fn()的值就是2
2.再执行fn();值不变还是2
3.fn重新赋值为10,所以运行fn()时报错,接下去的语句就没再执行。
//例题4 alert(a); a(); var a=3; function a(){ alert(10) } alert(a); a=6; a()
1.函数声明优先于变量声明,预解释时候,函数声明和赋值一起来,a就是function a(){alert(10)} ,后面遇到var a=3,也无需再重复声明,所以先弹出function a(){alert(10)}
2.a(),执行函数,然后弹出10
3.接着执行了var a=3; 所以alert(a)就是显示3
4.由于a不是一个函数了,所以往下在执行到a()的时候, 报错。
The above is the detailed content of What is JavaScript preinterpretation? JavaScript pre-interpretation parsing (with code). For more information, please follow other related articles on the PHP Chinese website!