Understanding and use of js scope and scope chain concept

(1) Scope

The scope of a variable is the area of ​​this variable defined in the program source code.

1. Lexical scope is used in JS

Variables not declared in any function (the omitted var in the function is also considered global) are called global scopes.
Variables declared within a function have a function scope and are local variables

Local variables have higher priority than global variables

var name="one";
function test(){
 var name="two";
 (name); //two
}
test();

The omission of var in the function will affect the global variable because it has actually been rewritten as a global variable.

var name="one";
function test(){
 name="two";
 
}
test();
(name); //two

Function scope, that is, the function is the basic unit of a scope, and js does not have block-level scope like c/c++, such as if for, etc.

function test(){
 for(var i=0;i<10;i++){
  if(i==5){
   var name = "one";
  }
 }
 (name); //one
}

test(); //Because it is a function-level scope，So you can access itname="one"

Of course, higher-order functions are also used in js, which can actually be understood as nested functions

function test1(){
 var name = "one";
 return function (){
  (name);
 }
}
test1()();

After test1(), the outer function will be called, and an inner function will be returned. Then () will be continued, and the inner function will be executed accordingly, so the output "one" will be output.
Nested functions involve closures, and we will talk about them later. Here, the inner function can access the variable name declared in the outer function, which involves the scope chain mechanism.

2. Declaration in JS is ahead of schedule

Function scope in js means that all variables declared within a function are always visible within the function body. Moreover, variables can be used before declaration, which is called hoisting
tip: Declaration is done when the js engine is precompiled. Before the code is executed, the phenomenon of declaring advance occurs.

for example

var name="one";
function test(){
 (name); //undefined
 var name="two";
 (name); //two
}

test();

The above achieves the following effect

var name="one";
function test(){
 var name;
 (name); //undefined
 name="two";
 (name); //two
}

test();

Try to remove the var? This is the name in the function has become a global variable, so it is no longer undefined

var name="one";
function test(){
 (name); //one
 name="two";
 (name); //two
}

test();

3. It is worth noting that none of the above mentioned parameters are passed. If the test has parameters, what if?

function test(name){
 (name); //one
 name="two";
 (name); //two
}

var name = "one";
test(name);
(name); // one

As mentioned before, the basic type is passed by value, so the name passed into the test is actually just a copy, and the copy is cleared after the function returns.
Don't think that the name="two" in the function has changed the global name, because they are two independent names

(2) Scope chain

The above-mentioned advanced functions involve scope chains

function test1(){
 var name = "one";
 return function (){
  (name);
 }
}
test1()();

1. Introduce a large passage to explain:
Each piece of js code (global code or function) has a scope chain associated with it.

This scope chain is an object list or linked list. This set of objects defines the "scope" variables in this code.

When js needs to find the value of the variable x (this process is called variable resolution), it will start from the first object of the chain. If this object has a property named x, the value of this property will be directly used. If there is no property named x in the first object, js will continue to look for the next object on the chain. If the second object still does not have a property named x, it will continue to look for the next one, and so on. If no object on the scope chain contains the attribute x, then it is considered that x does not exist on the scope chain of this code, and a reference error (ReferenceError) exception is finally thrown.

2. Examples of scope chains:

In the top-level code of js (that is, the code within any function definitions) the scope chain consists of a global object.

In the function body that does not contain nesting, there are two objects on the scope chain. The first is an object that defines function parameters and local variables, and the second is a global object.

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

3. Scope chain creation rules:

When defining a function (note that 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 parameters or local variables, and adds the object to that scope chain, while creating a new longer "chain" representing the scope of the function call.

For nested functions, the situation changes again: each time the external function is called, the internal function will be redefined again. Because every time an external function is called, the scope chain is different. Internal functions have subtle differences every time they are defined - every time they call external functions, the code of the internal functions is the same, and the scope chain associated with this code is also different.

(tip: Understand the above three points well and remember them. It is best to be able to say them in your own words, otherwise memorize them, because the interviewer will ask you directly: Please describe the scope chain...)

Here is a practical example of scope chains:

var name="one";
function test(){
 var name="two";
 function test1(){
  var name="three";
  (name); //three
 }
 function test2(){
  (name); // two
 }
 
 test1();
 test2();
}

test();

The above is a nested function, and the corresponding one should be that there are three objects on the scope chain.
Then when calling, you need to find the value of name, and look up on the scope chain.

When the test1() is successfully called, the order is test1()->test()->global object window. Since the value of name three is found on test1(), the search is completed and returned.
When the test1() is successfully called, the order is test2()->test()->global object window. Since the value of name is not found on test2(), I look for the name in test(), find the value of name two, and complete the search and return.

There is another example that sometimes we make mistakes and are often deceived during interviews.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
  for(var i=1;i<4;i++){
    var b=("button"+i);
    ("click",function(){ 
      alert("Button"+i); //It's all Button4    },false);
  }
}
=buttonInit;
</script>
</head>
<body>
<button >Button1</button>
<button >Button2</button>
<button >Button3</button>
</body>
</html>

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

("click",function(){ 
      alert("Button"+i);
    },false);

There is a function here, which is an anonymous function. Since it is a function, it has an object on the scope chain. The variable i is used in this function, and it will naturally look for it in the scope.
The search order is this anonymous function -->External function buttonInit() -->Global object window

I cannot be found in the anonymous function, so I naturally ran to buttonInit(), ok, found in for.

At this time, the registration event has ended. Don't think it will put i down one by one, because the variables within the function scope are always visible in the scope, that is, they will remain until the last state

When the anonymous function wants to use i, the registration event is finished, and i has become 4, so it is all Button4

So how to solve it?

Pass the value to it. Each time you loop, use an anonymous function to pass the i in the for. The rules of the anonymous function are like code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
  for(var i=1;i<4;i++){
    (function(data_i){
    var b=("button"+data_i);
    ("click",function(){ 
      alert("Button"+data_i);
    },false);
    })(i);
  }
}
=buttonInit;
</script>
</head>
<body>
<button >Button1</button>
<button >Button2</button>
<button >Button3</button>
</body>
</html>

This will do Button1..2..3

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

The syntax is as follows:

with(object)

statement

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

Simple usage:

For example, assign value to the value of each item in the form

Generally we can do this directly

var f = [0];
 = "";
 = "";
 = "";

After introducing with (because using with will cause a series of problems, so use the above form)

with([0]){
 = "";
 = "";
 = "";
}

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

with(o){
 x = 2;
}

It can be converted to = 2;
If o does not define the attribute x, its function is just equivalent to x = 2; a global variable.

Because with provides a shortcut to read the properties of o, it cannot create properties that o itself does not have.

To understand the scope scope of a variable, you must first understand the scope chain
When declaring a variable with the var keyword, it is to add a property to the object where the variable is located.
Scope chain: Since js variables are attributes of objects, and this object may be attributes of other objects, and all objects are attributes of window objects, the relationship between these objects can be regarded as a chain
The head of the chain is the object where the variable is located, and the tail of the chain is the window object.

Look at the following code: