Understanding JavaScript scopes and scope chains

    Scope

Scope is the accessible scope of variables and functions, controlling the visibility and life cycle of variables and functions, and the scope of variables in JavaScript is global scope and local scope.

The global and local scopes are explained below in a single graph:

simple JavaScript scopes are still well understood.

scope chain

   The global execution environment is the outermost execution environment, where the global execution environment is the window object, so all global variables and functions are created as properties and magnification of the Window object. Each function has its own execution environment, and when the execution flow enters a function, the environment of the function is pushed into a function stack, and after the function is executed, the environment is executed and destroyed, all the variables and function definitions are destroyed, and control is returned to the previous execution environment. The global execution environment will not be destroyed until the application exits (browser close).

When the code is executed in an environment, a scope chain (scope chain) of the variable object is created to ensure that the variables and functions that are accessible to the execution environment are ordered access.

Use a graph to explain the operation of the scope chain: from Inside Out.

when a function is created, its scope chain is populated with data objects that can be accessed by creating the scope of this function, such as defining one of the following functions:        

function Add (num1,num2) {    var sum = num1 + num2;    return sum;}

when the function add is created, it fills a global object in its scope chain, which contains all the global variables, as shown in:

The scope of the function add will be used at execution time, for example to execute the following code:

function A (sum1,sum2) {            var sum=num1+num2;            return sum;        }        var tatal=a (5,10);

Executing this function creates an internal object called the runtime context (execution context), which defines the environment at which the function executes.  　　Each run-time context has its own scope chain, which is used for identifier resolution, when the runtime context is created, and its scope chain is initialized to the object contained by [[Scope]] of the currently running function.

These values are copied into the scope chain of the run-time context, in the order in which they appear in the function. Together they form a new object called the "Activation Object", which contains all the local variables, named arguments, parameter sets, and this of the function, which is then pushed into the front of the scope chain, and the active object is destroyed when the run-time context is destroyed. The new scope chain is as follows:

During the execution of a function, no variable is encountered, and an identifier parsing process is passed to determine where to get and store the data. The process from the scope chain head, that is, starting from the active object search, find an identifier of the same name, if found to use this identifier corresponding to the variable, if not found to continue to search the scope chain of the next object, if the search all objects are not found, the identifier is considered undefined.

    Summary

According to the structure of the scope chain described above, the deeper the defined identifier, the slower the read and write speed, and the global variable is always at the end of the scope chain, so when the variable is parsed, finding the global variable is the slowest, So when writing code, use as few global variables as possible, and use local variables whenever possible.

Understanding JavaScript scopes and scope chains