An article to talk about execution context in Javascript

This article will talk about the execution context in Javascript and share a thinking question. Through the analysis of the thinking question, you will surely have a deeper understanding of the execution context.

In the previous articles, we have an in-depth understanding of the three important members of the execution context: variable objects, scope chains, and this. This article is the first The collection of the contents of the four articles aggregates scattered knowledge points and makes a simple consolidation. I don’t know if anyone came here from the previous article. Our last article left a question. Through the analysis of the question, I will have a deeper understanding of the execution context.

Thinking Questions

In order to slightly complicate the case, a few modifications have been made, but the points examined in the original question have not been changed.

function func(value){
    getValue = function(){
        console.log(value);
    };
    return this
}
            
function getValue(){
    console.log(5);
}

Func(1).getValue(); //为什么是1呢？

Specific execution analysis

Execute global code, create a global execution context, and the global context is pushed into the execution context stack

ECStack = [ globalContext ];

Initialize the global context

globalContext = {
    VO: {
        func: reference to function func(){},
        getValue: reference to function getValue(){}
    },
    Scope: [globalContext.VO],
    this: globalContext.VO //全局上下文
}

Initializing the global context creates two functions at the same time, so their parent scope chains will also be saved in their internal properties [[scope]]

func.[[scope]] = [
     globalContext.VO
];
getValue.[[scope]] = [
     globalContext.VO
];

At this time, code execution begins, When the last statement is executed, the func function is executed first, which creates a step-by-step func function execution context:

• Copy function [[scope]] attribute to create a scope chain

• Create the active object with arguments

• Initialize the active object

• Push the active object into the top of the checksfunccope scope chain.

• Create this, simple analysis: MemberExpression value is func, func is a function object, of course a Reference, where its base value is EnvironmentRecord, so its this value is ImplicitThisValue( ref), the return value is always undefined. In non-strict mode, its value will be implicitly converted to a global object.

funcContext = {
    AO: {
        arguments: { // 数组
            0: 1,
            length: 1
        }
    },
    Scope: [AO, globalContext.VO],
    this: undefined
}

Some people may have questions, what about getValue in func? , because it does not have a variable declaration, so it is actually an attribute assignment operation, which will be executed later at runtime.

Create the function execution context and push it into the execution context stack

    ECStack = [
        funcContext,
        globalContext
    ];

The function starts executing. This is the key to why the final output is 1, the first sentence assignment operation , then you need to find the variable getValue along the execution context, then let's look at the scope in funcContext. First find funcContext.AO. Obviously the attribute getValue does not exist, then look up along the scope chain and find it. globalContext.VO, getValue is found. At this time, the getValue attribute in the global scope will be reassigned. What is assigned is a new version of the function, and the function scope is re-created, and the parent of this new getValue function is re-assigned. Level scope chains are stored in their internal properties [[scope]]:

getValue .[[scope]] = [ funcContext.AO, globalContext.VO ];

Then continue to return this and find this of funcContext, that is, return undefined; func execution context pops

ECStack = [ globalContext ];

Continue executionFunc(1).getValue(), the first half returns undefined. At this time, the system implicitly converts to a global variable object and finds the getValue attribute from the global variable object. At this time, we found that getValue was no longer the boy it was back then. The function execution context of the new getValue was pushed onto the stack:

getValueContext = {
    AO: {
        arguments: { // 数组
            length: 0
        }
    },
    Scope: [ AO, funcContext.AO, globalContext.VO ],
    this: undefined
} ECStack = [
    getValueContext,
    globalContext
 ];

function started to execute and found that she wanted to output value, along the scope Go look for it. There is no such attribute in getValueContext.AO. Continue to search and find funcContext.AO (Attention!). If you find the value in the formal parameter, then the corresponding value will be output. 1.

After the function is executed, getValueContext and globalContext are popped off the stack and destroyed one after another, and the code is completed.

Summary

This film uses a simple but not simple example to connect the previous four articles and completely analyze the execution context when JS code is executed. I hope everyone can have a deeper understanding of this work process. However, I wonder if any attentive students have discovered that in the above example, during the execution of the getValue function, from the step of finding the attribute value (marking the position), at that time the func function has obviously been executed, and its execution context has been released. stack, why can we still find the value attribute from its execution context? This is actually the principle of closure generation. In the next article, we will still use this example to learn the principle of closure generation.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of An article to talk about execution context in Javascript. For more information, please follow other related articles on the PHP Chinese website!