JavaScript scope chain parser _ javascript tips-js tutorial

I have always been confused about the scope of Js. Today, I accidentally read the Javascript authoritative guide, which immediately attracted me. It's really good to write. I am reading the sixth version, which is quite thick and has more than 1000 pages. Js is profound and profound. It takes great effort to be familiar with and proficient. Thanks for your understanding. JavaScript has Scope, Scope chain, Execute context, Active Object, and Dynamic Scope ), closure (Closure) concepts. To understand these concepts, let's analyze them from both static and dynamic aspects.

First, let's write a simple function for example:

The Code is as follows:

Function add (num1, num2 ){
Var sum = num1 + num2;
Return sum;
}

We define an add function with two parameters.

Static:

When the add function is created, the Javascript engine creates the Scope chain of the add function, which points to the Global Context ). The following figure shows the visualized representation of the image:

As you can see, when the add function is created, the scope chain has been created. Therefore, we can draw a conclusion that the function scope chain has been created when the function is created, instead of the dynamic runtime. Next let's take a look at what will happen during the dynamic runtime.

Dynamic aspect:

When the add function is executed, JavaScript creates an Execute context, which contains all the information required during the runtime of the add function. Execute context also has its own Scope chain. When a function runs, the JavaScript engine first initializes the Scope chain of the execution context by using the Scope chain of the add function, the JavaScript engine then creates an Active Object that contains all the local variables, parameters, and such variables during the function runtime.

If you visually describe what will happen during the dynamic runtime of the add function, you can describe it as follows:

It can be seen that the execution context is a dynamic concept, which is created when the function is running, and the Active Object is also a dynamic concept, it is referenced by the scope chain of the execution context. Therefore, we can draw a conclusion that the execution context and the activity object are both dynamic concepts, and the execution context's scope chain is initialized by the function scope chain.

The function scope and execution context scope are mentioned above. Next we will talk about the dynamic scope problem. When JavaScript uses the with statement, try-catch clause, and eval method, the JavaScript Engine dynamically changes the scope of the execution context. Here is an example:

The Code is as follows:

Function initUI (){
With (document) {// avoid!
Var bd = body,
Links = getElementsByTagName (""),
I = 0,
Len = links. length;
While (I <len ){
Update (links [I ++]);
}
GetElementById ("go-btn"). onclick = function (){
Start ();
};
Bd. className = "active ";
}

When the above initUI function is executed, JavaScript will dynamically create a with statement with the corresponding scope put at the front of the execution context scope chain, through which you can visually describe the above process, the area marked in red shows the scope of the with statement.

Finally, let's take a look at the most mysterious Closure (Closure) in JavaScript. The Closure is actually a function in JavaScript, And the Closure is created during the function runtime. Let's take a look at it with an example below:

The Code is as follows:

Function assignEvents (){
Var id = "xdi9592 ";
Document. getElementById ("save-btn"). onclick = function (event ){
SaveDocument (id );
};
}

When the above assignEvents function is executed, a closure will be created, and this closure will reference the id variable in the assignEvents scope. If you follow the traditional programming language method, id is a variable stored on the stack. After the function is executed, the id disappears. How can this variable be referenced again? Obviously, JavaScript adopts another method. Next let's take a look at how JavaScript implements closures. When the assignEvents function is executed, the JavaScript engine creates a scope chain for the execution context of the assignEvents function. This scope chain contains the activity objects during assignEvents execution, at the same time, the JavaScript engine will also create a closure, and the scope chain of the closure will also reference the activity object during assignEvent execution, so that when assignEvents completes execution, although the scope chain of the execution context does not reference the activity object any more, the closure still references the activity object corresponding to the assignEvents runtime, which explains the closure mechanism inside JavaScipt. The above situation of the assignEvents function runtime can be illustrated in an image:

It can be seen from the above that after the assignEvents function is executed, document. getElementById ("save-btn "). onclick references the closure, so that when you click save-btn, the closure execution will be triggered. Next let's take a look at the closure execution situation. The closure in JavaScript is actually a function. Therefore, the closure execution is consistent with the function execution scenario. The closure associated with the above onclick event is vividly described.

It can be seen that the JavaScript engine first creates the execution context of the closure, and then uses the closure scope chain to initialize the execution context scope chain of the closure, finally, we put the activity object corresponding to the closure execution to the frontend of the scope, which further verifies that the closure is the argument of the function.