An in-depth analysis of scopes in JavaScript (recommended) _javascript techniques

The so-called scope, can be simply understood as a can read, write scope (region), some of the JS experience may say: "JS does not block-level scope", JS in addition to global role outside, only functions can create scope. One benefit of scopes is that you can isolate variables.

We use some examples to help us understand the scope of JS.

 alert (a);
 

If you don't know the scope of the students may say alert is 1 or error, but in fact is undefined;

Here, let's start by talking about some of the preparations that JS does before parsing the code line by row,

JS in-line reading code before, will do some "pre-resolution" work, will first find some "small things", of course, "JS parser" will not casually find some data, it will be based on var,function, parameters to find.

"JS parser" It is more "lazy", in the formal operation of the code will give the variable value of VAR declaration undefined, that is, var a = undefined; the whole function will be treated as a block of code, without the number of code inside the tube. Arguments wait until the example below will say.

When all the preparation is done, the "JS parser" begins to execute the code line by row, and now it's easy to see why it's undefined to analyze the first example.

Let's look at the example below.

 alert (a);
 var a = 1;
 alert (a);
 var a = 2;
 

Let's analyze this a little bit.

First "pre-resolution": The parser will look for Var

Read the second row a = undefined;

Still a = undefined when I read the four rows;

Formally execute code line by row:

First line alert:undefined

The second line a = 1;

The third line alert:1;

Line Five Alert:2

Then look at the example below

 alert (a); 
 var a = 1;
 alert (a); 
 function A () {alert (2);}
 alert (a); 
 var a = 3; 
 alert (a); 
 function A () {alert (4);}
 alert (a);

We still have a little analysis of this.

First "pre-resolution": The parser will look for Var function;

Read the second row a = undefined;

When I read the Forth line A = function A () {alert (2);}//All functions are the entire function block before the code is officially run; the variable has the same name, leaving only one variable, if the variable and the function duplicate, leave only the function.

When we read line sixth, a = function A () {alert (2);}

When we read line eighth, a = function A () {alert (4);}

Formally execute code line by row:

The first line alert:function a () {alert (4);}

The second line a = 1; An expression can modify a predefined value!

The third line alert:1;

The four-line function is not invoked, skipping over;

Line five alert:1;

Line A = 3;

Line Seventh Alert:3

The eighth line function is not invoked, skip over;

Line Nineth Alert:3

As shown in the figure:

Continue to see examples:

var a = 1;
function fn1 () {
 alert (a);//undefined   
 var a = 2;
}
FN1 ();
alert (a); 1

First "pre-resolution": The parser will find the var function

Read the first row a = undefined;

Read the second row fn1 = function fn1 () {alert (2); var a = 2;}

Formal line-by-row execution code: first line A = 1;

Line six function call, enter function scope in function scope is still the first resolution, and then execution

Pre-resolution in function: a = undefined;

implementation: alert:undefined;

A = 2; //At this point A is only a function scope of a, does not affect the global a

function completes, returns to the global scope;

Line seventh alert:1;

Go on:

var a = 1;
function fn1 () {
 alert (a);//1  
 a = 2;
}
FN1 ();
alert (a); 2

The only difference in the example above is that a does not have Var in the function, only the key points in the analysis.

In the function scope, the third row, alert (a), because there is no var a in the function, the parser goes to the upper-level scope of the function's scope to look for a (to determine whether the function is created under which scope, which scope is created, and which scope is subordinate) , the top level of the function is the global scope, in the global scope, a = 1, so at this point the third row is alert:1, then line Fourth, a = 2 is assigned, and still there is no a in the function scope, so we find a in the first-level scope, the global scope, and modify a in the global scope, So it would make a = 2 in the global scope, so the seventh line alert:2;

To understand this point, note that there is no difference between var.

Then come:

 var a = 1;
 function Fn1 (a) {
 alert (a);//undefined 
 a = 2;
 }
 FN1 ();
 alert (a); 1

This example and the previous difference is more than a parameter, the function of the parameter is equivalent to a local variable , that is, in the function of the pre-resolution will have var a = undefined, so the third row alert:undefined, line Fourth A = 2 is changed in the function scope of a, Does not affect a in the global, line seventh alert:1;

Then:

var a = 1;
function Fn1 (a) {
alert (a);//1
a = 2;
}
FN1 (a);
alert (a); 1

This example is a bit different from the previous one, when the sixth line function call passed an argument in, the sixth line function argument's a is global variable a = 1 of 1, when the function executes, the second line a = 1, so the third line alert:1, seventh line alert:1.

Notice the difference between these examples and don't confuse them.

One more:

var a = 1;
Function En () {
var a = 2;
fn ();
}
function fn () {
alert (a);//1
}
en ();

A in the FN is not declared, and the value in the scope where the function is created is "created" instead of the scope of the function called "call".

Scope and context Concepts in Ps:javascript

The scope and context (contexts) in JavaScript are unique to the language, thanks in part to the flexibility they bring. Each function has a different context and scope of variables. These concepts are backed by some powerful design patterns in JavaScript. However, this also brings a lot of confusion to the developers. The following is a complete revelation of the context and scope in JavaScript and how various design patterns use them.

Context vs Scope

The first problem to be clarified is that context and scope are different concepts. Over the years I've noticed that many developers confuse the two terms, incorrectly describing one as another. In all fairness, these terms have become very confusing.

Each function call has a scope and context associated with it. Fundamentally, scopes are based on functions (function-based) and contexts are object-based (object-based). In other words, the scope is related to the access of the variable every time the function is called, and each invocation is independent. The context is always the value of the keyword this, and is a reference to the object that invokes the current executable code.

The above is a small set of JavaScript to introduce the scope (recommended), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!