Execution context + execution context stack

Execution context

What’s EC (execution context)?

Every time the controller goes to ES executable code (there are three types of executable code: global code, function code, and eval code), it enters an execution context.

Details of EC establishment

Create the EC phase (time node: when a function is called but no internal code is executed)
- Initializing the Scope Chain
- Creating a variable object
- For this value
Execution phase: Runs the function code in the current context and executes the value of the assigned variable (AO) line by line along the code

EC abstracts as an object

ECObject : {
    scopeChain: {},
    variableObject: {},
    this: {}
}
Copy the code

What’s VO?

Each execution context allocates a variable object that holds function identifiers, parameters, variable declarations, and so on in the execution context that can be accessed but cannot be deleted.

VO creation details:

Create arguments objects, check the context, initialize the parameter names and values, and create a copy of the references.
Function declarations (non-functional expressions) for scanning context
- For each function discovered, a property is created on VO, the name of the property being the name of the variable, initialized as an in-memory reference to the function
- If the function name already exists, the reference pointer is overwritten (including the parameter)
Scan context variables
- For each variable found, create an attribute on VO, the attribute name being the name of the variable, initialized to undefined
- If the function name already exists, no action is taken to continue the scan

What’s AO?

When the function is activated, an AO is created and assigned to EC, the active VO. When an execution context is entered, the VO of that execution context is activated and becomes the AO. Only the attributes of the AO can be accessed.

EC creates abstractions as code

function(i) {
    var a = 'hello';
    var b = function() {}
    function c() {} } foo(22); ECObject = {scopeChain: {... }, variableObject: {arguments: {0: 22, length: 1}, I: 22, // key c: pointer to functionc c (), // reference a: undefined, b: undefined }, this: {... } // 2. ECObject = {scopeChain: {... }, variableObject: { arguments: { 0: 22, length: 1 }, i: 22, c: pointer to functionc c (), a:'hello',
        b: pointer to function() {}}}Copy the code

Execution context stack

JS is a single-threaded language, which means that you can only do one task at a time, and then move on to the next task. In a JS program, multiple ECs are generated, and the JS engine processes these ECs in a stack.

What’s ECS (execution context stack)?

ECS, with LIFO (LIFO) data structures

ECS runtime details

1. When a JS program is first encountered, a global EC is created, represented by a globalContext, and pressed into ECS 2. When a function is executed, an EC is created and pushed into the ECS, and when the function is finished processing, the EC of the function is knocked off the stack.

ECS runs abstracted into code

function fun3() {
    console.log('fun3')}function fun2() {
    fun3()
}
function fun1() { fun2() } fun1(); // ECStack = []; ECStack.push(golbalContext); ECStack.push(<fun1>functionContext)
ECStack.push(<fun2> functionContext)
ECStack.push(<fun3> functionContext)
ECStack.pop();
ECStack.pop();
ECStack.pop();
Copy the code

Problem resolution

Now it’s time to test your results

Q1: Code A and CODE B have the same result, but what is the difference?

Var scope ="global scope";
function checkscope(){
    var scope = "local scope";
    function f() {return scope;
    }
    returnf(); } checkscope(); Var scope ="global scope";
function checkscope(){
    var scope = "local scope";
    function f() {return scope;
    }
    return f;
}
checkscope()();
Copy the code

It’s just that ECS changes differently

// ECStackA = [globalContext]; ECStackA.push(<checkscope>functionContext)
ECStackA.push(<f> functionEcstack.pop () ecstack.pop () // B ECStackB = [globalContext] ecstackb. push(<checkscope>functionContext)
ECStackB.pop()
ECStackB.push(<f> functionContext)
ECStackB.pop()
Copy the code

Q2: Write the printed result of the following code

// When the function passes a value, it copies the reference address of webSite to the functionfunctionChangeObjProperty (o) {// Change the object property value in the corresponding address"http://www.baidu.com"O = new Object() o.siteurl ="http://www.google.com"
} 
let webSite = new Object();
changeObjProperty(webSite);
console.log(webSite.siteUrl); // "http://www.baidu.com".Copy the code

Execution context + execution context stack