How should we understand the working principle of the JavaScript engine?

Simply put, the JavaScript parsing engine can "read" JavaScript code,

Yesterday, I received an email from a front-end kids shoes from Shenzhen. The content of the email is as follows (Sorry, the content of the email has not been approved by him, however, I believe that other people will certainly have the same problem. Therefore, we should directly submit the original article ):

"I have read several articles about JS (variable objects, scopes, contexts, and code execution). I personally think it is a little abstract and hard to understand. I would like to know how the javascript parsing engine works before and after code execution. The English version of ecma cannot be understood ."

In fact, I personally think this question is too general and it is difficult to answer it directly. Therefore, I plan to split his question into the following sub-questions and express my views on it, I hope it will be helpful for children's shoes that are equally confused.

1. What is a JavaScript parsing engine?

Simply put, the JavaScript parsing engine is a program that can "read" JavaScript code and accurately give the code running result. For example, when you write?Var a = 1 + 1;? For such a piece of code, the JavaScript engine is to understand (PARSE) Your code and change the value of a to 2.

Anyone who has learned the compilation principles knows that for static languages (such as Java, C ++, and C ),Compiler (Compiler)For dynamic languages such as JavaScriptInterpreter (Interpreter). The difference between the two is summarized in one sentence:The compiler compiles the source code into another type of code (such as machine code or bytecode), while the interpreter directly parses and outputs the code running result.. For example, the firebug console is a JavaScript interpreter.

