When I was writing this article, Baidu searched for information and found an article by yuanyou, which was well written, but I didn't want to give up after I wrote it, so I took a lot of things in it! ~~
[Translation] JavaScript Scoping and Hoisting
I hope you will understand this.
I. Crime scene
Let's take a look at a simple piece of code:
Copy codeThe Code is as follows:
Var v = 'Hello world ';
Alert (v );
There is no doubt about this. "Hello World" is displayed ". OK. Let's continue.
We are looking at a piece of Code:
Copy codeThe Code is as follows:
Var v = 'Hello world ';
(Function (){
Alert (v );
})()
After running, we found that "Hello World" is displayed as expected ".
Okay, it's interesting. Next, let's look at the following code:
Copy codeThe Code is as follows:
Var v = 'Hello world ';
(Function (){
Alert (v );
Var v = 'I love you ';
})()
If this is an interview question, the interviewer asks you what the result is? How do you answer?
Let's take a look at the results first!
The result is undefined? Is it the same as what you thought above?
Okay, I won't be confused. In fact, there is a hidden trap-Hoisting in JavaScript );
II. In-depth analysis
Now I will explain what the promotion means? As the name suggests, it is to mention the following. In JS, the stuff (variable or function) defined in the back is upgraded to the previous definition.
Before explaining the improvement, let's take a look at the scope (scoping) Problem in js.
Scoping is one of the most confusing parts for beginners of JavaScript. In fact, it is not just a newbie. I have met or many experienced JavaScript programmers who cannot fully understand scoping. The reason why JavaScript scoping is so complex is that it looks very much like a member of the C-series language. See the following C program:
Copy codeThe Code is as follows:
# Include <stdio. h>
Int main (){
Int x = 1;
Printf ("% d,", x); // 1
If (1 ){
Int x = 2;
Printf ("% d,", x); // 2
}
Printf ("% d \ n", x); // 1
}
The output of this program is 1, 2, and 1. This is because the C system language has a block-level scope. When a block is entered, it is like an if statement, new variables will be declared in this block-level scope, and these variables will not affect the external scope. But JavaScript is not like this. Try the following code in Firebug:
Copy codeThe Code is as follows:
Var x = 1;
Console. log (x); // 1
If (true ){
Var x = 2;
Console. log (x); // 2
}
Console. log (x); // 2
In this Code, Firebug shows 1, 2. This is because JavaScript is a function-level scope ). This is completely different from the C language. Block, just like the if statement, does not create a new scope. Only functions can create a new scope.
For most programmers familiar with C, C ++, C #, or Java, this is unexpected and not to be seen. Fortunately, due to the flexibility of JavaScript Functions, we have a solution to this problem. If you must create a temporary scope in the function, do the following:
Copy codeThe Code is as follows:
Function foo (){
Var x = 1;
If (x ){
(Function (){
Var x = 2;
// Some other code
}());
}
// X is still 1.
}
This is indeed very flexible. It is used wherever a temporary scope needs to be created, not just a block. However, I strongly recommend that you take some time to understand JavaScript scoping. It is really powerful, and it is also one of my favorite language features. If you understand scoping well, it will be easier to understand hoisting.
2.1 variable increase
It is very easy to increase the variable to the top point of the function. I need to note that the variable escalation is only a declaration of the variable escalation and does not increase the assignment value.
For example:
We define three variables:
Copy codeThe Code is as follows:
(Function (){
Var a = 'one ';
Var B = 'two ';
Var c = 'three ';
})()
In fact, it is like this:
Copy codeThe Code is as follows:
(Function (){
Var a, B, c;
A = 'one ';
B = 'two ';
C = 'three ';
})()
At this time, the variable is upgraded.
Okay. Now let's go back to the first code. Why is an error reported? In fact, according to my analysis on the promotion of the original and js scope (Block-level scope) Based on the above variables, I learned that the above Code is actually changed to the following:
Copy codeThe Code is as follows:
Var v = 'Hello world ';
(Function (){
Var v;
Alert (v );
V = 'I love you ';
})()
Therefore, the system prompts "undefined ".
From this point, we also learned that when writing js code, we need to put the variables at the top of the block-level scope. For example, the example I mentioned above: var, b, c ;. Prevent exceptions.
2.2 function improvement
Function upgrade refers to the whole function mentioned above.
When writing js code, we have two methods to write, one is a function expression, and the other is a function declaration method. We need to note that only the function declaration form can be promoted.
Function declaration method upgraded [successful]
Copy codeThe Code is as follows:
Function myTest (){
Foo ();
Function foo (){
Alert ("I'm from foo ");
}
}
MyTest ();
Function expression method improvement [failed]
Copy codeThe Code is as follows:
Function myTest (){
Foo ();
Var foo = function foo (){
Alert ("I'm from foo ");
}
}
MyTest ();
The result is as follows:
An error is reported on the left. Did not lie to you.
You can basically understand it here .~
Haha ..
Thank you again, Beta Rabbit.
Author: Lanny ☆landong Cai
