Sunday, February 16, 2014

JavaScript Execution Contexts

1 - Execution Context or Context


The execution context or context is the environment where JavaScript code is evaluated.
→ Global (execution) context
The global execution context is the most outer execution context.
In browsers the global context is also known as window context. In a browser global variables are window properties and global functions are window methods. 
→ Function or Local (execution) context
When a function is called a function execution context is created.


2 - Execution Context Stack

The browser's JavaScript interpreter is a single thread engine. In a single threaded world only an action can be executed at one time and other actions are queued in the execution stack.

When a browser loads a script, it enters the global execution context. If, in the global code, a function foo is called, the sequence flow enters the function foo, the browser creates the execution context of the function foo and pushes that context to the top of the execution stack on the global execution context. If inside the function foo a function bar is called, the same thing happens: a new execution context for the function bar is created and pushed to the top of the execution stack.
Also when a function calls itself a new execution context is created and pushed on the stack.
The current execution context of the context stack is the one that sits on the top of the stack.
The browser executes the current execution context and, once the current function completes, the current execution context will be popped off the top of the stack returning control to the context below the current stack. This goes on until the global context is reached again and the application terminates.

Example:
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">

  function one() {
     two();
     function two() {
        three();
        function three() {
           console.log('I am at function three');
        }
     }
  }

  </script>

</head>
<body>
  <button onClick="one();">CLICK ME</button>
</body>
</html>
The function one() is called when the button is hit, creating its execution context, than the function calls the function two, creating the new execution context and finally the third function execution context is created and pushed to the top of the context stack.

three() execution context
two() execution context
one() execution context
Global execution context

3 - Execution Context in details


Every time a function is called an execution context is first created and then activated.

The creation of an execution context involves three steps: creating a Variable Object, creating a Scope Chain and determing the value of the this object.
Variable Object (VO) in ES3 AKA Variable Environment in ES5
The variable object contains the arguments object of the function, all the local variable defined inside the function and the definitions of all the inner functions contained inside the function.
Scope Chain in ES3 AKA Lexical Environment in ES5
The scope chain property is a collection of the current context's variable object plus all parent execution context's variable objects.
Example:

three()'s execution context's scope chain =
         = [three() VO] + [two() VO] + [one() VO] + [Global VO].

No comments :

Post a Comment