It takes only five sentences to get JavaScript scope of classic

The scope 1 of JavaScript is a knowledge point that is difficult to understand in front-end development. Remember a few words about the scope of JavaScript, and you are not afraid to travel all over the world...

1. "No block-level scope in JavaScript"

There is a block-level scope in Java or C #, that is, braces are also a scope.

public static void main ()
{ if(1==1){
String name = "seven";
}
System.out.println(name);
}//  Report an error 
public static void Main()
{ if(1==1){
string name = "seven";
}
Console.WriteLine(name);
}//  Report an error 

There is no block-level scope in JavaScript language

function Main(){
if(1==1){
var name = 'seven';
}
console.log(name);
}
//  Output:  seven

2. JavaScript uses function scope

In JavaScript, each function has a scope, and the variables in the internal scope cannot be accessed externally.

function Main(){
var innerValue = 'seven';
}
Main();
console.log(innerValue);
//  Error reporting: Uncaught ReferenceError: innerValue is not defined

3. The scope chain of JavaScript

Since each function in JavaScript has a scope, a chain of scopes occurs if function nesting occurs.

xo = 'alex';
function Func(){
var xo = "seven";
function inner(){
var xo = 'alvin';
console.log(xo);
}
inner();
}
Func();

As in the above code, there is a scope chain composed of three scopes. If there is a scope chain, the order will appear when looking for variables. For the above example:

When console. log (xo) is executed, the search order is based on the priority of scope chain from inside to outside. If the inner layer is not found, it will gradually look up until it is not found and throws an exception.

425762-20160707114743577-37359182.png

4. The scope chain of JavaScript was created before execution

The scope of JavaScript has been created before it is executed, and it is only necessary to look for it according to the scope chain when it is executed later.

Example 1:

xo = 'alex';
function Func(){
var xo = "seven";
function inner(){
console.log(xo);
}
return inner;
}
var ret = Func();
ret();
//  Output:  seven

In the above code, the scope chain already exists before the function is called:

Global scope- > Func function scope- > inner Function Scope

When executing "ret ();" Because it refers to the inner function, the scope chain of this function has been defined as: global scope- > Func function scope- > inner function scope, therefore, in the execution of "ret ();" The variables are found according to the existing scope chain.

Example 2:

xo = 'alex';
function Func(){
var xo = "eirc";
function inner(){
console.log(xo);
}
xo = 'seven';
return inner;
}
var ret = Func();
ret();
//  Output:  seven

The above code has the same purpose as Example 1, but also emphasizes that the scope chain exists before the function is called:

Global scope- > Func function scope- > inner Function Scope

When different, execute "var ret = Func ();" The value of the xo variable in the Func scope has been reset from "eric" to "seven", so then execute "ret ();" You can only find "seven".

Example 3:

xo = 'alex';
function Bar(){
console.log(xo);
}
function Func(){
var xo = "seven";
return Bar;
}
var ret = Func();
ret();
//  Output:  alex

The above code has created two scope chains before the function is executed:

Global scope- > Bar Function Scope

Global scope- > Func function scope

When executing "ret ();" The ret generation refers to the Bar function, and the scope chain of the Bar function already exists: global scope- > Bar function scope, therefore, the execution will be based on the scope of the existing chain to find.

5. Statement in advance

In JavaScript, if you don't create a variable and use it directly, you will report an error:

console.log(xxoo);
//  Error reporting: Uncaught ReferenceError: xxoo is not defined

If a value is created and not assigned in JavaScript, the value is undefined, such as:

var xxoo;
console.log(xxoo);
//  Output: undefined

If you write this in the function:

function Foo(){
console.log(xo);
var xo = 'seven';
}
Foo();
//  Output: undefined

The above code does not report an error but outputs undefined. The reason is that before the function of JavaScript is executed, all the variables in it will be declared without assignment. Therefore, equivalent to the above example, when the function is "precompiled", it has already executed var xo; So the output in the above code is undefined.