JS scope and scope of the chain detailed knowledge _ basics

(1) Scope

The scope of a variable is the region of the variable that is defined in the program's source code.

1. The lexical scope is used in JS (lexical scope)

A variable that is not declared within any function (which is also considered global for omitting var within a function) is called a global variable (scope)

A variable declared within a function has a functional scope (function scope) and belongs to a local variable

Local variable priority is higher than global variable

Copy Code code as follows:

var name= "one";
function Test () {
var name= "two";
Console.log (name); Two
}
Test ();

If you omit Var within a function, it affects the global variable, because it is actually rewritten as a global variable

Copy Code code as follows:

var name= "one";
function Test () {
Name= "two";
}
Test ();
Console.log (name); Two

function scope, that is, a function is the basic unit of a scope, JS does not have block-level scopes like C + +, such as if for

Copy Code code as follows:

function Test () {
for (Var i=0;i<10;i++) {
if (i==5) {
var name = "One";
}
}
Console.log (name); One
}
Test (); Because it is a function-level scope, you can access the Name= "one"

Of course, JS also used in the higher-order function, in fact, can be understood as nested functions

Copy Code code as follows:

function Test1 () {
var name = "One";
return function () {
Console.log (name);
}
}
Test1 () ();

Test1 () then calls the outer function, returns an inner function, continues (), executes the inner function on the corresponding call, and outputs "one"

Nested functions involve closures, which are discussed later. Here the inner function can access the variable name declared in the outer function, which involves the scope chain mechanism

2. JS declaration in advance

The function scope in JS refers to all variables declared within a function that are always visible in the function body. Also, the variable can be used before the declaration, which is called the Declaration of Advance (hoisting)

Tip: The declaration was made in advance of the JS engine precompiled, and before the code was executed there was a statement that the earlier phenomenon produced

Like what

Copy Code code as follows:

var name= "one";
function Test () {
Console.log (name); Undefined
var name= "two";
Console.log (name); Two
}
Test ();

The top has the following effect

Copy Code code as follows:

var name= "one";
function Test () {
var name;
Console.log (name); Undefined
Name= "two";
Console.log (name); Two
}
Test ();

Try to get rid of Var again? This is the name within the function that has become a global variable, so it is no longer undefined

Copy Code code as follows:

var name= "one";
function Test () {
Console.log (name); One
Name= "two";
Console.log (name); Two
}
Test ();

3. It should be noted that none of the above mentioned parameters, and if the test has parameters, then what?

Copy Code code as follows:

function test (name) {
Console.log (name); One
Name= "two";
Console.log (name); Two
}
var name = "One";
Test (name);
Console.log (name); One

As I said before, the base type is passed by value, so the name passed in test is actually just a copy, and the copy is cleared after the function returns.
Do not think that the name= "two" in the function modifies the global name because they are two separate name

(2) Scope chain

The advanced functions mentioned above involve the scope chain

Copy Code code as follows:

function Test1 () {
var name = "One";
return function () {
Console.log (name);
}
}
Test1 () ();

1. Introduce a large paragraph to explain:
Each JS code (global Code or function) has an associated scope chain (scope chain).

The scope chain is a list of objects or lists of objects that define the variables in the scope in this code.

When JS needs to find the value of the variable x (this process is called variable resolution (variable resolution)), it starts looking from the first object in the chain, and if the object has a property named X, it will use the value of the property directly, if there is no property named X in the first object, JS will continue to find the next object on the chain. If the second object still does not have a property named X, it continues to find the next one, and so on. If no object on the scope chain contains an attribute x, it is assumed that there is no X on the scope chain of the code and eventually throws a reference error (REFERENCEERROR) exception.

2. Scope Chain Example:

In the top-most code of JS (that is, not including code within any function definition), the scope chain consists of a global object.

In the body that contains no nested functions, there are two objects on the scope chain, the first is the object that defines the function arguments and local variables, and the second is the global object.

In a nested function body, there are at least three objects on the scope.

3. Scope Chain Creation rules:

When a function is defined (note, it starts when it is defined), it actually saves a scope chain.

When this function is called, it creates a new object to store its arguments or local variables, and adds the object to that scope chain, while creating a new, longer "chain" that represents the scope of the function invocation.

