Hoisting is a term you will not find used in any normative規範的，標準的 specification prose散文 prior to ECMAScript® 2015 Language Specification. Hoisting was thought up as a general way of thinking about how execution contexts (specifically the creation and execution phases) work in JavaScript. However, the concept can be a little confusing at first.
Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.
Learn more
Technical example
One of the advantages of JavaScript putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code. For example:
function catName(name) { console.log("My cat's name is " + name); } catName("Tiger"); /* The result of the code above is: "My cat's name is Tiger" */
The above code snippet is how you would expect to write the code for it to work.
Now, let's see what happens when we call the function before we write it:
catName("Chloe");
function catName(name) {
console.log("My cat's name is " + name);
}
/*
The result of the code above is: "My cat's name is Chloe"
*/
Even though we call the function in our code first, before the function is written, the code still works. This is because of how context execution works in JavaScript.
Hoisting works well with other data types and variables. The variables can be initialized and used before they are declared.
Only declarations are hoisted
JavaScript only hoists declarations, not initializations.
If a variable is declared and initialized after using it, the value will be undefined. For example:
只有變量的聲明被提升了，初始化是不會被提升的
console.log(num); // Returns undefined, as only declaration was hoisted, no initialization has happened at this stage var num; // Declaration num = 6; // Initialization
The example below only has initialization. 只有初始化，沒有var聲明
No hoisting happens so trying to read the variable results in ReferenceError exception.
console.log(num); // Throws ReferenceError exception num = 6; // Initialization
Initializations using let and const are also not hoisted.
// Example with let: a = 1; // initialization. let a; // Throws ReferenceError: Cannot access 'a' before initialization // Example with const: a = 1; // initialization. const a; // Throws SyntaxError: Missing initializer in const declaration
Below are more examples demonstrating hoisting.
// Example 1 // Only y is hoisted x = 1; // Initialize x, and if not already declared, declare it - but no hoisting as there is no var in the statement. console.log(x + " " + y); // '1 undefined' // This prints value of y as undefined as JavaScript only hoists declarations var y = 2; // Declare and Initialize y // Example 2 // No hoisting, but since initialization also causes declaration (if not already declared), variables are available. a = 'Cran'; // Initialize a b = 'berry'; // Initialize b console.log(a + "" + b); // 'Cranberry'
Technical reference
- var statement — MDN
- function statement — MDN