This article is a step up from the scope-related summary I wrote last time. If you’re not familiar with scope, you can start with JavaScript scope-related summary

I’ve been reading a lot of articles and I feel like they’re taking the word context a little abstract. Why don’t we just forget the literal meaning and remember how it came about and what it does

Generation of execution context

When a function is executed, there is preparation, and the preparation, in this case, is called execution context.

As the name implies, this process occurs during code execution (important! JavaScript code runs through two phases: preparation (variable initialization, function definition, etc.) and execution (logic)

When JavaScript executes a piece of executable code, it first establishes the corresponding execution context

The code that executes the context takes place in two phases:

  • Enter execution context (analysis)
  • Code execution (processing)

In each execution context generated, there are three important attributes:

  • The variable object
  • The scope chain
  • this

Category of execution context

1. Global context

A global context is something that exists from the very beginning when javaScript code is executed. Its variable object is the global object, this refers to the window, and the scope chain is the top level

console.log(this) //window
console.log(Math.random())
console.log(this.Math.random()) // Both are valid

var a = 1
console.log(window.a) / / 1
console.log(this.a) / / 1
Copy the code

2. Function context

Created when entering a function

Variable objects

The variable object stores the variable and function declarations defined in that context

When the execution context is entered (without code execution), the variable object is initialized, including:

  1. Arguments for a function
  2. Function declaration
  3. Variable declarations
function a(n, m) {
    var b = 1
    function c() {
        console.log('c')}var d = function() {
        console.log('d')
    }
    b = 2
}
a(10.20)
Copy the code

After entering the execution context, the variable object looks like this:

Variable object = {arguments: {
        0: 10.1: 20.length: 2
    },
    n: 10.m: 20.b: undefined.c: function.d: undefined
}
Copy the code

When the code is executed, it executes sequentially, changing the value of the variable object. At the end of the code, the variable object looks like this:

Variable object = {arguments: {
        0: 10.1: 20.length: 2
    },
    n: 10.m: 20.b: 1 -> 2.c: function.d: functionExpression
}
Copy the code

Scope chain

This was mentioned in the scope summary. Scope and scope chains are used to define the scope and lookup direction of a variable

In the code preparation phase, all the corresponding code scopes are created and their hierarchical relationships are preserved. For example:

var a = 1

function foo() {
    var b = 2
    function bar(c) {
        var d = 3
        console.log(a, b, c, d)
    }
    bar(b * 3)}function kk() {
    var e = 4
    console.log(a, e)
}
Copy the code

Finally create the scope: [global scope [foo scope [bar scope], kk scope]]. If you go from top to bottom, yes

  1. Global scope -> Foo scope -> bar scope
  2. Global scope -> KK scope
  • In the bar function, you can use the variables defined in foo, and above that you can use the variables defined in the global function
  • In foo, you can use global variables, but not bar variables (only up, not down)

At this point in the execution context preparation phase, the scope and scope chain are initialized and saved to the execution context properties for later use

In the following variable search, the search is conducted in the direction of the scope chain (step 2 execution stage)

var a = 1 //1. Assign a from undefined to 1

function foo() {
    var b = 2 //3. Set b from undefined to 2
    function bar(c) {
        //6. Set parameter c from undefined to 6
        var d = 3 //7. Assign d from undefined to 3
        console.log(a, b, c, d)A =1; a=1; a=1; a=1
        // if (b=2) {// if (b=2) {// if (b=2) {// if (b=2)
        //8.3 Prints c, available in this scope, with the value c=6
        //8.4 print d, available in this scope, with the value d=3
    }
    // select * from foo where b=2 and select * from foo where b= 6
    bar(b * 3) //5. Execute code sequentially
}

foo() //2. Execute code sequentially
Copy the code

Third, this

JavaScript has a different mechanism for handling this than other languages. If you want to dig deeper, the principle sounds complicated, which can be basically summed up in these five different situations:

  • Global scope this – refers to the global object
  • The function call foo() – points to the global object
  • Method calls bar.foo() – points to the bar object
  • Call the constructor new foo() – to point to the newly created object
  • Explicitly set apply/call – to point to the first parameter of the function

A common misconception

Foo.method = function() {
    function test() {
        console.log(this)
    }
    test() // window
}
Copy the code

It would be assumed that the “this” in the test function would point to Foo, but it doesn’t. It would point to a global object. If you want to get the internal this of Foo, you can say this

Foo.method = function() {
    let that = this
    function test() {
        console.log(that)
    }
    test() // Foo
Copy the code

Another odd-looking area is function aliasing, which is assigning a method to a variable. In the above example, b is called just like a normal function. Therefore, this inside the function is not referred to the A object, but to the global object

let a = {
    b: function() {
        console.log(this.c)
    },
    c: 1
}
let mb = a.b
mb() // undefined (pointing to window)
Copy the code

Four,

Preparation for the creation of the execution context initializes the three properties mentioned above, which play an important role in the code execution phase, specifying values

Things like closures and higher-order functions that make you feel like variables change and change depend on that foundation. It is not so difficult to look at it once you understand its principle and content