JavaScript 中 var 声明在函数内的变量提升与作用域陷阱详解-js教程-PHP中文网

JavaScript 中 var 声明在函数内的变量提升与作用域陷阱详解

本文深入解析 var 在函数作用域中因变量提升（hoisting）和声明遮蔽（shadowing）导致读取为 undefined 的根本原因，并对比 let 的不同行为，帮助开发者避免常见陷阱。

本文深入解析 `var` 在函数作用域中因变量提升（hoisting）和声明遮蔽（shadowing）导致读取为 `undefined` 的根本原因，并对比 `let` 的不同行为，帮助开发者避免常见陷阱。

在 JavaScript 中，var 声明具有函数作用域和变量提升特性——这意味着所有 var 声明会被“提升”到其所在函数的顶部，但只有声明被提升，赋值不会。当函数内用 var 重新声明一个与外层同名的变量时，就会发生变量遮蔽（variable shadowing）：内部变量覆盖外部变量的访问路径，而其初始值为 undefined，直到执行到实际赋值语句。

以下代码直观体现了这一机制：

var numOfBeers = 5;

function getMoreBeers() {
  console.log('I have this many beers: ' + numOfBeers); // 输出: "I have this many beers: undefined"

  var numOfBeers = 25; // 声明被提升，赋值未提升
  return numOfBeers;
}

console.log('I now have this many beers: ' + getMoreBeers());

等价于 JavaScript 引擎实际执行的逻辑（即“提升后”的形式）：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

var numOfBeers = 5;

function getMoreBeers() {
  var numOfBeers; // 提升：声明存在，值为 undefined
  console.log('I have this many beers: ' + numOfBeers); // 此时访问的是局部 numOfBeers → undefined

  numOfBeers = 25; // 赋值发生在后
  return numOfBeers;
}

⚠️ 注意：这种行为仅适用于 var。若将 var 替换为 let 或 const，结果截然不同：

let numOfBeers = 25; 在函数内声明会触发 TDZ（暂时性死区），在声明前访问会抛出 ReferenceError；
更关键的是，若外层已存在 let numOfBeers，函数内再次 let numOfBeers 会导致 SyntaxError: Identifier 'numOfBeers' has already been declared —— 因为 let/const 不允许在同一作用域重复声明，且不存在跨作用域遮蔽式重声明（严格语法限制）。

✅ 正确实践建议：

优先使用 let 和 const：避免变量提升带来的隐蔽问题，增强代码可预测性；
若必须用 var，请避免在函数内重复声明外层同名变量；
如需修改外层变量，直接赋值即可（无需重新声明）：

var numOfBeers = 5;

function getMoreBeers() {
  console.log('I have this many beers: ' + numOfBeers); // ✅ 输出 5（访问外层变量）

  numOfBeers = 25; // 直接修改外层变量
  return numOfBeers;
}

console.log('I now have this many beers: ' + getMoreBeers()); 
// → "I have this many beers: 5"
// → "I now have this many beers: 25"

总结：var 的函数级提升与遮蔽是历史遗留特性，易引发 undefined 误读；理解其提升本质，并转向块级作用域的 let/const，是编写健壮、可维护 JavaScript 的关键一步。