However, it is difficult to define whether the JavaScript engine is an interpreter or a compiler, because, for example, V8 (Chrome's JS engine ), in fact, to improve the running performance of JS, before running, it will first compile JS into a local machine code (native machine code), and then execute the machine code (this is much faster ), I believe everyone is rightJIT (Just In Time Compilation)No stranger.

In my opinion, I do not need to overemphasize what the JavaScript parsing engine is and understand what it actually does. For how the compiler or interpreter understands the code, it is enough to go through the textbooks of the university compilation course.

It should also be emphasized that the JavaScript engine itself is also a program and compiled into code. For example, V8 is written in C/C ++.

2. What is the relationship between the JavaScript parsing engine and ECMAScript?

The JavaScript engine is a program. The JavaScript code we write is also a program. How can we make the program understand the program? Therefore, you need to define rules. For exampleVar a = 1 + 1;, Which indicates:

• Var on the left represents declaration, which declares the variable.
• + On the right indicates adding 1 and 1.
• The equal sign in the middle indicates that this is a value assignment statement.
• The last semicolon indicates that the statement is over.

The above are rules. With such rules, the JavaScript engine can parse JavaScript code based on the standards. ECMAScript defines these rules. ECMAScript 262 defines a complete set of standards for the JavaScript language. Including:

• Var, if, else, break, and continue are keywords of JavaScript.
• Abstract, int, long, and so on are reserved words in JavaScript
• How is it a number, how is it a string, and so on?
• Operator (+,-,>, <等）< li>
• Defines the JavaScript syntax
• Defines standard processing algorithms such as expressions and statements. For example=What should I do?
• ??

StandardThe JavaScript engine is implemented according to this set of documents.StandardBecause there are also some implementations that do not follow the standards, such as the JS engine of IE. This is why JavaScript has compatibility issues. As for why IE's JS engine is not implemented according to standards, we have to talk about the browser war. Here we will not go into detail and Google it on our own.

Therefore, simply put, ECMAScript defines the language standard, and the JavaScript engine implements it based on it. This is the relationship between the two.

3. What is the relationship between the JavaScript parsing engine and the browser?

Simply put, the JavaScript engine is part of a browser. Because browsers also need to do a lot of other things, such as parsing pages, rendering pages, Cookie management, and historical records. Therefore, JavaScript Engines are developed by browser developers. For example, Chakra of IE9, TraceMonkey of Firefox, V8 of Chrome, etc.

As a result, different browsers use different JavaScript Engines. Therefore,We can only explain which JavaScript Engine we need to know in depth..

4. What are the ways to gain an in-depth understanding of its internal principles?

After figuring out the first three questions, you can answer them. In my opinion, there are several main ways (from simple to deep ):

• Read a book about how JavaScript Engines Work
  This method is the most convenient, but I personally know that there are almost no such books, but Dmitry. the articles on Soshnikov's blog are really awesome. It is recommended that you read English directly. It seems hard to understand English. You can view the translation.
• Read the standard documentation of ECMAScript
  This method is relatively direct and original, because the engine is implemented according to the standard. At present, you can see the fifth and third editions, but it is not easy to understand.
• View JS engine source code
  This method is the most direct and of course the most difficult. It also involves how to implement lexical analyzer, syntax analyzer, and so on, and not all engine code is open source.

5. The first of the above methods is hard to understand. What should I do?

In fact, the article in the first method has extracted the content from the document and explained it in a simple and easy-to-understand way. If it seems hard, it means there are still two things missing:

• Insufficient understanding of JavaScript itself
  If you have just been in touch with JavaScript, or have never been in touch with JavaScript before. It is really hard to understand the internal working principles. First, you should read more books, practice more, and understand the features of JavaScript predictions from knowledge and practice. In this case, you only need to understand the phenomenon. For example,(Function (){})()? In this way, the anonymous function can be called directly, and the closure can solve the variable value acquisition problem of delayed operations in the loop. To understand this, we need to learn more and practice. I will not talk about it here, but I can read more books and blogs in terms of knowledge learning. There are a lot of books at this level. Professional JavaScript for Web Developers is a good book (please search for the Chinese version ).
• Lack of relevant domain knowledge
  When JavaScript reaches a certain level of depth, however, I still don't know much about it, or I can't go deep into the interior to find out. That means the lack of corresponding domain knowledge. The knowledge about the compilation principles is obvious here. However, it seems that it is okay to know about this. To continue, you need to have a deep understanding of the compilation principles, such as what algorithm is used for lexical analysis and how to deal with it. What are the problems, how to solve them, and what kinds of AST generation algorithms are generally used. It depends on the compilation Principles, and there are also basic classical books, such as Compilers: Principles, Techniques, and Tools, which are also the legendary Dragon books, there are also well-known "Sic" and "PLAI". However, based on your personal experience, you must understand Dmitry's article, as long as you have a deep understanding of JavaScript, at the same time, you can have a general understanding of university computer courses (especially the operating system), that is, the basics are good, it should be okay to understand. Because these articles basically do not involve the underlying compilation, they only explain the content of the document, and many of them are the same, for example: context switching is consistent with CPU process switching, function-related local variable stack storage, and function exit operations.

The above is my personal opinion on this issue. In addition, I feel that learning any technology cannot be too hasty. I need to build a solid foundation so that I can learn anything quickly.

Additional reading

The topic list of this article is as follows:

1. How should we understand the working principle of the JavaScript engine?
2. JavaScript exploration: the importance of writing maintainable code
3. JavaScript exploration: exercise caution when using global variables
4. JavaScript exploration: var pre-parsing and side effects
5. JavaScript exploration: for Loop (for Loops)
6. JavaScript exploration: for-in loop (for-in Loops)
7. Exploring JavaScript: Prototypes is too powerful
8. JavaScript: eval () is the devil"
9. JavaScript exploration: Using parseInt () for Numerical Conversion
10. Exploring JavaScript: Basic coding specifications
11. JavaScript exploration: function declaration and function expression
12. JavaScript exploration: Name function expressions
13. JavaScript: function name in the debugger
14. JavaScript: JScript Bug
15. JavaScript exploration: Memory Management of JScript
16. Exploring JavaScript: SpiderMonkey's quirks
17. JavaScript exploration: an alternative solution to naming function expressions
18. JavaScript exploration: Object
19. JavaScript exploration: Prototype chain
20. JavaScript exploration: Constructor
21. JavaScript probing: executable context Stack
22. Execution context 1: Variable object and activity object
23. Execution context 2: Scope chain Scope Chains
24. Execution context 3: Closure Closures
25. Execution context 4: This pointer
26. Exploring JavaScript: Powerful prototype and prototype chain
27. JavaScript Functions 1: function declaration
28. JavaScript function 2: function expressions
29. JavaScript function 3: function expressions in a group
30. JavaScript function 4: function Constructor
31. JavaScript variable object 1: VO Declaration
32. JavaScript variable object 2: VO in different execution contexts
33. JavaScript variable object 3: two stages of execution Context
34. JavaScript variable object IV: Variables
35. Property of the JavaScript variable object __parent _
36. JavaScript scope chain 1: Scope chain Definition
37. JavaScript scope chain 2: function Lifecycle
38. JavaScript scope chain 3: Scope chain features
39. JavaScript closure 1: Introduction to closures
40. JavaScript closure 2: Implementation of closure
41. JavaScript closure 3: Closure usage

This article is available at http://www.nowamagic.net/librarys/veda/detail/1579.