Basic collection of javascript-lexical Scope

I originally wanted to write js object-oriented notes (2) about encapsulation, but when I typed the instance code, I found that the concept of scope was a bit vague. After reading the rhinoceros, A little bit, just want to record the feelings at this time first. The reason why the name is called lexical scope is that this concept is quite basic in js and also extremely SyntaxHighlighter. all ();

I originally wanted to write js object-oriented notes (2) about encapsulation, but when I typed the instance code, I found that the concept of scope was a bit vague. After reading the rhinoceros, A little bit, just want to record the feelings at this time first.

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.

　　1. Start with variables

Habitual first-come code:

1 　　VarX= "Globol value";
2     VarGetValue= Function(){
3 Alert (x );//"Undefined" is displayed"
4         VarX= "Local value";
5 Alert (x );//"Local value" is displayed ";
6 }
7 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.

　　2. debut of the main character

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:

1 　　FunctionTest (o ){
2         VarI= 0;
3         If(TypeofO= "Object"){
4             VarJ= 0;
5             For(VarK=0; K< 10; K++){
6 Document. write (k );
7 }
8 Document. write (k );//K can be accessed, even if it is in the for Clause
9 }
10 Document. write (j );//It indicates that j can be accessed, even if it is in the if clause
11 }

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:

1 var x = "globol value";
2     var getValue = function(){