Analysis of the principles behind JavaScript var declaration of variables

Analysis of the principles behind JavaScript var declaration of variables_Basic knowledge

WBOY

Release： 2016-05-16 17:20:02

Original

1274 people have browsed it

As long as you have written some JS code, a simple var is enough. So what happens behind the JS compiler? Let’s start with the code step by step.

Copy code The code is as follows:

 
x = 1; 
alert(x); 
var y = function() { 
alert(x); 
var x = 2; 
alert(x); 
} 
y(); 

The above code will also output: 1, undefined, and 2 if you answer correctly. For me, the first reaction is: 1,1,2. Why does the second one output undefined? I clearly defined a global variable x above, why can't it be found?

That’s because: when the js compiler executes this y function, it will advance the declared variables in its body to the front for declaration. For example: var x=2; The compiler will first declare var x at the front of the body. In fact, the above code is equivalent to the following code:

Copy the code The code is as follows:

 
 x = 1; 
alert(x); 
var y = function() {
var x;//x has not been assigned a value at this time, so it is undefined. 
alert(x); 
x = 2; 
alert(x); 
} 
y(); 

So it is not difficult to understand x =undefined. But if you delete the code var x = 2;, it will not have a var declaration internally. It will always search up the scope, and x at this time is the global x.
Let’s look at a more interesting example.

Copy code The code is as follows:

 
var a = 1; 
function b() { 
a = 10; 
return; 
} 
b(); 
alert(a); 
/////////////// ///////////////////// 
var a = 1; 
function b() { 
a = 10; 
return; 
function a() {} 
} b(); alert(a); 

The example is very simple. The first example will output 10, and the second one will output 1. Why is this? Besides, I returned the second example. Logically, 10 should be output! At that time, it was because the JS compiler was causing trouble behind the scenes.
The difference between the two pieces of code is that the second example has an extra function a(){}; so there is nothing in this function body, and no calls are made to it.

In fact, the JS compiler will compile function a() {} into var a=function (){} behind the scenes. At this time, there is also a=10 inside the function; the a's outside are still 1; according to the JS scope. I will first look for the internal a, and if I can't find it, I will go up one level to find it.
The last alert(a) will display 1;