Hoisting variables in JavaScript Hoisting_javascript tips-JS Tutorial-php.cn

Hoisting variables in JavaScript Hoisting_javascript tips

WBOY

Release： 2016-05-16 17:52:06

Original

1076 people have browsed it

Because when I was writing this article, I was searching for information on Baidu and found an article by a garden friend. It was very well written, but I didn’t want to give up after writing it, so I took a lot of things from it! ~~

[Translation] JavaScript Scoping and Hoisting

Hope for your understanding.

One. Crime scene

Let’s look at a very simple code first:

Copy the code The code is as follows:

 
var v='Hello World'; 
alert(v); 

There is no doubt about this, "Hello World" pops up. OK, let's continue.

We are looking at a piece of code:

Copy the code The code is as follows:

 
 var v='Hello World'; 
(function(){ 
alert(v); 
})() 

After running, we found that it is still the same as us As expected, "Hello World" pops up.

Okay, here comes the fun part. Then look at the following code:

Copy the code The code is as follows:

 
var v=' Hello World'; 
(function(){ 
alert(v); 
var v='I love you'; 
})() 

If this It is an interview question. The interviewer asks you what is the result? How do you answer?

Let’s see the results first!

The result is undefined? Is it the same as what you thought above?

Okay, I won’t try to be mysterious. In fact, there is a trap hidden here - variable hoisting (Hoisting) in JavaScript;

2. In-depth analysis

Now let me explain what promotion means? As the name suggests, it means to lift things below to the top. In JS, it is to promote the stuff (variables or functions) defined at the back to the definition at the front.

Before explaining the improvement, let’s first take a look at the scoping issue in js.

Scoping is one of the most confusing parts for JavaScript newbies. In fact, not just newbies, I've met many experienced JavaScript programmers who can't fully understand scoping. The reason JavaScript scoping is so complex is that it looks very much like a member of the C family of languages. Please look at the following C program:

Copy the code The code is as follows:

 
#include  
int main() { 
int x = 1; 
printf("%d, ", x); // 1 
if (1) { 
 int x = 2; 
printf("%d, ", x); // 2 
} 
printf("%dn", x); // 1 
} 

The output of this program is 1,2,1. This is because there is a block-level scope in C-series languages. When entering a block, just like an if statement, new variables will be declared in this block-level scope. These variables will not affect outer scope. But this is not the case with JavaScript. Try the following code in Firebug:

Copy the code The 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 displays 1, 2, 2. This is because JavaScript has function-level scope. This is completely different from C-based languages. Blocks, like if statements, do not create a new scope. Only functions create new scopes.

For most programmers familiar with C, C#, C# or Java, this is unexpected and unwelcome. Fortunately, because of the flexibility of JavaScript functions, we have a solution to this problem. If you must create a temporary scope in a function, do it like this:

Copy the code The code is as follows :

 
function foo() { 
var x = 1; 
if (x) { 
(function () { 
var x = 2; 
 // some other code 
}()); 
} 
// x is still 1. 
} 

This aspect is really flexible and can be used anywhere you need to create a temporary scope, not just within a block. However, I strongly recommend that you take the time to understand JavaScript scoping. It's really powerful, and it's one of my favorite features of the language. If you understand scoping well, it will be easier to understand hoisting.

2.1 Variable promotion
Variable promotion is very simple, it is to lift the variable to the top of the function. What we need to explain is that variable promotion only promotes the declaration of the variable, and does not promote the assignment.

For example:

We define three variables: