The "ascension" phenomenon of the JavaScript function scope

In JavaScript, the variable is defined by the var operator + variable name. But without the Var operator, it is also possible to assign values directly.
For example: message = "Hello JavaScript!" defines a global variable message and assigns a value of "Hello javascript! ”
--The third edition of the Advanced JavaScript program

As in the past, a group of people in the so-called technical Exchange Group in the fight against each other. Suddenly old Wang inexplicable serious up, in the group sent a JavaScript topic, let everyone guess the answer to this question.

var foo = 1;    function bar() { foo = 10; return; function foo() {} } bar(); console.log(foo); //求控制台输出多少？

After seeing this to the topic, he immediately answered "10" without hesitation.
First, the first step is to define a global variable foo = 1 , and then the function executes and defines a global variable foo = 10 that overrides the previous global variable, and after return, the function ends immediately and is function foo {} too late to be defined. therefore console output 10;
According to the "senior" above to see the knowledge point deduction, no problem, absolutely perfect!

"Give yourself 32 likes!" 】

But after the answer is sent out. Instinct to feel that this problem can not be so simple, not serious group suddenly discuss serious code, there will be a big pit waiting for people to jump. A bad feeling came to my heart and felt like I was going to be beaten again.

Quickly open the editor to test this code, shaking the hands of the F12. Saw the console, a dazzling 1 impressively broke into the eye. Pop it!! This face is beaten again, good ache!!

"Why is my face always beating me!! 】

Sure enough, the old Wang immediately in the group to veto my answer, PA hit the old face.
No way! The face hit the place to get back, the old Wang will definitely reveal the answer and announce the problem-solving ideas. We have to test the answers and the reasons before he publishes them.

After a simple test, it was found that the back of the Foo, the function is promoted to the top. So foo = 10 the Foo in the back is actually a local variable. Therefore console.log(foo) , the local variable in the bar function is not taken back foo = 10 , so we can only get the global variable foo = 1; So the console output is 1.

Another form of the code above:

var foo = 1;    function bar() { function foo(){} foo = 10; return; // function foo() {} 相当于这行代码提升到最顶部了 } bar(); console.log(foo); 

The old king who was robbed of the Thunder Resolute defy Qi! Said I guess the duzi wishful thinking, I guess at random.
OK, here's the beginning of the explanation why I said the function was function foo(){} lifted to the top. Do not change the old king's code, let us just add two console.log test the corresponding output results.

var foo =s; Console.log ("global variable: foo =" + Window.foo) function Bar () { console.log ("foo =" At this time bar function + fo o) foo = 10; Console.log ("The variable in the bar function is" + foo); Console.log ("global variable Foo or:" +Window.foo); return; function foo () {}} bar (); Console.log (foo);                 

Browser output Results

Here I can confirm that my conjecture is correct, function foo(){} directly promoted to the top of the bar () function, and then foo = 10 not redefine the global variable, where foo is a local variable role defined. Therefore, the global variable is not overwritten, and because the function is not directly outside the bar function, the local variable foo, so continue to look up to the global variable foo = 1. thereby outputting 1.

It is estimated that the Lenovo-rich partners will certainly raise their hands and say, then the function has the phenomenon of ascension. Are there any improvements to the variables? Not bad! Not bad!! This little friend Lenovo is very correct, learn to learn more extrapolate.

"Reward a Little Red flower"

Variable Promotion

var foo = 1;    function bar() { foo = 10; return; var foo //几乎是相同的代码，只是把 function foo 变成了 var foo。变量也是能够提升了的！ } bar(); console.log(foo); //还是输出1.

Thinking:

Similarly, since variables can be lifted, function declarations can be promoted. So who's higher?

function test(){        console.log(dabang); function dabang(){}; var dabang; } test(); function test1(){ console.log(dabang); var dabang; function dabang(){}; } test1();

Console output Results:

"The function of the stick declaration must rise high!!!" 】

Summary:

1, in JavaScript, function scope. Both variable and declarative functions can be promoted.
2, the same promotion of the case, the declaration function to promote higher!

The above is my humble understanding of the "ascension phenomenon" in the scope of JavaScript function, welcome all the big boys to guide the study.
In fact, the compilation of JS is to declare the scope first, the scope of the use of variable unity before the code to allocate memory before execution, that is, the first declaration, function A () {} This directly declares a function, Var a=function () {} The expression is to declare the value of a variable to undefined before executing it, and to assign the function to it in this sentence.

The "ascension" phenomenon of the JavaScript function scope