深入理解JavaScript中的变量提升与函数声明机制

核心现象：声明提前的本质

JavaScript引擎在处理代码前会进行一次预编译，主要涉及两个阶段：函数声明和变量声明都会被提前。但在具体表现上存在以下关键特征：

1. 位置优先：无论是变量还是函数，其声明都会移动到所在作用域的顶部执行。
2. 函数优于变量：在同作用域下，函数声明的优先级高于变量声明。如果两者同名，函数声明会覆盖变量声明（除非变量在提升后又被重新赋值）。
3. 局部遮蔽全局：如果在函数内部使用 var 定义了与外部同名的变量，该函数将不再向外层查找同名变量，而是使用内部定义的区域性变量。
4. 表达式不提升：仅包含函数名的函数声明会被提升，而将函数赋值给变量的表达式（如匿名函数）不会被整体提升。
5. 脚本块独立：不同 <script> 标签块被视为独立的代码单元，彼此间的声明互不影响。

第1步：验证函数声明与变量声明的优先级

为了厘清 function 声明与 var 声明的竞争关系，我们可以观察不同类型的声明顺序对结果的影响。

场景A：同时或先声明变量，再声明同名函数

当变量和函数同名时，无论谁先出现，最终内存中保留的都是函数对象，因为函数声明会将整个函数体提升并赋值给该标识符。

// 场景1：先声明变量a，后声明函数a
var a;
function a() {}
console.log(typeof a); // 输出: "function"

// 场景2：先声明函数a，后声明变量a
function a() {}
var a;
console.log(typeof a); // 输出: "function", 而非 undefined

场景B：声明的同时进行赋值操作

若变量在声明时立即被赋值为非函数值（如数字），则函数声明虽然提升，但随后的赋值语句会覆盖它。

function a() {}
var a = 1;
// “var a=1” 拆解为两步：
// 1. var a; (提升阶段，此时a指向上面的function)
// 2. a = 1; (执行阶段，覆盖前面的function)
console.log(typeof a); // 输出: "number"

第2步：分析函数内var声明对外部变量的遮蔽效应

这是初学者最容易踩坑的地方。只要在一个函数体内出现了 var value 声明，无论它在代码的哪一行，value 就会被视为该函数的局部变量，从而导致“暂时性死区”（此处表现为 undefined）。

真实执行逻辑演示：

var value = 'hello';
function show() {
  console.log(value); // 1. 弹出 undefined
  if (!value) {
    var value = 'function'; // 2. 定义局部变量
  }
  console.log(value); // 2. 弹出 function
}
show();

等价转换理解：

上述代码实际上等同于：

var value = 'hello';
function show() {
  var value; // 变量提升到了函数体的最顶端
  
  console.log(value); // 读取的是这个未初始化的局部变量
  if (!value) {
    value = 'function';
  }
  console.log(value);
}

排除干扰的对照实验：

• 如果 show 函数内部去掉了 var 关键字，它将向上查找直到找到全局的 value，从而两次均打印 'hello'。
• 如果函数内部完全未定义 value，同样遵循闭包规则获取外部全局变量。

第3步：理解匿名函数为何无法提升

只有纯粹的“函数声明式”（Function Declaration）会被全量提升，而“函数表达式”（Function Expression）仅仅提升了变量名本身，且该变量默认值为 undefined。

getName(); // 尝试调用
// 下方的 var getName = function... 只是 var getName; 被提升了，函数部分未被提升。
// 因此这里实际上是在尝试执行 getName(), 但此时 getName 为 undefined。
var getName = function () {
  alert('closure');
};

// 上方的纯函数声明会被提升
function getName() {
  alert('function');
}

转化后的执行顺序：

1. 提升 function getName()，赋予名称 getName。
2. 提升 var getName，赋初值 undefined。（由于前面已有同名的函数，此处变量声明不改变 getName 指向，但如果是赋值则可能覆盖）
3. 执行第一次 getName()：成功打印 "function"。
4. 执行 var getName = function(){...}：将函数表达式赋值给 getName，覆盖原有的函数引用。
5. 执行第二次 getName()：打印 "closure"。

第4步：排查多Script块的独立性

浏览器加载HTML时，每个 <script> 标签通常被视为一个独立的上下文。如果一个在前一个标签中试图调用了还未定义的标识符，即便后续脚本中有定义，也会报错。

<script>
  getName(); // 报错: TypeError: getName is not a function
  // 因为在此块结束时，变量才勉强被赋值（或者根本没被赋值），调用时它是未定义的。
  var getName = function () { alert('closule'); };
</script>
<script>
  function getName() { alert('function'); } // 这个函数定义不会回溯到上一个script块
</script>

在上例中，第一个块在 getName 赋值完成前就发起了调用，导致运行时错误。

总结

掌握JavaScript的提升规则能够有效避免调试噩梦。请记住：函数声明永远是最彻底的提升者；变量只提升名字；函数内部一旦有了var，就会产生独立的作用域环境。

以上就是浅谈JavaScript中变量和函数声明提升的详细内容，更多关于JavaScript基础知识、变量提升原理的资料请关注本站其它相关文章！