JavaScript Scope Chain Resolution

In JavaScript there is scope (scope), scope chain (scope chain), execute context (execution contexts), active object, dynamic scope ), Closure (closures) 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:

function Add (NUM1, num2) {

var sum = num1 + num2;

return sum;

}

We have defined an add function with two parameters.

Static aspects:

When the Add function is created, the Javascript engine creates the scope chain of the Add function, which points to the global context. If the representation is visualized graphically as shown:

As you can see, when the Add function is created, the scope chain is created, so you can conclude that the scope chain of the function is created when the function is created, not the dynamic run time. Here's a look at what happens when the dynamic runs.

Dynamic aspects:

When the Add function is executed, JavaScript creates an execute context (the execution contexts), and the execution context contains all the information needed to run the Add function. The execute context also has its own scope chain, and when the function runs, the JavaScript engine first initializes the scope chain of the execution context from the scope chain of the Add function, and then the JavaScript engine creates an Active OBJ ECT, which contains all the local variables, parameters, and this variables for the function's run time.

If the image describes what the add function will do during the dynamic runtime, it can be described by the Tathagata:

As you can see, 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 of the dynamic scope, the JavaScript engine dynamically changes the execution context when JavaScript passes the WITH statement, the Try-catch catch clause, and the Eval method. 's scope. Here's an example to look at:

[JavaScript]View Plaincopy

2. function Initui () {
4. With (document) { //avoid!
6. var bd = body,
8. Links = getElementsByTagName ("a"),
10. i= 0,
12. len = links.length;
14. While (i < len) {
16. Update (links[i++]);
18. }
20. getElementById ("go-btn"). onclick = function () {
22. Start ();
24. };
26. Bd.classname = "Active";
28. }

When executing the Initui function above, JavaScript dynamically creates a scope of the WITH statement corresponding to the front of the execution context scope chain, which, by visually describing the process, shows the scope that the WITH statement produces.

Finally, let's take a look at JavaScript's most mysterious Closure (closures), the closure in JavaScript is actually a function, the closure is created during the function run time, the following is an example to see:

[JavaScript]View Plaincopy

1. function assignevents () {
2. var id = "xdi9592";
3. document.getElementById ("save-btn"). onclick = Function (event) {
4. SaveDocument (ID);
5. };
6. }

When the above assignevents function is executed, a closure is created, and the closure references the ID variable in the assignevents scope, and if, in the traditional programming language, the ID is a variable stored on the stack, the ID disappears when the function is executed. So how is it possible to quote again? It's obvious that JavaScript is in a different way here. Here's a look at how JavaScript can implement closures. When executing the assignevents function, the JavaScript engine creates the scope chain of the assignevents function execution context, which contains the active object at the time of the assignevents execution, while the JavaScript The engine also creates a closure, and the scope chain of the closure also references the active object at the time of the assignevent execution, so that when Assignevents executes, the scope chain of its own execution context does not refer to the active object anymore, but the closure still references Assignevents the activity object corresponding to the runtime, which explains the closure mechanism inside the javascipt. You can use the image to express the above assignevents function of the case:

As can be seen from the above, when the Assignevents function is finished, document.getElementById ("save-btn"). The onclick refers to the closure so that when the user clicks on the save-btn, the execution of the closure is triggered. So here's a look at what happens when a closure is executed. It also says that the closure in JavaScript is actually a function, so the case of closure execution and function execution is consistent, and the closure that is associated with the above onclick event is depicted visually.

It can be seen that the JavaScript engine first creates the execution context of the closure, then uses the closure scope chain to initialize the execution context scope chain of the closure, and then puts the corresponding active object at the top of the scope at the end of the closure, which further verifies that the closure is the function's assertion.

JavaScript Scope Chain Resolution