160630, five words take care of JavaScript scopes

JavaScript's scope has always been the front-end development of the more difficult to understand the knowledge point, for the scope of JavaScript mainly remember a few words, go all over the world are not afraid.

One, "no block-level scope in JavaScript"

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

public static void main () {

    if ( 1 = 1 ) {

        String Name = "Seven" ;

    }

    System . Out . println ( name );

}

//Error


public static void Main()

{

   if(1==1){

       string name = "seven";

   }

   Console.WriteLine(name);

}

// 报错

No block-level scopes in the JavaScript language

function Main(){

   if(1==1){

       var name = ‘seven‘;

   }

   console.log(name);

}

// 输出： seven

Add: The title adds double quotes because the LET keyword is introduced in JavaScript6 to specify that the variable belongs to a block-level scope.

second, JavaScript uses function scope

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

function Main(){

   var innerValue = ‘seven‘;

}

 

Main();

 

console.log(innerValue);

 

// 报错：Uncaught ReferenceError: innerValue is not defined

third, the scope chain of JavaScript

Because each function in JavaScript acts as a scope, the scope chain appears if function nesting functions occur.

xo = ‘alex‘;

 

function Func(){

   var xo = "seven";

   function inner(){

       var xo = ‘alvin‘;

       console.log(xo);

   }

   inner();

}

Func();

As shown above, there are three scopes of scope chain, if the scope chain, then the search for variables will appear in order, for the above example:

When executing Console.log (XO), its search order is based on the scope of the chain from the inside to the outside of the priority, if the inner layer does not step up to find, until the throw exception is not found.

Iv. The scope chain of JavaScript was created before execution

The scope of JavaScript is created before it is executed, and it is only necessary to follow the scope chain to find out when to execute it later.

Example one:

xo = ‘alex‘;

 

function Func(){

   var xo = "seven";

   function inner(){

 

       console.log(xo);

   }

   return inner;

}

 

var ret = Func();

ret();

// 输出结果： seven

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

Global scope, Func function scope, inner function scope

When executing "ret ();", because its surrogate refers to the inner function, the scope chain of this function has been defined before execution: global scope, Func function scope, and inner function scope, so, when executing "ret ();", The variable is searched based on the existing chain of scopes.

Example two:

xo = ‘alex‘;

 

function Func(){

   var xo = "eirc";

   function inner(){

 

       console.log(xo);

   }

   xo = ‘seven‘;

   return inner;

}

 

var ret = Func();

ret();

// 输出结果： seven

The code above is the same as example one, and it also emphasizes that the scope chain already exists before the function is called:

Global scope, Func function scope, inner function scope

At different time, the value of the XO variable in the FUNC scope has been reset from "Eric" to "seven" when executing "var ret = Func ();", so you can only find "seven" when you Execute "ret ()".

Example three:

xo = ‘alex‘;<br>

function Bar(){

   console.log(xo);

}

 

function Func(){

   var xo = "seven";

 

   return Bar;

}

 

var ret = Func();

ret();

// 输出结果： alex

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

global scope, bar function scope
Global scope, Func function scope

When performing "ret ();", the RET surrogate refers to the bar function, and the bar function's scope chain already exists: global scope--bar function scope, so execution will be based on the existing scope chain to find.

v. Declaration of Advance

In JavaScript, if you do not create a variable and go directly to it, the error is:

console.log(xxoo);

// 报错：Uncaught ReferenceError: xxoo is not defined

If you create a value without assigning a value in JavaScript, the value is undefined, such as:

var xxoo;

console.log(xxoo);

// 输出：undefined

Within the function, if you write this:

function Foo(){

   console.log(xo);

   var xo = ‘seven‘;

}

 

Foo();

// 输出：undefined

The above code, not error, but output undefined, the reason is: the JavaScript function before it is executed, the variables are all declared, without assigning value. Therefore, the equivalent of the above example, the function in "precompiled" when the Var XO has been executed, so the above code output is undefined.

160630, five words take care of JavaScript scopes