avatar

Welcome!

Javascript Execution Context

       
index

Interesting Code

When I worked on David Shariff's Front End Web Development Quiz, I found a very interesting question, and I created a piece of code which very similar to the question. 
            
    ......
    var  x="";
    function foo(y){
        return x;
        var x = 10;
        function x(){var t=123;}
        function x(){return y;}
        var z = function bar(){}
        var x = 1;
        this.x = "foo";
    }
    ......
    console.log(foo(12));
I assumed foo() function would return undefined before I ran the code, but I am wrong. it returns function x(){return y;}. Why? The answer will come to this topic. In this topic, I will get references from ECMAScript since Javascript has been standardized in the ECMAScript language specification.

What Is Execution Context

Before talk about execution context, let's discuss executable code. executable code has four types:
  • Global Code is code in .js file or inside <script></script> but not include function bodies.
  • Function Code is code inside functions, excluding inner functions.
  • Eval Code is code called by eval().
  • Module Code is code that is provided as a ModuleBody

An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation. At any point in time, there is at most one execution context that is actually executing code. This is known as the running execution context.

The execution context stack is used to track execution contexts. The running execution context is always the top element of this stack. A new execution context is created whenever control is transferred from the executable code associated with the currently running execution context to executable code that is not associated with that execution context. The newly created execution context is pushed onto the stack and becomes the running execution context.

To illustrate the upper block of quote, let's dig into follow code 
            
    function a(){
        b();
    }

    function b(){
        console.log("I am here");
    }

    a();
Global Execution Context is default context to enter when a browser first loads script code, it only one and alway at the bottom of a stack. As the upper code show, it enter the Global Execution Context first then create an execution context for function a(); function a() calls function b() with new execution context.
execution context stack
fig 1. execution context stack

What Will Be Done Inside An Execution Context

Now we know what is execution context, so what will be done inside an execution context. For a new execution context, there are 2 stages:
  • Creation Stage is a stage which deals with Scope Chain, function, variable, argument and this pointer.
  • Code Execution Stage is a stage to run code.
Come back to the code that we discuss above code why the result is function x(){return y;}. To illustrate details of the execution context stages, I built a flowing chart.
execution context flowing chart
fig 2. execution context flowing chart
We can see that after the Createion Stage, x is signed the reference address of function x(){return y;}. Other local variables are assigned undefined When the function comes to the Code Execution Stage, it just returns function x(){return y;}. This is the reason why

References