JS execution process

JS execution process is divided into two stages: compilation stage and execution stage

Compilation phase: Forming execution context and executable code

Execution stage: execute code and output results

Execution context

Definition of execution context

An execution context is the environment in which JavaScript executes a piece of code. Whenever Javascript code is running, it is running in an execution context.

Classification of the execution context

The global execution context — this is the default, or base, context function execution context — each time a function is called, a new context is created for that function. The eval function execution context — the code executed inside the eval function also has its own execution context

Create execution context

  • This binding
  • Create the lexical environment component
  • Create the variable environment component

Lexical Environment: the definition variable Environment divided into Environment Record (Environment Record) and outer reference (possibly null) ES6: Is also a lexical environment. In ES6, one difference between a lexical environment component and a variable environment is that the former is used to store function declarations and variable (let and const) bindings, while the latter is used only to store var variable bindings. Variable promotion: In the creation phase. The JS engine elevates variables and functions, which can be interpreted as splitting statements into elevating and executing parts. When promoted, variables declared by var are initialized to undefined, while let and const are not.

var mes = 'Hello World! '
function halo() {
  console.log(mes)
}
halo()
Copy the code
// The promotion part
var mes  / / declare
function halo() {
  console.log(mes)
}

// Execute
mes = 'Hello World! '  / / assignment
halo()
Copy the code

Execution context stack (call stack)

Definition: An execution context stack is a stack with LIFO (LIFO) data structures that are used to store all execution contexts created at runtime. When the JavaScript engine first encounters a script, it creates a global execution context and pushes it onto the current execution stack. Every time the engine encounters a function call, it creates a new execution context for that function and pushes it onto the top of the stack. The engine executes those functions whose execution context is at the top of the stack. When the function completes execution, the execution context for the function pops up. The engine executes functions whose execution context is at the top of the stack. Note: The JavaScript engine will report an error when more than a certain number of execution contexts are pushed. View: The Call Stack of Google Developer Tools Source allows you to view the current Call Stack and output the current function Call relationship via console.trace()

example

console.log('Hello World! ');
function first() {
  console.log('first');
  second()
}

function second() {
  console.log('second');
}

function third() {
  console.log('third');
}

first();
third();
console.log('end');
Copy the code

The scope chain

In JavaScript execution, scope chains are determined by lexical scope. Lexical scope: the lexical scope is determined by the position of the function declaration, which is determined at compile time, regardless of how the function is called, so the lexical scope is static, not dynamic.

function bar() {
 console.log(myName)
}
function foo() {
  var myName = "foo"
  bar()
}
var myName = "window"
foo()
Copy the code

Internal stack of lexical environment: Inside the lexical environment, a small stack structure is maintained. The bottom of the stack is the outermost variable of the function. After entering a scoped block, the variables inside the scoped block will be pushed to the top of the stack. When the scope execution is complete, the information for that scope is popped from the top of the stack. Variable search path: lexical environment (top > bottom of stack) –> variable environment –> outer –>… . Block-level scope: Variables declared by var are stored in the variable environment, and variables declared by let and const are stored in the lexical environment. Combined with the stack structure of the lexical environment and the look-up path of variables, block-level scope is achieved.

closure

When an inner function is returned by calling an outer function, the variables that the inner function refers to are kept in memory even after the outer function has finished executing. The collection of these variables is called a closure.

Refer to the article

Understand the execution context and execution stack in JavaScript