A brief analysis of the scope in javascript (recommended)

The so-called scope can be simply understood as a scope (area) that can be read and written. Some students with experience in js may say: "js has no block-level scope". In addition to global scope, only functions can create scopes. One advantage of scope is that it can isolate variables.

We use some examples to help us understand the scope in js.

 alert(a); var a = 1;

If students who don’t know the scope at all may say that alert is 1 or report an error; but it is actually undefined;

Speaking of this, let’s first talk about some preparations made before js parsing the code line by line.

Before reading the code line by line, js will do some "pre-parsement" work and will find some "small things" in advance. Of course, "js parser" will not find some data casually, it will find it according to var, function, and parameters.

"js parser" is relatively "lazy". Before officially running the code, it will assign the variable declared by var to undefined, that is, var a = undefined; it will regard the entire function as a code block, regardless of how much code there is. The parameters will be said in the examples later.

After all the preparations are done, the "JS parser" begins to execute the code line by line. Now, let's analyze the example we started and it's easy to understand why it is undefined.

Let's take a look at the following example

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

Let's analyze this a little bit

First "preparse": The parser will look for var

When reading the second line a = undefined;

When reading the fourth line, still a = undefined;

Formal line-by-line execution of code:

First line alert:undefined

The second line a = 1;

Line 3 alert:1;

The fifth element alert:2

Let's 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);

Let's analyze this little bit by bit

First, "pre-parse": The parser will look for var function;

When reading the second line a = undefined;

When reading the fourth line a = function a (){ alert(2);} //All functions are the entire function block before officially running the code; when a variable encounters a duplicate name, only one variable is left. If the variable and the function are duplicate name, only the function is left.

When reading the sixth line, a = function a (){ alert(2);}

When reading the eighth line, a = function a (){ alert(4);}

Formal line-by-line execution of code:

First line alert: function a (){ alert(4);}

The second line a = 1; //The expression can modify the pre-parsed value!

Line 3 alert:1;

The fourth line of function is not called, skip;

The fifth element alert:1;

Line six a = 3;

Line 7 alert:3

The eighth line function is not called, skip;

Line 9 alert:3

As shown in the figure:

Continue to see the example:

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

First "preparse": The parser will look for var function

When reading the first line a = undefined;

When reading the second line fn1 = function fn1 (){alert(2);var a = 2;}

Formal line-by-line execution of code: first line a = 1;

The sixth line function call, enter the function scope and still pre-parse in the function scope, and then execute it line by line.

Preparse within the function: a = undefined;

Execution: alert:undefined;

a = 2; //A at this time is only a in the function scope and will not affect a in the global

The function is executed and returns to the global scope;

Line seven alert:1;

continue:

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

The only difference between the above example is that a in the function does not have var, and only analyzes the key points.

In the third line alert(a), in the function scope, since there is no var a in the function, the "parser" will look for a to the upper-level scope of the scope of the function (the determination of the upper-level and lower-level relationship depends on which scope the function was created, and under which scope it is created, which scope it is the lower-level). At this time, the upper level of the function is the global scope. In the global scope, a = 1, so at this time, the third line alert:1, and then the fourth line, a = 2 assigns the value, still there is no a in the function scope, so find a in the upper-level scope, that is, the global scope, and modify a in the global scope, so a = 2 will make a in the global scope = 2, so the seventh line alert:2;

This point must be understood clearly and pay attention to the difference between var or not.

Next:

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

The difference between this example and the previous one is that there is an additional parameter. The function of the parameter is equivalent to a local variable, that is, there will be var a = undefined in pre-parsing in the function. Therefore, the third line alert: undefined, and the fourth line a = 2 changes the a in the function scope, which does not affect a in the global context. The seventh line alert:1;

then:

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

This example is somewhat different from the previous one. When the function is called in the sixth line, a parameter is passed in. The actual parameter a of the sixth line function is 1 of the global variable a = 1. When the function is executed, the second line a = 1, so the third line alert:1, and the seventh line alert:1.

Pay attention to the difference between these examples and don't confuse them.

Another one:

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

A in fn is not declared, and you need to take the value in the scope where the function is created - it is "created", not "call" the scope of the function.

PS: Scope and context concepts in JavaScript

Scopes and contexts in javascript are unique to this language, thanks in part to the flexibility they bring. Each function has a different variable context and scope. These concepts are backed by some powerful design patterns in JavaScript. However, this also brings great confusion to developers. The following fully reveals the differences in context and scope in javascript and how various design patterns use them.

Context vs scope

The first question to be clarified is that context and scope are different concepts. Over the years I have noticed that many developers often confuse these two terms, wrongly describing one as the other. To be fair, these terms have become very confusing.

Each function call has a scope and context associated with it. Fundamentally, scope is function-based and context is object-based. In other words, scope is related to accessing variables every time the function is called, and each call is independent. The context is always the value of the keyword this, a reference to the object that calls the current executable code.

The above is the scope of JavaScript introduced to you by the editor (recommended). I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!