变量声明提前是什么意思

写JavaScript的时候，你有没有遇到过这种情况：明明在声明变量之前就用了它，结果程序没报错，反而返回了undefined？这背后其实就是“变量声明提前”在起作用。

简单来说，变量声明提前（Hoisting）是JavaScript的一种机制，它会把所有变量和函数的声明“提到”当前作用域的最前面。注意，只是声明被提前，赋值并不会跟着走。

console.log(name);
var name = "小明";

这段代码并不会报错，而是输出undefined。因为在JavaScript引擎眼里，它实际等价于：

var name;
console.log(name);
name = "小明";

也就是说，var name被自动提到了最上面，但赋值操作还在原地。所以打印时变量已经存在，但还没赋值，自然是undefined。

ES6引入的let和const也有声明提前，但行为更严格。它们同样会被提升，但在真正声明之前访问会直接报错。

console.log(age);
let age = 18;

这段代码会抛出ReferenceError，提示不能在声明前使用age。这种区域被称为“暂时性死区”（Temporal Dead Zone），算是对开发者的保护，避免误用未初始化的变量。

函数声明同样会被提升，而且整个函数体都会被带上去了。

sayHello();

function sayHello() {
    console.log("你好呀！");
}

这能正常运行，因为整个函数声明都被提前了。但如果是函数表达式，那就另当别论：

sayHi();

var sayHi = function() {
    console.log("嗨~");
}

这就报错了，因为var sayHi被提前，但赋值为函数的操作还在原地，调用时sayHi还是undefined，无法执行。

理解声明提前，能帮你避开一些看似奇怪的bug。尤其是在老项目里，到处都是var的时候，搞清这一点特别实用。

变量声明提前是什么意思 实用操作步骤与避坑指南