On the scopes in JavaScript

Source: Internet
Author: User

The so-called scope, can be simply understood as a can read, write the scope (region), some JS experience students may say: "JS no block-level scope", JS in addition to the global scope, only the function can create scope. One of the benefits of scoping is that you can isolate variables.

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

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

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

In this case, let's start by talking about some of the preparatory work that JS does before parsing the code.

JS in line to read the code before, will do some "pre-parsing" 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", before the official run of the code will give VAR declared variable value of undefined, that is, var a = undefined; the whole function is considered a block of code, not how much code inside. The arguments wait for a later example to say.

When all the preparation is done, the "JS parser" begins to line up the code, and now it's easy to see why it is undefined to analyze the beginning of this example.

Let's look at the example below.

1 alert (a); 2 var a = 1; 3 alert (a); 4 var a = 2; 5 alert (a);

Let's analyze this a little bit.

First "pre-parse": The parser will find var

Read second row a = undefined;

Still a = undefined when I read the four lines;

To formally execute the code step by line:

First line alert:undefined

The second row a = 1;

The third line alert:1;

Line Five Alert:2

Then look at the example below

1 alert (a); 2 varA = 1;3 alert (a); 4 functionA () {Alert (2); }5 alert (a); 6 varA = 3; 7 alert (a); 8 functionA () {alert (4); }9alert (a);

We're still going to do a little analysis.

First "pre-parsing": The parser will find var function;

Read second row a = undefined;

When you read line four, a = function A () {alert (2);}// All functions are the entire function block before the code is formally run; the variable encounters a duplicate name, leaving only one variable, and if the variable and function have the same name, only the function is left.

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

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

To formally execute the code step by line:

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

The second row a = 1; An expression can modify a pre-parsed value!

The third line alert:1;

The four-line function is not called, skipped;

The alert:1 of the five lines;

Line six A = 3;

Line Seventh Alert:3

The eighth line function is not called, skipped;

Line Nineth Alert:3

 

Continue to see examples:

1 var a = 1; 2 function fn1 () {3    alert (a);      Undefined                   4     var a = 2; 5 }6fn1 (); 7 alert (a);   1

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

Read the first row a = undefined;

When the second row is read fn1 = function fn1 () {alert (2); var a = 2;}

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

Line six function calls, enter the function scope in the scope of the function is still pre-parsing, and then row by line execution

Pre-parsing in function: a = undefined;

Execution: alert:undefined;

A = 2; A at this point is only a in the scope of the function and does not affect a in the global

The function executes and returns to the global scope;

Line seventh alert:1;

Go on:

1 var a = 1; 2 function fn1 () {3    alert (a);       1             4     a = 2; 5 }6fn1 (); 7 alert (a);    2

The only difference from the example above is that a in the function has no Var and only analyzes the key points.

In the function scope, the third line, alert (a), since there is no var a in the function, the parser goes to the upper scope of the function to look for a (the determination of the scope of the hierarchy is to see where the function is created under which scope, which is created under which scope is subordinate ), at which point the upper level of the function is the global scope, in the global scope, a = 1, so at this point the third row alert:1, then the fourth row, a = 2 assignment, is still the function scope does not have a, so in the upper scope, that is, the global scope to find a, modify the global scope of A, So a = 2 is made in the global scope, so the seventh row is alert:2;

This should be understood clearly and be aware of the difference between Var and no.

Then come:

1 var a = 1; 2 function Fn1 (a) {3    alert (a);     Undefined                4     a = 2; 5 }6fn1 (); 7 alert (a);   1

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

Then:

1 var a = 1; 2 function Fn1 (a) {3     alert (a);                        // 1 4     A = 2; 5 }6fn1 (a); 7 alert (a);           1

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

Note the differences between these examples and don't confuse them.

One more:

 1  var  a = 1  2  function   En () { 3   var  a = 2;  4   FN ();  5   6  function   FN () { 7   alert (a); 1  8   9  en (); 

A in FN does not declare that the value in the scope where the function was created-is "created" rather than "called" in the scope of the function.

If there is any mistake, please correct me.

On the scopes in JavaScript

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.