深入理解JavaScript的变量提升机制

JavaScript中的变量提升(Hoisting)是一个重要但又常常令人困惑的概念。

什么是变量提升？

变量提升是JavaScript引擎在代码执行前将变量和函数声明"提升"到它们所在作用域顶部的行为。这意味着在代码中看似在声明之前使用变量或函数不会报错，但行为可能与预期不同。

javascript 复制代码

console.log(a); // 输出：undefined
var a = 5;

上面这段代码不会报错，因为变量a的声明被提升了，但赋值没有被提升。

使用var声明的变量会被提升：

javascript 复制代码

console.log(b); // 输出：undefined
var b = 10;

这相当于：

javascript 复制代码

var b;
console.log(b); // 输出：undefined
b = 10;

函数声明也会被提升，但与变量不同，整个函数体都会被提升：

javascript 复制代码

sayHello(); // 输出："Hello!"

function sayHello() {
  console.log("Hello!");
}

这相当于：

javascript 复制代码

function sayHello() {
  console.log("Hello!");
}
sayHello(); // 输出："Hello!"

ES6引入的let和const也有提升，但表现与var不同：

javascript 复制代码

console.log(c); // ReferenceError: Cannot access 'c' before initialization
let c = 15;

这种现象被称为"暂时性死区"(Temporal Dead Zone, TDZ)。变量在声明前不能被访问，尽管它在技术上被提升了。

函数表达式不会被提升：

javascript 复制代码

greet(); // TypeError: greet is not a function

var greet = function() {
  console.log("Good morning!");
};

当变量和函数同名时，函数声明优先于变量声明：

javascript 复制代码

console.log(typeof myFunc); // 输出："function"

var myFunc = "I'm a string";

function myFunc() {
  console.log("I'm a function");
}

javascript 复制代码

var x = 10;

function test() {
  console.log(x); // 输出：undefined
  var x = 20;
}

test();

javascript 复制代码

var a = 1;

function a() {
  return 2;
}

console.log(a); // 输出：1