Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

When it comes to variable promotion, you need to know this in advance

An Execution Context is also called an Execution Context. When the interpreter encounters executable code, it enters an execution context, which can be understood as the execution environment of the current code. There are three categories of execution contexts:

  1. Global execution context

  2. Function execution context

  3. Eval function execution context (rarely used, ignored)

During JavaScript execution, there is only one global excution context, in which a global Window object is created (in the case of the browser) and the value of this is set to this.

There can be more than one function execution context. Each time a function is called, a new function execution context is created, and these execution contexts eventually form an Excution Context Stack (ECS) to manage the execution order. Because JS is single threaded, the next context can only be executed when the top execution is out of the stack.

Here’s an example:

The default global execution context is always entered first, so it is always at the bottom of the ECS, followed by function execution contexts fn1 and fn2, as shown in the figure below:

Each Excution Context has three properties,The variable object(Variable Object, VO),The scope chainScope chain andthis. As follows: The variable object(Variable Object, VO), what is in it? Var specifies the declared variable, the declared function, and its parameters. There are two special cases that are not in VO. 1. Var var var var var var var var var var var var var var var var var var

Activation object. VO is not directly accessible in the context of function execution, and the Activation object (AO) plays the role of VO. The activation object is created when the function context is entered. AO is VO, but they are in different life cycles of the execution context.

The declaration cycle of an execution context can be divided into two phases. 1. Create phase, create variable object, scope chain, and set this value. 2. Activate/execute code stage, complete variable assignment, function reference and execute other code.

Let’s take a look at some examples.

   
      function fn1() {
        var a = 1;
        var b = 2;
        var fn2 = function(){

        }
      }
      fn1();
Copy the code

Creation phase (shown in pseudocode) :

fn1ExcutionContext = {
	variableObject: {a:undefined.b:undefined.fn2:undefined
	}
	scopeChain: {... },this: {... }}Copy the code

During the activation/execution phase, the code is updated as follows:

fn1ExcutionContext = {
	ActiveObject: {arguments: {... },a:1.b:2.fn2:<fn2 reference>} scopeChain:{... }, this:{... }}Copy the code

Small tips:

      console.log(fn1);
      
      function fn1() {}var fn1 = 1;
Copy the code

What do you think this code will output? If you think it’s one, you’re wrong. Note that function declarations take precedence over variable declarations. Reading this, do you feel that variable promotion is a piece of cake.