Talk about my understanding of JavaScript prototypes and closure series (random notes 8)_javascript skills

In the last article, I introduced you to "Talk about my understanding of JavaScript prototypes and closure series (random notes 6)" , Talk about my understanding of JavaScript prototypes and closure series (Random Note 9) You can click to learn more.

Execution context stack

When global code is executed, an execution context will be generated, and each time a function is called, an execution context will be generated. When the function call completes, this context and the data in it are eliminated and returned to the global context. There is only one active execution context.

Push and pop process----Execution context stack:

var a = 10,    //1. 进入全局上下文环境
  fn,
  bar = function(x) {
   var b = 5;
   fn(x + b); //3. 进入fn函数上下文
  };
fn = function(y) {
 var c = 5;
 console.log(y + c);
};
bar(10);    //2. 进入bar函数上下文环境 

1. Before execution, first create a global context

2. Code execution. Before bar(10) is executed, variables in the global context are assigned values ​​during execution.

3. When executing to bar(10), call the bar function and create an execution context inside the function

4. At this time, it is time to push the execution context onto the stack and set it to the active state

5. The bar function executes to fn(x + b), calls the fn function, creates the execution context of the fn function, pushes it onto the stack, and sets it to the active state

6. After the execution of the fn function is completed, the fn environment is popped off the stack, destroyed, the memory is released, and the bar function becomes active

7. The fn function is executed and destroyed, which means that bar is also executed. At this time, the bar function environment is popped off the stack and destroyed. The global environment becomes active.

The execution process of this piece of code is complete at this point.

According to the original author’s description:

I have omitted many of the variable assignment processes in the context, because they are not difficult and can be understood at a glance.

Indeed! After the approximate execution process of the code is completed, you can clearly know the status of the variables in each execution environment.

At this point, I have to regret to tell you: In fact, what we demonstrated above is a relatively ideal situation. There is a situation, and it is a very common situation, where it is impossible to destroy it as cleanly as possible. This situation is great - closure. To talk about closures, we have to start with free variables and scope.

The above content is the editor sharing with you my understanding of JavaScript prototypes and closure series (random notes 8). I hope you like it.