Javascript has a well-designed set of rules for storing variables and making them easy to find later, called scopes. Scopes seem simple, but they are complex, and because scopes are so easily confused with the This mechanism, it is even more important to understand how scopes work.

Scope understanding: defined variables, the scope of the function, the collection of accessible variables, objects, and functions. Javascript has global scope and function scope.

• Global: function declaration, variable declaration. 2. Within a section or a function;
• Functions: function declarations, variable declarations, this, arguments. 3. The inside of a function;

compile

Var a = 2; As an example, the internal compilation process of javascript mainly includes the following three steps:

1. Word segmentation (tokenizing)

   Breaking up a string of characters into meaningful code blocks called lexical units (tokens)

   var a = 2; Is decomposed into the following lexical units: var, a, =, 2; . These lexical units form an array of lexical unit streams;

     // Result of lexical analysis
     [
       "var": "keyword"."a"  : "identifier"."="  : "assignment"."2"  : "integer".";"  : "eos" (end of statement)
     ]
   Copy the code

2. Resolution (parsing)

   Transforms an array of lexical unit streams into a hierarchical nested Tree of elements that represents the Syntax structure of the program. This Tree is called the Abstract Syntax Tree (AST).

     {
       operation: "=".left: {
         keyword: "var".right: "a"
       }
       right: "2"
     }
   Copy the code

3. Code generation

   The process of converting an AST into executable code is called code generation (code for the computer to execute)

   var a=2; To a set of machine instructions that create a variable called A (allocate memory, etc.) and store the value 2 in A

   In reality, the compilation process of a javascript engine is much more complex and involves a lot of optimization, and the above three steps are a basic overview of the compilation process; Any snippet of code is compiled before it can be executed, and in most cases compilation takes place a few microseconds before the code is executed. The javascript compiler first checks var a=2; The program compiles, is ready to execute, and usually executes immediately

perform

In short, compilation is the process by which the compiler decomposes the program into lexical units (tokens), parses the lexical units into a syntax tree (AST), and turns the syntax tree into machine instructions to be executed (the overall process is execution).

In fact, the code is compiled and executed. Again, var a = 2 is used as an example to illustrate the compilation and execution process

• compile

  1. The compiler looks for whether the scope already has a variable named A in the collection of the same scope. If so, the compiler ignores the declaration and continues compiling. Otherwise it will require the scope to declare a new variable in the collection of the current scope and name it a

  2. Var a = 2; This code snippet compiles into machine instructions for execution

  Duplicate declarations in javascript are legal (not recommended)

  // Test is the first occurrence in scope, so declare a new variable and assign 20 to test
  var test = 20;
  //test already exists in scope, use it directly, replace the assignment of 20 with 30
  var test = 30;
  Copy the code

• perform

  1. When the engine runs, it first queries the scope to see if there is a variable called A in the current set of scopes. If so, the engine uses this variable; If not, the engine continues to look for the variable

  2. If the engine eventually finds the variable A, it assigns 2 to it. Otherwise the engine will throw an exception

By the way, exceptions

• ReferenceError – ReferenceError exception

  // This variable could not be found when RHS query is performed on b. In other words, this is an undeclared variable
  function foo(a) {
    a = b;
  }
  foo(); //ReferenceError: b is not defined
  Copy the code

• TypeError – TypeError exception

  function foo() {
    var b = 0;
    b();
    b.map()
    ...
  }
  foo(); //TypeError: b is not a function
  Copy the code

• SyntaxError – Errors in syntactically invalid code

    console.log(' ' // SyntaxError: missing ) after argument list
  Copy the code