For nested functions, the situation has changed: the internal function is redefined each time an external function is invoked. Because each time the external function is invoked, the scope chain is different. Internal functions are subtly different each time they are defined---each time an external function is invoked, the code for the intrinsic function is the same, and the scope chain of the associated code is different.

(Tip: The above three points to understand well, remember, it is best to be able to use their own words out, or on the back, because the interviewer directly asked you: Please describe the scope chain ...)

A practical example of a scope chain:

Copy Code code as follows:

var name= "one";
function Test () {
var name= "two";
function Test1 () {
var name= "three";
Console.log (name); Three
}
function Test2 () {
Console.log (name); Two
}
Test1 ();
Test2 ();
}
Test ();

The top is a nested function, corresponding to three objects on the scope chain
So, when you call, you need to look up the value of name, and you'll find it on the scope chain.

When the Test1 () is successfully invoked, the order is test1 ()->test ()-> the Global Object window because the name value test1 is found on three (), so the search returns

When the Test1 () is successfully invoked, the order is test2 ()->test ()-> the Global Object window because the name value is not found on test2 (), so find the value two of name in Test () and complete the search return

Another example is that sometimes we make mistakes and often get cheated in the interview.

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script type= "Text/javascript" >
function Buttoninit () {
for (Var i=1;i<4;i++) {
var B=document.getelementbyid ("button" +i);
B.addeventlistener ("click", Function () {
Alert ("button" +i); It's all Button4.
},false);
}
}
Window.onload=buttoninit;
</script>
<body>
<button id= "Button1" >Button1</button>
<button id= "Button2" >Button2</button>
<button id= "Button3" >Button3</button>
</body>

Why?
According to the search rules for variables in the scope chain:

Copy Code code as follows:

B.addeventlistener ("click", Function () {
Alert ("button" +i);
},false);

Here's a function, which is an anonymous function, and since it's a function, it has an object on the scope chain, which uses the variable I, which naturally looks for it on the scope.
The lookup order is the function--> external to this anonymous function buttoninit ()--> Global Object window

I was not found in the anonymous function, naturally ran to the Buttoninit (), OK, found in the for,

At this point the registration event is over, do not think it will be one to put I down, because variables within the scope of the function is always visible within the scope, that is, will remain in the final state

When the anonymous function to use I, the registration event is over, I has become 4, so it is Button4

So how do we solve it?

Give it a value to go in, each loop, and then use an anonymous function, the for inside of the I pass in, anonymous function rules such as code

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script type= "Text/javascript" >
function Buttoninit () {
for (Var i=1;i<4;i++) {
(function (data_i) {
var B=document.getelementbyid ("button" +data_i);
B.addeventlistener ("click", Function () {
Alert ("button" +data_i);
},false);
}) (i);
}
}
Window.onload=buttoninit;
</script>
<body>
<button id= "Button1" >Button1</button>
<button id= "Button2" >Button2</button>
<button id= "Button3" >Button3</button>
</body>

So you can Button1. 2..3.

4. The above is the basic description of the scope chain, in addition, the WITH statement can be used to temporarily extend the scope chain (not recommended with)

Grammatical form:

With (object)

Statement

This with statement, adds object to the head of the scope chain, executes statement, and finally restores the scope chain to its original state

Simple usage:

For example, assign values to the values of each item in a form

Normally, we can do this directly.

Copy Code code as follows:

var f = document.forms[0];
F.name.value = "";
F.age.value = "";
F.email.value = "";

With the introduction of the with (because using with has a series of problems, so use the form above)

Copy Code code as follows:

With (Document.forms[0]) {
F.name.value = "";
F.age.value = "";
F.email.value = "";
}

In addition, if an object o has an x attribute, o.x = 1;
Then use

Copy Code code as follows:

With (o) {
x = 2;
}

can be converted into o.x = 2;
If o does not define attribute X, its function is just equal to x = 2; A global variable.

Because with provides a shortcut to read the properties of O, he does not create an attribute that is not in the O itself.

The above mentioned is the entire content of this article, hope to be able to learn JavaScript to be helpful to everybody.