Continue to the previous lecture < JavaScript Scoping & Hoisting >
Javascript is a language that is easily misunderstood, but its power is undeniable. Personally, in order to deeply understand the Javascript language, we must first truly understand its basic concepts (such as Scope, Closure, Hoisting, etc.). Today, I would like to explain Javascript Hoisting (generally translated as variable promotion in China) through my own understanding:
Before explaining Javascript Hoisting, let's take a look at a few pieces of code:
//代码段1--------------------------
var myvar = '变量值';
console.log(myvar); // 变量值
//代码段2--------------------------
var myvar = '变量值';
(function() {
console.log(myvar); //变量值
})();
//代码段3----------------------------
var myvar = '变量值';
(function() {
console.log(myvar); // undefined
var myvar = '内部变量值';
})();The code segment 1 will print out the variable value on the console, which is easy to understand; the code segment 2 will also print the variable value on the console. The Javascript compiler first checks whether the variable myvar is declared in the internal scope (Scope) of the anonymous function, and finds that there is no , continue to the upper-level scope (Scope) to check whether myvar is declared, and find that it exists, that is, print out the myvar value of the scope. But code segment 3 is just a fine-tuning of code segment 2, and the result is undefined! ! !
Before understanding code snippet 3, it is necessary to understand the concept of Javascript Hoisting. Javascript Hoisting: In javascript, every variable declaration is hoisted to the top of its declaration context . My understanding is that in the Javascript language, variable declarations (not including variable initialization) will be hoisted (top) to the context where the declaration is located, That is, within a variable's scope, no matter where the variable is declared, it will be hoisted to the top of the scope, but the order of variable initialization is unchanged.
The output structure of the code on the left and right of the following figure is the same. When the code segment on the left is executed by JS, the actual execution order is shown in the code on the right (the JS compiler will enhance the variable declaration ).
After understanding the concept of promotion, return to the understanding of the code segment 3 at the beginning. Code segment 3 and the code after being hosted are shown in the following figure:
The output structure of both is undefined! It can be understood that the internal variable myvar is declared and assigned in the last line of the anonymous function, but the JS interpreter will promote the variable declaration (excluding assignment) to the first of the anonymous function (Hositing) In one line (top), since the variable myvar is only declared, when the console.log(myvar) statement is executed, the value of myvar is not assigned, so the JS output is undefined.
If the variable declaration is not Hositing to the top, an error should be reported. As shown below:
Here is a test question to see if you understand the concept of hosting
//测试代码----------------------
var myvar = '变量值';
(function() {
console.log(myvar); // ?
myvar = '内部变量值';
})();What value should this snippet output?
