Background or definition

Execution context is the environment in which the JS code is run.

Js variables are global variables and local variables, so the execution context is also differentiated.

  • Global variables: defined in the global environment
  • Local variables: Defined inside a function

The global environment is also called the global context. The global context is automatically created when you open a browser. In the browser, the global context is called the Window object

For the internal environment of a function, this is called the function context. The function context is created when the function is called

Precompile (preparse)

After the context is created, the JS code is not executed immediately, but a precompilation process is carried out first. According to the context, precompilation can be divided into:

  • Global precompile
  • Function precompile

Each execution context has a Variable Object (VO, which is essentially an Object: {key: value}) associated with it, to which all variables and functions in the current execution context are added.

Global precompiled parsing process

Var and function are promoted to the top of the current scope

  • In case of a variable declaration, the variable name is the property name of the VO object, and the property value is set to undefined

  • When a function declaration is encountered, the function name is the name of the VO object’s property, and the property value is the function itself

  • If the function name conflicts with the variable name, the function declaration overrides the variable declaration, and the property value is the function itself

  • After precompiling, the code is executed line by line

console.log(fn); // undefined
var fn = 1;
console.log(fn) / / 1
Copy the code

When a variable is declared, the variable name is used as the property name of the VO object, and the value is undefined. The vo object is {fn: undefined}; The first log is undefined, the variable is assigned to the second log: 1;

console.log(fn); // [Function: fn]
var fn = 1;
function fn () {};
console.log(fn) / / 1
Copy the code

When a variable is declared, the variable name is used as the property name of the VO object, and the value is undefined. In case of a function declaration that conflicts with a variable name, the function itself is the property value and overrides the value of the variable declaration property. VO object {fn: fucntion () {}}; {fn: 1} : {fn: 1} : {fn: 1} : {fn: 1} : {fn: 1} : {fn: 1} : {fn: 1} : {fn: 1}

console.log(fn); // undefined
var fn = 1;
var fn = function  () {};
console.log(fn) // function
Copy the code

The first log is undefined, and the second log is function, so it prints funcition;

Function precompile

We mentioned above that the function execution context is created when the function is called

As long as the function is not called, there is no precompilation of the function

The only difference between function precompilation and global precompilation is that functions may take parameters

Another difference is that the global VO(variable object) is called an AO (active object) during the function precompilation phase, which is essentially the same thing in another name.

Function precompiles the parsing process

  • When a variable is declared, the variable name is the property name of the AO object, and the property value is set toundefined
  • When a parameter is encountered, the parameter name is the property name of the AO object, and the property value is set toundefined
  • If the parameter name conflicts with the variable name, the variable declaration is overridden
  • Assigns the value of the argument to the parameter, replacing the value of the attribute of the parameter in the AO object
  • When you encounter a function declaration, the function name is the name of the AO object’s property, and the property value is the function itself
  • If a function name conflicts with a variable name, the function declaration overrides the variable declaration

AO{key :undefined}; AO{key :undefined}; AO{key :undefined}; Induction: function declaration priority > argument > variable declaration

function fn (a,b) {
  console.log(a); // 3 Argument values
  var a = 1;
  console.log(a); / / 1
  console.log(b); // undefined
}
fn(3);
Copy the code

The above code execution: follow the pre-parse process and we can clearly know the print result

function fn (a,b) {
  console.log(a); // function
  var a = 1;
  function a () {}
  console.log(a); / / 1
}
 fn(3);
Copy the code

AO{a: function(){console.log(2)}} AO{a: function(){console.log(2)}}; So the first log is function and the second log has a print assignment so it’s 1

conclusion

In context execution preparse, variable declarations have the lowest priority, function declarations have the highest priority, and function arguments are in between.