函数提升与变量提升谁先谁后实验

JavaScript中的函数声明与变量声明在提升机制上存在关键差异：函数声明会被完整提升（包括函数体），优先级高于var变量声明，能覆盖同名变量；而函数表达式仅变量名被提升为undefined，函数本身不提升，调用会报错；let/const则根本不存在提升，直接进入暂时性死区（TDZ），访问即抛错。无论书写顺序如何，函数声明始终“胜出”，但混用声明方式极易引发隐蔽逻辑错误——理解这一机制不仅能解释看似反直觉的运行结果，更是写出可预测、健壮代码的底层基石。

函数声明会被完整提升到作用域顶部，优先级高于变量声明提升；但函数表达式不会被提升，其变量名仍会提升为 undefined。

函数声明 vs 变量声明：提升顺序明确

当函数声明和同名变量声明共存时，函数声明完全胜出。JavaScript 引擎在创建阶段先处理所有函数声明（包括函数体），再处理 var 变量声明（仅声明，赋值留在执行阶段）。

• function foo() { return 'I am function'; } 和 var foo = 'I am string'; 同时存在 → 调用 foo() 成功，返回字符串；访问 foo 值为函数对象（尚未执行赋值）
• 若把函数声明写在变量声明之后，结果不变 —— 提升与书写顺序无关
• 注意：let / const 不参与提升竞争，它们有暂时性死区（TDZ），访问会直接报错

函数表达式不提升：只提升变量名

函数表达式本质是赋值操作，只有左侧变量名（如 var bar）被提升，右侧函数本身不会被提升。

• console.log(bar); // undefined
var bar = function() { return 'expressed'; };
• 若写成 bar(); 在赋值前调用 → 报错 TypeError: bar is not a function（因为此时 bar === undefined）
• 箭头函数、const fn = () => {} 同理：变量名不提升，直接进入 TDZ

重复声明时的实际行为

多次 var 声明同一标识符无害（忽略后续声明），但函数声明会覆盖前面的同名函数声明或变量声明。

• function baz() { return 1; }
var baz = 2;
function baz() { return 3; }
  最终 baz 是第二个函数声明（返回 3），var baz = 2 的赋值在执行阶段才发生，但已被后续函数声明“遮蔽”
• 实践中应避免混用，尤其不要用 var 覆盖函数名，易引发静默逻辑错误

如何验证提升行为？

最可靠方式是分阶段观察：在声明前打印变量值，并检查是否可调用。

• 用 typeof 判断：函数声明前 typeof foo === 'function'；函数表达式前 typeof bar === 'undefined'
• 用 console.dir 查看变量实际值（注意：某些浏览器控制台可能因优化显示误导，建议配合严格模式测试）
• ES6+ 推荐统一使用 const / let + 函数表达式，从根源规避提升陷阱

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~