1. Scope

Scope: Agree in advance on a set of rules for storing and accessing variables

1.1 Compilation Principles

  • Lexical analysis: Breaking source code into the smallest, non-divisible lexical unit (token)

  • Syntax analysis: The token data is converted to the AST according to the syntax rules. If there are any errors, the token data is thrown

Abstract syntax tree (AST) is a tree representation of the abstract syntax structure of the source code. Each node on the tree represents a structure in the source code. The reason why it is abstract is that the abstract representation transforms the JS code into a structured data structure. This data structure is essentially a big JSON object, which we're all familiar with, like a tree with many leaves. With roots, trunks, branches and leaves, no matter how small or big, it is a complete tree. Simply understood, we write code according to certain rules into a tree structure.Copy the code
  • Code generation: Transform the AST into executable code

The difference between JS and traditional languages is that JS is executed as it is compiled

var name = 'hello'
Copy the code

Compile phase: The compiler searches the current scope to see if there is a variable named name, and adds a new name to the current scope if there is not

Execution phase: finds the current scope, assigns hello if found, searches the upper scope level by level if not found, and throws an exception if not found

The lookup process of the JS engine is the scope chain. Scope refers to the scope that a variable can be accessed

1.2 Global scope

Js global variables are variables mounted under the Window object, so they can be used and accessed anywhere in the web page

All variables assigned directly without definition are a global variable by default

1.3 Function scope

The variables defined in a function are called function variables and can only be accessed from inside the function. The scope is the inside of the function

This local variable is also destroyed when the function is finished executing

1.4 block-level scope

Let and const keywords

Variables defined using these two keywords can only be accessed in block-level (curly braces) scopes and have “temporary dead zones”, meaning that variables cannot be used until they are defined

Temporary dead zones: Declare variables using lets and const. If the variable is accessed before the declaration, an error is reported

Let and const do not get variable promotion

2. The closure

2.1 Basic Concepts of closures

Closure: a function that can access variables inside other functions, i.e. a function defined inside a function

With closures, you can access the internal variables of a function from the outside, so that the values of these internal variables can always be stored in memory

function fun1() { var a = 1; return function(){ console.log(a); }; } var result = fun1(); result(); // A can be accessed externallyCopy the code

2.1 Causes of closures

Each subfunction copies its parent scope, forming a scope chain

The essence of closures: There is a reference to the parent scope in the current environment

2.2 Using closures

All you need is for the parent scope reference to exist

function fun1() {
  var a = 2
  function fun2() {
    console.log(a);  //2
  }
  return fun2;
}
var result = fun1();
result();

Copy the code

The fun2 function references the scope of window, fun1, and fun2

var fun3;
function fun1() {
  var a = 2
  fun3 = function() {
    console.log(a);
  }
}
fun1();
fun3();

Copy the code

After assigning a value to the fun3 function, the fun3 function has access to the window, fun1, and fun3 scopes themselves

2.3 Closure Usage Scenarios

  • The callback function

  • Passed as a function parameter

var a = 1; function foo(){ var a = 2; function baz(){ console.log(a); } bar(baz); } function bar(fn){// This is the closure fn(); } foo(); // Print 2 instead of 1Copy the code

3. Understanding the execution context

3.1 Type of execution context

  • Global execution context: Anything not inside a function is a global execution context. First create a global window object and set this to equal the global object. There is only one global execution context in a program

  • Function execution context: When a function is called, a new execution context is created for the function. The function can have any number of execution contexts

3.2 Executing the context stack

When JavaScript code is executed, the first global code, will create a global execution context and pressure into the execution stack, whenever a function call, will create a new execution context for the function and pressure into the stack, the engine will execute in the execution context function, on the top of the stack when the function is completed, the execution context pop up from the stack, Proceed to the next context. When all code has been executed, the global execution context pops up from the stack.

3.3 Creating an execution Context

  • Creation phase: Globally,this points to window; In a function,this depends on how the function is called. If called by a reference object, what object is this set to

  • Execution phase: This phase completes the allocation of variables and finally completes the execution of the code

Before you can execute a bit of JS code, you need to parse it. Parsing will first create a global execution context, the first code to be executed in the variable, function declaration are taken out, variable first assigned to undefined, function first declared ready to use. When this step is completed, the formal execution procedure begins.

Before a function is executed, a function execution context is also created, similar to the global execution context, except that the function execution context takes arguments to this, arguments, and the function.