JavaScript Scope Chain parsing

JavaScript has scope (scope), scope chain (scope chain), execute context (execution contexts), active object (active objects), dynamic scope (animated scope), Closure ( Closure) These concepts, to understand these concepts, we from the static and dynamic two aspects to analyze.

First, let's write a simple function to do an example:

The code is as follows:

function Add (NUM1, num2) {

var sum = num1 + num2;

return sum;

}

We have defined an add function with two formal parameters.

Static aspects:

When you create the Add function, the JavaScript engine creates the scope chain of the Add function, which points to the global context. If visualized graphically, the following illustration shows:

As you can see from the diagram above, when the Add function is created, the scope chain is created, so it is possible to conclude that the scope chain of the function was created when the function was created, not the dynamic runtime. Let's take a look at what happens during the dynamic runtime.

Dynamic aspects:

When the Add function is executed, JavaScript creates an Execute context, which contains all the information required for the runtime of the Add function. The execute context also has its own scope chain, and when the function is run, the JavaScript engine first initializes the scope chain of execution contexts from the scope chain of the Add function, and then the JavaScript engine creates an active Object, which contains all the local variables, parameters, and this variable for the run-time of the function.

If the image describes what happens during the dynamic runtime of the Add function, it can be described in the following diagram:

As you can see from the illustration above, the execution context is a dynamic concept that is created when the function is run, and the active Object object is also a dynamic concept that is referenced by the scope chain of the execution context. It is therefore possible to conclude that both the execution context and the active object are dynamic concepts, and that the scope chain of the execution context is initialized by the function scope chain.

It says the function scope and the execution context scope, and then the problem with the dynamic scope, and when JavaScript passes through the WITH statement, the Try-catch catch clause, and the Eval method, The JavaScript engine dynamically alters the scope of the execution context. The following is an example to see:

The code is as follows:

function Initui () {

With (document) {//avoid!

var bd = body,

Links = getElementsByTagName ("a"),

i= 0,

len = links.length;

while (I < Len) {

Update (links[i++]);

}

getElementById ("Go-btn"). onclick = function () {

Start ();

};

Bd.classname = "active";

}

When performing the above Initui function, JavaScript dynamically creates a with statement corresponding scope to the execution context chain of the most front-end, through the figure can be described in the image of the above process, the following figure red callout area shows the scope of the WITH statement.

Finally, let's take a look at JavaScript's most cryptic closure (closures), where JavaScript is actually a function, closures are created in the run-time of the function, and the following is an example:

The code is as follows:

function assignevents () {

var id = "xdi9592";

document.getElementById ("Save-btn"). onclick = function (event) {

SaveDocument (ID);

};

}

When the Assignevents function is executed, a closure is created, and the closure refers to the ID variable in the assignevents scope, and if the ID is a variable stored on the stack in the traditional programming language, the ID disappears when the function is done. So how is it possible to cite it again? It's obvious that JavaScript is taking another approach. Let's look at how JavaScript implements closures. When the Assignevents function is executed, the JavaScript engine creates the scope chain of the assignevents function execution context, which contains the active object of the assignevents execution. The JavaScript engine also creates a closure, and the closure's scope chain references the active object at Assignevent execution, so that when the assignevents executes, the scope chain of its own execution context no longer references the active object. However, closures still refer to the active objects corresponding to the Assignevents runtime, which explains the closure mechanism within the javascipt. You can use the image below to describe the operation of the above assignevents function:

As you can see from the above, when the Assignevents function is finished, document.getElementById ("save-btn"). OnClick references the closure so that when the user clicks on the SAVE-BTN, the closure is triggered. So let's look at the case of closure execution. It is also said that in JavaScript the closure is actually a function, so the case of closure execution and function execution is consistent, and the following image depicts the closure associated with the onclick event.

From the illustration above you can see that the JavaScript engine first created the execution context of the closure. Then we use the closure scope chain to initialize the closure execution context chain, and then put the corresponding active object into the front end of the scope, which further verifies that the closure is the function of the conclusion.