Vernacular JS scope, scope, action chain detailed

Objective

Through this article, you probably understand the scope, the scope chain is what, after all, this is also the basic concept of JS.

I. Scope (SCOPE)

What is a scope, you can understand the scope of the variable that you declare, I declare a variable in a range, and this variable can be used within that range, then I can say that this scope is scoped to that variable.

Scopes are generally divided into local scopes and global scopes.

How to understand, first of all to say local scope. Suppose I declare a variable a in the scope of a, variable a can only be used within the range A, and not in the range A, then the variable A is a local variable, and the range A is the local scope.

1 function A () {2     var 1 ; 3     Console.log (a); 4 }5 A (); // 1 6 Console.log (a); // error, a not defined

Suppose we declare variable B in the global scope (not in any function body), and you can use it in any local scope, then we generally call B a global variable, and the scope of B is the global scope, and B is available everywhere without any restrictions.

1 var 1 ; 2 function B () {3    Console.log (b); 4 }5 B (); // 1 6 Console.log (b); // 1

As we said above, in the scope of a VAR declaration variable a,a as a local variable, when we do not use VAR declaration, even within a local scope, it is still a global variable.

1 function A () {2     1 ; 3     Console.log (a); 4 }5 A (); // 1 6 Console.log (a); // 1

As long as a variable declaration is not preceded by any declaration, then this variable is a global variable, which we seldom do, because it is difficult to ensure that post-maintenance does not result in variable declaration names, which is likely to cause global pollution.

Incidentally, in the function body, the local variable takes precedence over the global variable with the same name (the function parameter is also a local variable), as follows:

1 var 1 ; 2 function A (a) {3    Console.log (a); 4 }5 A (ten); // Ten

Of course, the local variables of the function are overwritten by the existing local variables:

1 function A (a) {2     var 1 ; 3     Console.log (a); 4 }5 A (ten); // 1

One thing to note is that we often encounter the scope of nesting in the actual development, in fact, as long as it is clear that the scope of variables can be used, whether the relationship will be overwritten, it will be very clear.

1 varA =1;2 function A () {3     varA =2;4 function B () {5         varA =3;6 Console.log (a);7     }8     returnB ();9 }TenA ();//3

Two. Variable Promotion

To be exact, the new assert let in ES6 has resolved the imprecise question of variable promotion, which I mentioned briefly here, before a blog post was specifically about variable promotion.

What is a variable promotion, that is, a variable in the corresponding scope is everywhere, meaning, even if used before, declare after, it can still use, no error.

Specifically want to see this article--declaration of advance, variable declaration ahead of time, function declaration in advance, affirm the order of advance

Three. Scope chain

We say that there are nested problems in the scope, so we can understand the scope chain, when we need the value of a variable, we first go to its nearest scope to find, if not set, look for its superior scope, and so on, until the global, if all is undefined, then throw an error, as follows.

1 var 1 2 function A () {3    function B () {4        Console.log (a); 5     }6     return  B (); 7 }8 A ();//1

It can be said that the search process of the chain of action is from the inside out process, not from the outside, can stand in the local scope to invoke the global scope of the properties, in turn, is not allowed.

OK, the concept is probably said here, well, or a few questions to consolidate.

Topic One

 1  var  a= 10   2  function A () { 3   alert (a);             4  };  5  function B () { 6  var  a=20  ;  7   A ();  8  }  9  B (); // 10  

Why output 10 instead of 20? The scope chain of variables in JS is related to the environment when it is defined, regardless of the execution time.

After we call function B, function B also calls function A, function A does not define a variable a but to use a, function A is only called by B and does not pass parameters, so function A does not have permission to use the local variable a of function B, and we have a global variable A above, so here output 10.

 1  var  a= 10   2  function A (a) { 3   alert (a);             4  };  5  function B () { 6  var  a=20  ;  7   A (a);  8  }  9  B (); // 20  

This allows you to output 20, and function B calls in the parameter a while function B provides the variable a, which outputs 20.

Topic Two

1 function aaa () {2    a=3}4 alert (a);//Error

Think of a problem, here will be a slight modification of the topic. We said earlier, in the local scope, without VAR declaration of a variable, it is also a global variable, everywhere, then why the external output it will error?

function is a very strange thing, it can be understood that a function when not called, it is actually invisible, it is not visible in all the variables, even if a is indeed a global variable yes, it is still visible on the function is limited, the call is visible.

1 function A () {2    a=3}4A ()5 alert (a); // Ten

What if we change to this?

1 alert (a); // Error 2 function A () {3    a=4}5A (); 6 alert (a)

Not that the function call after the variable A is used casually, how did the above error? Because the code has its own order of execution, to know the first alert a, when the function has not been called, so the error, a bit around, try to understand.

Just tidy up so much, I hope it helps.

This article makes reference to the blog

Summary on the question of JS scope face

The pen test of JS Scope and prototype

Vernacular JS scope, scope, action chain detailed