JavaScript base Supplements-lexical scopes

Originally wanted to write JS object-oriented note (ii) about encapsulation, but in the case of the instance code, found that the concept of the scope of the thing is a little vague, after flipping through the rhino, a little feel, thinking of the first record the feeling at this time.

The name is called lexical scope, it is the concept of JS is quite basic and very important, many of the wrong or weird feeling of the problem is related to this thing. Therefore, this article mainly describes the concept of the noun and discuss his related variables, functions, closures of the problem.

　　1. Start with the variable

Habitual first snippet code:

1 var x = "Globol value";
2 var getValue = function () {
3 alert (x); Pop Up "undefined"
4 var x = "Local value";
5 alert (x); Popup "Local value";
6}
7 GetValue ();

The code is very simple, first defines a global variable x and assigns the initial value, then writes a GetValue method, then we use the alert popup x value, but the result is undefined, not global value is not the local value, We may feel strange about this. In fact, the key to understanding this problem is to understand the scope of x.

The x in the first Var x is a global variable, and by the way, the JS interpreter creates a global object before executing any code, and the global variable is a property of the global object. Similarly, for GetValue, this function generates something called the calling object, and the local variable is the property of the calling object, and the x in the second var x in the example is a local variable.

　　2. The protagonist's debut

Said the above is actually to the main character of this article-lexical scope. Where is this sacred? To understand, we can actually compare the scope of the variables in the traditional object-oriented (such as Java, C #), we know that the variable scope in C # is block-level, that is, the variable can only be active in a direct outside the definition of him, such as within the IF clause, the variables defined in the FOR clause outside the external is unreadable. In the case of JS, the variables are not so, the variables defined within the same function are accessible to the other members. Look at an example that will clear a lot:

1 function Test (o) {
2 var i = 0;
3 if (typeof o = = "Object") {
4 var j = 0;
5 for (var k=0; k < k++) {
6 document.write (k);
7}
8 document.write (k); K can be accessed even if he is in the FOR clause
3 ·
Ten document.write (j); Note that J can be accessed even if he is within the IF clause
11}

With this in mind, it is important to understand the meaning of the lexical scope in JS. when a function is defined, the current scope is saved and becomes part of the internal state of the function , which is a very important concept. Here we go back to the beginning of the example, when the GetValue function is defined, his scope is saved and added to the scope chain, his upper end is the global execution environment. When the GetValue method is called, the JS interpreter first sets the scope to the scope that defines the function (that is, the previous one), and then he adds the calling object to the function before the scope (that is, GetValue), and then adds the global object to his upper end. Did you get dizzy? or look at the picture I drew:

　　

This is more clear, the scope of the chain is actually a bit similar to the prototype chain, also seems to be found in the scope of the field will go up. Let's say the opening example, when looking for X, (the first to introduce the next JS pre-defined mechanism, that is, the JS interpreter will first on the VAR definition of the variables initialized, it should be said that only the role of the definition when not assigned), will be found in the scope of the first, there are predefined know can find X, but not assigned So it is the undefined value. Knowing this, we know that the beginning of the code is actually equivalent to the following:

1 var x = "Globol value";
2 var getValue = function () {
3 var x;
4 alert (x); Pop Up "undefined"
5 x = "Local value";
6 alert (x); Popup "Local value";
7}
8 GetValue ();

In fact, what the JS interpreter does should be done in this example, so from another point of view, it is meaningful and beneficial to put the definition of a variable at the beginning.

　　3. Extension

　　With this understanding of the lexical scope concept, it is not difficult for us to understand the concept of closures, he just uses the non-downward nature of the scope chain (the noun I take). ), that is, the following scopes can be accessed above, but the above cannot be accessed below. Of course, this is only a condition of the closure, the closure of the more important is the external function to hold the internal function of a nested function reference, because the closure is not the main discussion of this article (PS: When talking about encapsulation), so just look at the following example:

1 function foo () {
2 var age = 10;
3 function Boo () {
4 age + = 10;
5 return age;
6}
7 return boo;
8}
9
Ten var tx = new Foo ();
Alert (TX ()); 20

　　4. Summary

The lexical scope of the discussion is the first, I would like to say that this concept is still very important. Of course, the content of this article is only my view of the book introduction of the self of some ideas and understanding, there is not appropriate place to point out that, well, go back to bed ~

Turn from--accumulate a bit

JavaScript base Supplements-lexical scopes