JavaScript should understand the closure first, and understand the lexical scope.

To understand this, we can actually compare the scope of variables in the traditional object-oriented (such as JAVA, C,

The reason why it is called lexical scopes is that this concept is quite basic and extremely important in js. Many mistakes or strange problems are related to this. Therefore, this article mainly describes the concept of this term and discusses the issues related to variables, functions, and closures.

Starting with variables

Habitual first-come code:

Var x = "globol value"; var getValue = function () {alert (x); // The "undefined" var x = "local value"; alert (x ); // pop up "local value";} getValue ();

The code is very simple. First, we define a global variable x with an initial value, and then write a getValue method. Then we use alert to pop up the value of x, but the result is undefined, neither global value nor local value, which may be strange to us. In fact, the key to understanding this problem is to understand the scope of x.

X in the first var x is a global variable. As mentioned above, the js interpreter will first create a global object before executing any code ), A global variable is an attribute equivalent to a global object. Similarly, for the getValue function, a thing called the call object is generated. A local variable is the property of the call object. In this example, the x in the second var x is a local variable.

Main Character debut

The above is actually to take the main character of this article as the lexical scope. Where is this sacred? To understand this, we can actually compare the scope of variables in the traditional object-oriented (such as JAVA and C #). We know that the scope of variables in C # is block-level, that is, this variable can only be active in one of its direct external systems. for example, in the if clause, the variables defined in the for clause cannot be read from outside. In js, variables are not like this. Other members of variables defined in the same function can access them. The following example shows a lot of clarity:

Function test (o) {var I = 0; if (typeof o = "object") {var j = 0; for (var k = 0; k <10; k ++) {document. write (k);} document. write (k); // k can be accessed, even if it is in the for clause} document. write (j); // indicates that j can be accessed, even if it is in the if clause}

After understanding this, we can understand the meaning of lexical scopes in js. When a function is defined, the current scope will be saved and become part of the internal state of the function. This is a very important concept. In the example below, when the getValue function is defined, its scope is saved and added to the scope chain, and its top is the global execution environment. When the getValue method is called, The js interpreter first sets the scope as the scope when defining the function (that is, the one previously saved). Next, he adds the call object (getValue) function before the scope, and adds a global object to the top of the scope. Dizzy? Let's take a look at the figure I drew:

This makes it clear that the scope chain is actually a bit similar to the prototype chain. It also seems that if it is not found in a very scope, it will be searched up. For example, in the example at the beginning, when looking for x (by the way, we should first introduce the pre-defined mechanism of js, that is, the js interpreter will first initialize the variables defined by var, it should be said that it only serves as a definition. If no value is assigned, it is first found in this scope. If there is a pre-defined knowledge, we can find x, but no value is assigned. Therefore, it is an undefined value. Now that we know that the code at the beginning is actually equivalent to the following:

Var x = "globol value"; var getValue = function () {var x; alert (x); // the pop-up "undefined" x = "local value "; alert (x); // "local value";} getValue ();

In fact, the js interpreter should execute things according to the above example, so from another perspective, it is meaningful and beneficial to put the definition of variables at the beginning.

Extension

After we have understood the concepts of lexical scopes, it is not difficult to understand the concept of closures. He just used the undownward nature of the scope chain (my term ..), that is, the following scope can access the above, but the above cannot access the following. Of course, this is only a condition for the closure. The closure is more important because the external function holds a reference to a nested function of the internal function, because the closure is not mainly discussed in this article (ps: I will talk about encapsulation), so I just want to look at the example below:

function foo(){var age = 10;function boo(){age += 10;return age;}return boo;} var tx = new foo();alert(tx());    //20

This is the first step in the discussion of lexical scopes. I 'd like to say that this concept is still very important. Of course, the content of this article is just some of my views and understandings on the Self introduced in books. If you have any questions, I hope you can point them out.

Address of this article: http://www.nowamagic.net/librarys/veda/detail/1307,welcome.