What is javascript parsed by?-Front-end Q&A-php.cn

Javascript is an interpreted scripting language that can be dynamically parsed and executed by the browser. JavaScript itself can be directly recognized by the browser. The JavaScript interpreter is called the JavaScript engine and is a default part of the browser.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

JavaScript is an interpreted scripting language. It is different from compiled languages such as Java or C#. It does not need to be compiled into a language recognized by the browser, but is dynamically parsed and executed by the browser. (The browser itself can recognize it directly. The JavaScript interpreter is called the JavaScript engine and is a default part of the browser)

Let me introduce to you the JavaScript parsing process. To understand the parsing process of JavaScript, first understand a few concepts.

1. Code block

The code block in JavaScript refers to the code segment separated by the tag.

console.log("这是代码块一");

console.log("这是代码块二"); Copy after login JS is compiled and executed according to code blocks. The code blocks are independent of each other, but variables and methods are shared.

console.log(str); //因为没有定义str，所以浏览器会出错，下面的不能运行 console.log("我是代码块一"); //没有运行到这里 var test = "我是代码块一变量";

console.log("我是代码块二"); //这里有运行到 console.log(test); //输出undefined，因为第一个代码块执行第一行代码的时候游览器报错，代码块中第一行下面的所有代码都没有执行。故test的定义了，但没有赋值。（为什么test定义了却没有赋值，因为变量申明的提升） Copy after login In the above code, an error is reported when running in code block one, but it does not affect the execution of code block two. This is the independence between code blocks, and code block two can call the variables in code one. It is the sharing between blocks

2. Declarative function and assignment function

function Fn(){ //声明式函数 console.log('我是声明式函数'); } var Fn = function{ //赋值式函数 console.log('我是赋值式函数'); } Copy after login The difference between declarative function and assignment function is : During the pre-compilation period of JS, declarative functions will be extracted first, and then the js code will be executed in order.

Pre-compilation period and execution period:

In fact, the JS parsing process is divided into two stages: pre-compilation period (preprocessing ) and execution period.

During pre-compilation, JS will process all declared variables and functions in this code block, but it should be noted that only declarative functions are processed at this time, and variables are only declared but not processed. Initialization and assignment.

Fn(); //执行结果："执行了函数2",同名函数后者会覆盖前者 function Fn(){ //函数1 console.log("执行了函数1"); } function Fn(){ //函数2 console.log("执行了函数2"); } Copy after login Fn(); //执行结果："执行了声明式函数",在预编译期声明函数及被处理了，所以即使Fn()调用函数放在声明函数前也能执行。 function Fn(){ //声明式函数 console.log("执行了声明式函数"); } var Fn = function(){ //赋值式函数 console.log("执行了赋值式函数"); } Copy after login //代码块一 console.log(str);//浏览器报错,但并没有输出信息

//代码块二 console.log(str);//控制台输出"undefined" var str = "aaa";

//js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值，所以导致代码块二中的变量是unfiened的，而代码一中的变量是完全不存在的，所以浏览器报错。 Copy after login Let’s take a look at the following example

Fn(); //浏览器报错:"undefined"

function Fn(){ //函数1 console.log("执行了函数1"); } Copy after login ????

Because the JavaScript engine preprocesses and executes according to code blocks, In other words, only the declared functions and variables of the executed code block are preprocessed, and the code blocks that have not yet been loaded cannot be preprocessed. This is also the core of processing while compiling.

Summary:

Step 1. Read the first code block.

Step 2. Do syntax analysis. If there is an error, a syntax error will be reported (such as mismatched brackets, etc.) and jump to step5. If yes, jump to step3.

Step 3. Perform "pre-compilation processing" on var variable and function definitions (no errors will ever be reported, because only correct declarations are parsed).

Step 4. Execute the code segment and report an error if there is an error (for example, the variable is undefined).

Step 5. If there is another code segment, read the next code segment and repeat step 2.

Step 6. End.

[Related recommendations: javascript learning tutorial ]