Every time the controller goes to executable code, it goes back into an execution context. The execution context, which can be understood as the execution environment of the current code, forms a scope. The runtime environment in javascript includes three scenarios.

Function context: When a function is called to execute, it enters the current function to execute the code eval (not recommended and can be ignored).Copy the code

So in a javascript program, there are bound to be multiple execution contexts, and as I mentioned in my last article, the javascript engine handles them in the form of a stack, which we call a function call stack. The bottom of the stack is always the global context, and the top is the context currently executing.

When the code encounters the above three situations during execution, an execution context will be generated and placed on the stack. When the context at the top of the stack completes execution, it will be automatically removed from the stack. In order to understand this process more clearly, I will show you the following examples and illustrations.

Execution context can be understood as the execution environment of a function. When each function is executed, it creates such an execution environment for the corresponding function. var color='blue'; functon changeColor(){ var anotherColor='red'; function swapColor(){ var tempColor=anotherColor; anotherColor=color; color=tempColor; } swapColors(); } changeColor(); We use ECStack to represent the stack that processes the execution context group. As we can easily see, the first step is to push the global context.Copy the code

After the global context is pushed, the executable code within it executes until It encounters changeColor(), which activates the function changeColor to create its own execution context, so the second step is to push changeColor’s execution context.

Once the changeColor context is pushed, the controller starts executing its executable code and activates another execution context when swapColors() is encountered. So the third step is to push the execution context of swapColor.

In the executable code for swapColors, no other context can be executed, so the code completes without a problem and the swapColors context pops off the stack.

After the execution context of swapColors pops up, the executable code of changeColor continues to be executed without encountering any other execution context, and pops up after successful execution. This leaves only the global context in the ECStack.

The global context is pushed after the browser window is closed. Note: when a return is encountered, it terminates the execution of the executable code, and therefore pops the current context directly off the stack.

Having looked at this process in detail, we can draw some conclusions about the execution context.

1, single thread 2, synchronous execution, only on the top of the stack in the execution context context needs to wait for the other three, the global context, there was only one, make it in the browser is closed for there is no limit to the number 4, the function of the execution context of 5, each time a function is called, there will be a new execution context for the creation, even if is to call its function, Same thing.

To reinforce our understanding of the execution context, let’s plot the evolution of a simple closure example. function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); //999 Since f2 in f1 is not called in the f1 executable, f2 does not create a new context when f1 is executed, and does not create a new context until result is executed. The specific evolution process is as follows.

I’ll leave you with a simple example, and you can imagine how the execution context changes during execution. var name=”window”;

Var p={name:’Perter’, getName:function(){var self=this; return function(){ return self.name; }}}

var getName=p.getName(); var _name=getName(); console.log(_name);