I’m sure many front-end beginners will initially be confused or confused by the concept of execution context. For two years of work for me, it is really ashamed, although I know what it is about, but always feel that there is no a clearer understanding (can not describe its work process clearly), so recently specially review, write this article

Execution context

Thread of Exection, variable envirnoment, and Call Stack are some of the basic concepts we’ve been exposed to. I’ll take a look at some sample code and a series of images to further explain how these three concepts work in an execution context.

A piece of code

const num = 2;

function addOne(input) {
  const output = input + 1;
  return output;
}

const result = addOne(2);
Copy the code

What does this code do

The first thing the JS engine does before running the above code is to create a global execution context:

thread
global memory
global

In the first line of this code, we declare an immutable variable named num and assign it to 4, so global memory allocates memory for this variable:

addOne
global memory 

function addOne(input) {
  const output = input + 1;
  return output;
}
console.log(addOne);
Copy the code

When the second line is executed, the function is not called, so the thread does not immediately parse the contents of the function. Instead, it stores the information inside the function as “text content” and parses the contents of the variable when it needs to be executed. This is also a good way to explain why exceptions within a function are thrown only when the function is called.

So the global Execution context looks like this:

addOne

We continue with step 3: the result variable is created again, but it is given undefined because the thread cannot get its return value from the addOne function.

addOne
addOne
local execution context

memory
local
global memory
local memory
variable envirnoment

In addition, the black arrow I’ve made a corner to indicate that it comes in from the global context, local memory will first allocate memory to the input variable, which is assigned by 2 when called, and then create an output tag and assign 3 to it. Finally, when the thread encounters an out-of-context identifier — return, it leaves the context and returns the result of ouput.

At this point, the context is useless (executed), so the garbage collector looks at it and chooses an appropriate time to erase the local memory.

At this point, some students will ask: you are just a common scenario, how to explain the closure?

Closures are a big topic and can be briefly described here: When a function is returned, it not only returns the function itself, but also the variable referenced in local memory as an additional attribute to the function. This is just like the printed fish like to attach to the shark. The eel carries the function with it wherever it goes, so no matter where the function is called, It can find that variable in its own local memory. You can also find it if you return the console.log function, but for more information on closures (including their use in functional programming), check out this article: Partial & Currie – Functional Programming

Go on, return to global Execution context, result is no longer undefined, but gets the lovely 3:

At this point, our thread is done and ready to rest, etc….. What seems to have been missed….. Call Stack!

How hard Thread of Exection parses line by line and variable envirnoment stores variables. What does call Stack do? Are you being lazy?

No, the Call Stack plays a key role: it lets threads know which context they are in at any time.

Imagine, we tend to like in the process of writing code within the various functions of weaving the seed functions, such as recursion, so industrious thread have to constantly into context, out of context, then, to enter and exit, and then into the, over time the thread doesn’t know in which context, We don’t know which memory to fetch data from, it’s all messed up, so we have to have a way to keep track of the current thread’s environment.

The Call Stack, on the other hand, is a data structure that “stores” the context, keeping track of where the thread is currently by pushing in and out of the pop context — the thread doesn’t have to remember where it is, as long as it is always in the top-level execution context, where the current function is executing correctly

When the program starts running, the Call Stack pushes a global Execution context:

addOne
call stack
addOne
push
return
pop

push
pop

call stack
Stack overflow

conclusion

Simply put, a context is an environment in which code can be executed, and there are three important concepts associated with it:

  • Its main function is to parse and execute code line by line, from top to bottom, without executing it in many places at once.
  • Variable envirnoment Memory that is actively used to store data
  • Call stack A data structure used to store context and keep track of the location of the context to which the current thread belongs