函数声明与函数表达式提升(函数提升差异)-路由通

函数声明与函数表达式提升是JavaScript作用域与执行机制中的核心差异点，直接影响代码的执行顺序和变量访问行为。函数声明会被引擎视为“整体声明”并提升到所在作用域顶部，而函数表达式仅提升变量声明（赋值为undefined），其函数体需等到执行阶段才能初始化。这种机制差异导致二者在变量覆盖、作用域链、执行时机等方面存在显著区别。例如，函数声明可在定义前调用，而函数表达式若未赋值则会导致错误。理解这些差异对避免变量提升陷阱、优化代码结构至关重要，尤其在模块化开发和闭包场景中，需严格区分两种语法形式的实际行为。

函数声明与函数表达式提升

一、定义与语法差异

函数声明以function关键字开头，属于独立语句，例如：

function foo() {}

函数表达式需绑定到变量或作为值传递，例如：

const bar = function() {};

语法形式的差异直接决定了引擎对二者的处理逻辑。

二、提升机制对比

特性	函数声明	函数表达式
是否提升	整体提升（声明与定义）	仅变量提升（赋值为undefined）
提升位置	作用域顶部	作用域顶部（仅变量声明）
命名函数特殊处理	无	命名函数表达式会覆盖变量提升后的undefined

例如，以下代码中函数声明可正常调用，而函数表达式会抛出TypeError：

console.log(foo); // 输出函数定义
console.log(bar);  // 输出undefined
function foo() {}
const bar = function() {};

三、作用域影响分析

场景	函数声明	函数表达式
块级作用域	ES6中允许块级作用域声明	需依赖变量声明（let/const）
变量覆盖	提升后优先于同名变量	变量初始化可能覆盖函数名
嵌套作用域	子作用域可访问父级声明	遵循变量遮蔽规则

例如，在ES6块级作用域中：

{ 
  console.log(foo); 
  function foo() {} 
}; // 报错：Block-scoped function declarations require 'let' or 'const'

四、变量赋值与提升关系

函数表达式的变量提升行为与普通变量一致，但命名函数表达式存在特殊规则。例如：

console.log(a); // 输出函数对象
console.log(b);   // 输出undefined
function a() {};
var b = function() {};

此处a作为函数声明被提升，而b仅变量提升，其赋值在执行阶段完成。

五、命名冲突与覆盖规则

情况	函数声明	函数表达式
同名变量声明	函数优先，变量被忽略	变量初始化覆盖函数名
后定义同名函数	后者覆盖前者	后者覆盖变量（若已赋值）
ES6 let/const声明	TDZ（暂时性死区）限制访问	遵循块级作用域规则

例如：

var x = 'global';
function x() {}; // 提升后覆盖变量x
console.log(x); // 输出函数对象

六、执行时机与初始化顺序

函数声明在编译阶段完成提升，而函数表达式的初始化在执行阶段。例如：

foo(); // 输出'declaration'
bar(); // 报错：bar is not a function
function foo() { console.log('declaration'); }
var bar = function() { console.log('expression'); };

此例中，foo的提升使其在调用时已可用，而bar的赋值尚未执行。

七、实际应用中的典型问题

循环中的函数声明泄漏：在循环内使用函数声明会导致全局污染，应改用函数表达式。
模块加载顺序依赖：依赖提升的函数可能在模块加载时引发意外行为。
严格模式限制：严格模式下禁止重复的函数声明。

例如，以下代码在非严格模式下会覆盖全局函数：

function test() { console.log('original'); }
if (false) {
  function test() { console.log('block'); }
}
test(); // 输出'original'（非严格模式）或报错（严格模式）

八、性能与兼容性考量

维度	函数声明	函数表达式
内存占用	长期驻留作用域	可随变量回收
引擎优化	难以内联优化	支持更多优化策略
跨环境兼容	ES3+一致行为	需注意块级作用域差异