Talk about my understanding of the JS scope

At the beginning of the design, the JavaScript language designed the function as a special object that contains the logic of the executable code. As an object, a function can have a programmatic read-write property like a normal object variable, or it can be passed and referenced like a normal variable. But here's the problem, when the function executes, how does the interpreter parse the identifiers inside the code? JS does this, when a function object is created, or when a function is defined, the function object contains not only the code logic but also an internal property [[Scope]] that refers to a scope chain (which can be understood as a list of objects). If the function is defined in a global context, then there is only a global scope in this scope chain.

To say this is more abstract, let's directly analyze the following global functions:

var function (x) {    var b = ' BB ';     return b;};

When such a simple function enters the browser, the JS interpreter in the browser begins to interpret the code because there is an identifier parsing when the code is interpreted, so before that, the JS interpreter needs to scan the global, initialize the global scope, The A variable we define is also placed in the global scope at this time (defined in advance), but the A variable is still undefined. When the interpreter interprets the code from top to bottom, it first creates an anonymous function and presses the global scope into the scope chain (the object list) referenced by the internal properties of the function object. Then assign it to the variable A.

As shown in the following:

So what happens when we execute a function?

A ();

First, an internal object is created, which we call the "execution period context" of the function, and the execution period context of a function defines the environment in which a function executes. Each execution of the function creates a unique execution period context that is destroyed when the function finishes executing. Each execution period context object has its own scope chain (object list), which is used to parse identifiers. When the execution period context is created, its scope chain is initialized to the object contained in the [Scope] property in the currently executing function object. These values are copied into the action chain of the execution period context in their original order. Once this process is complete, it is:

The interpreter then creates a new internal object called the active object (activation objects) that contains all the local variables (internal VAR declarations) of the current execution function, named parameters (parameters), parameter collections (arguments), and this. The object is then pushed into the front of the scope chain in the execution period context. Such as:

At this time, do you think of JavaScript function scope, variable declaration in advance of the problem? The root of the problem is here. Before executing the function internal instruction from top to bottom, the interpreter has already acquired the variable in advance to declare the ^_^. (variable declarations have many details ahead of time, such as the Declaration of advance but the assignment is not in advance, the function of the two definitions of inconsistent behavior, this is not detailed). When the function execution context is created, the interpreter begins to interpret the code from top to bottom, and each time an identifier is encountered, it iterates through the scope chain in the execution context: first in the top-most active object, if not found, then find the next layer, and finally find a global scope, If you have not found a normal syntax error, but when you perform an assignment operation on an undefined variable, the interpreter creates the variable and assigns a value to the global scope. This is important to be careful when programming, to prevent contamination of the global environment, or to cause memory leaks.

The above is a simple function, what if there is a function nesting? On the code:

var function (x) {    var b = ' BB ';     var function () {        var c = ' cc ';    };     return b;};

In a function also defines a inner function, a function in the execution, the inner function is defined, that is inner function object is created, code word too hard direct:

It is obvious to see that the scope chain that the inner function object points to when it was created is initialized to the scope chain of the A function execution period context. The execution period context is also created when the inner function is executed. The execution period context is created the same as when you execute a function, and it is not duplicated here.

If you nest several layers, you will iterate like this ....

Well, first of all, I wanted to talk about closures (but I'm sure we've found a connection ... ^_^), but the time is limited, next time.

This article refers to the "high-performance JavaScript", the JavaScript authoritative guide.

If there is a mistake, do not hesitate to point out, we learn together to grow ...

Talk about my understanding of the JS scope