Easy 5 words to solve JavaScript scope _javascript tips

Every byte of a JavaScript program is executed in this or that runtime context (execution contexts). You can think of these contexts as the neighbors of your code, and they can give each line of code a point of view: Where to come from, friends and neighbors. Yes, this is important information because JavaScript society has very strict rules about who can associate with whom. The running context is the gated community rather than the open door.

We can usually refer to these social boundaries as scopes and have sufficient importance to legislate in every neighbour's Charter, and this Charter is the scope chain (scope chain) of the context. Within a particular neighborhood, code can only access variables within its scope chain. Compared with the variables that go beyond its neighborhood, code prefers to deal with local (locally, local).

Any programming language has the concept of scope, in short, the scope is the accessibility of variables and functions, that is, the scope controls the visibility and life cycle of variables and functions. The scope of JavaScript has always been a more difficult to understand in the front-end development of knowledge points, the scope of JavaScript mainly remember a few words, easy to handle JavaScript scope

One, "no block-level scope in JavaScript"

There is a block-level scope in Java or C #, that 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);
Error

No block-level scopes in the JavaScript language

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

Second, JavaScript uses function scope

In JavaScript, each function acts as a scope and cannot be externally accessible to variables in the inner scope.

function Main () {
 var innervalue = ' seven ';
}
 
Main ();
 
Console.log (innervalue);
 
Error: Uncaught referenceerror:innervalue is not defined

Iii. 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 ();

If the above code shows three scope chain of scopes, if the scope chain, then the search for variables will appear in order, for the above example:

When the Console.log (XO) is executed, it looks for 根据作用域链从内到外 the order of precedence to look for, if the inner layer is not gradually looking up until the throw exception is not found.

The scope chain of JavaScript was created before execution

The scope of JavaScript is created before it is executed, and it needs to be looked up by the scope chain when it is executed later.

Example one:

XO = ' Alex ';
 
function Func () {
 var xo = "Seven";
 function inner () {
 
 console.log (XO);
 }
 return inner;
}
 
var ret = Func ();
RET ();
Output Result: Seven

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

Global scope-> func function scope-> inner function scope
When the "ret ()" is executed, because its surrogate is the inner function, the scope chain of this function is defined before execution: global scope-> func function scope-> inner function scope, so when executing "ret ();" Will look for variables based on the existing scope chain.

Example two:

XO = ' Alex ';
 
function Func () {
 var xo = "Eirc";
 function inner () {
 
 console.log (XO);
 }
 XO = ' seven ';
 return inner;
}
 
var ret = Func ();
RET ();
Output Result: Seven

The preceding code is the same as the example one, emphasizing that the scope chain already exists before the function is invoked:

Global scope-> func function scope-> inner function scope
When executing "var ret = Func ()", the value of the XO variable in the FUNC scope has been reset to "seven" by "Eric", so you can only find "seven" when you perform the "ret ()".

Example three:

XO = ' Alex ';
function Bar () {
 console.log (XO);
}
 
function Func () {
 var xo = "Seven";
 
 return Bar;
}
 
var ret = Func ();
RET ();
Output Result: Alex

The preceding code has created two chain of scopes before the function is executed:

Global scope-> Bar function scope
Global scope-> func function scope
When the "ret ()" is executed, a RET refers to the bar function, and the bar function's scope chain already exists: the global scope-> bar function scope, so the execution is looked up according to the existing scope chain.

V. Declaration of Advance

In JavaScript, if you do not create a variable and use it directly, an error occurs:

Console.log (Xxoo);
Error: Uncaught Referenceerror:xxoo is not defined

In JavaScript, if you create a value without assigning a value, the value is undefined, such as:

var Xxoo;
Console.log (Xxoo);
Output: undefined
within the function if it writes: function
Foo () {
 console.log (XO);
 var xo = ' seven ';
}
 
Foo ();
Output: undefined

The above code, which does not give an error, is output undefined, because the JavaScript function will declare all of its variables without assigning value until it is executed. So, as in the example above, the function has executed the Var xo when "precompiled", so the output from the above code is undefined.

JS is a very interesting language, because it is a lot of features for the HTML in the operation of the DOM, it appears arbitrary and slightly less rigorous, but with the front end of the growing prosperity and node of the rise, JS is no longer "toy language" or the jquery era of "CSS expansion", This article refers to the novice or from the traditional web development over the JS developers, are easily confused or misunderstood, I hope this article can help.