preface

The purpose of this article is to understand how JavaScript code works, and here we explore the basic mechanics.

Syntax knowledge is not involved, and browsers are not involved. As a result, chrome and ES6 syntax are used to illustrate the actual effect.

It mainly includes the following parts:

  • JavasScript engine
  • Execution stack
  • this
  • Event loop

JavasScript engine

define

A JavaScript engine is a runtime environment that processes JavaScript scripts, including compilation, interpretation, and execution.

The characteristics of

  • Single thread: Only one thing can be processed at a time.
  • Multi-hosted environments: Can be applied to browsers, Nodes, and other WebView containers
  • Hybrid compilation mechanism: Due to the nature of the JavaScript scripting language, the basic mechanism is interpreted execution. However, in order to improve execution performance, compiler execution language features such as Java are introduced to compile JavaScript code into machine code.
  • Real-time compilation: Just-in-time (JIT). Again, to improve performance, a JIT mechanism is introduced to resolve which row is executed.
  • Memory reclamation: very strong memory management strategy, all the data in the run stack will be forcibly reclaimed, which can greatly improve the efficiency of JS code.

Basic composition

  • First, the compiler. The main job is to compile the source code into an abstract syntax tree, and then, in some engines, into bytecode.
  • Second, the interpreter. In some engines, the interpreter primarily accepts the bytecode, interprets and executes the bytecode, and then also relies on the recycle mechanism, etc.
  • Third, JIT tools. A jIT-capable tool that converts bytecode or abstract syntax trees into native code, but also relies on memorization
  • Fourth, garbage collectors and profilers. They are responsible for garbage collection and collecting information from the engine to help improve engine performance and efficiency.

The compiler

Before the formal implementation of JS, there is still a pre-processing stage, including variable promotion, completion and so on.

The interpreter

The JS engine was originally just an interpreter for interpreting JavaScript scripts.

The complete process is as follows:

1, read the code, do Lexical analysis, and break the code into tokens.

Parsing the vocabularies, and then arranging the code into a syntax tree.

3. Use translators to convert code to bytecode

The bytecode interpreter is used to translate bytecode into machine code

The semicolon completion

JS execution requires semicolons, but we often do not write semicolons, why does it work?

The JAVASCRIPT interpreter has a Semicolon Insertion rule that adds semicolons at appropriate positions according to certain rules.

Such as:

  • When there are newlines (including multi-line comments with newlines) and the next token does not match the preceding syntax, the semicolon is automatically added.
  • When} is present, semicolons are supplemented if semicolons are missing
  • When the source code ends, semicolons are added if they are missing

A classic mistake

function test() {return
  {
  	a: 'a'}}test(a); // undefinedCopy the code

Variable ascension

Execution stack

scope

Global scope, function scope, module scope

BO&AO

Lexical environment & variable environment

recursive

closure

this

call,apply,bind

Event loop

Macro task, micro task

SetTimeout and setInterval and requestAnimationFrame

Promise

ajax

conclusion

Mind mapping

Practical problem

The resources

www.jianshu.com/p/565dfad8d… www.cnblogs.com/onepixel/p/…