JavaScript函数声明、表达式与箭头函数的区别及提升机制

一、三种函数形态的核心定义与语法结构

在深入底层机制之前，需要准确区分三者在语法层面的分类：函数声明（Function Declaration）是独立的语句；函数表达式（Function Expression）是将函数作为右值参与运算或赋值；而箭头函数（Arrow Function）是 ES6 引入的表达式特化形态，自带词法作用域特性。

1. 函数声明（Function Declaration）

函数声明使用独立的 function 关键字开头，并且必须具备函数名。它是一个单独的语法结构，不能直接放置在赋值运算符的右侧或作为参数传递。

// 函数声明：必须包含函数标识符
function calculateSum(a, b) {
  return a + b;
}

函数声明的最典型特征在于：在解析阶段，JavaScript 引擎会将其标识符与函数体整体记录在当前作用域的环境记录中，从而使得调用可以发生在声明代码之前。

2. 函数表达式（Function Expression）

函数表达式将一个函数对象赋值给一个变量。此时，函数本身可以是匿名的（最常见），也可以是具名的（Named Function Expression）。

// 匿名函数表达式
const getArea = function(width, height) {
  return width * height;
};

// 具名函数表达式（NFEs）
const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1); // fact 仅在函数体内部作用域可用
};

对于具名函数表达式，其名称（如 fact）只能在函数内部访问，用于递归或调试调用栈，外部作用域仅能通过变量 factorial 进行调用。

3. 箭头函数（Arrow Function）

箭头函数是基于胖箭头 => 的精简表达式语法，它必然是匿名的，且不绑定自身的 this、arguments、super 或 new.target。

// 箭头函数：单参数可省略括号，单表达式隐式返回
const double = x => x * 2;

// 多参数与块状代码体
const multiply = (a, b) => {
  return a * b;
};

二、提升机制（Hoisting）的底层运行原理

所谓“提升”，并不是 JavaScript 引擎在物理上将代码移动到文件顶部，而是在词法环境创建阶段（编译时）与执行阶段（运行时）分离带来的确定性表现。

当一段代码进入执行上下文时，引擎会经历两个阶段：

1. 编译/创建阶段：词法分析器扫描当前上下文中的变量与函数声明，在环境记录项（Environment Record）中开辟内存并登记标识符。
2. 执行阶段：代码从上到下逐行执行，遇到赋值表达式时将计算结果写入对应的环境记录项。

1. 函数声明的整体提升（Declaration Hoisting）

函数声明具备整体提升的特权。在编译阶段，引擎不仅在作用域中为函数名保留位置，还将该名字与具体的函数定义直接绑定。因此，即使调用语句在代码书写位置上位于函数声明之前，代码也能正确运行：

// 正常运行，输出 "Hello!"
greet();

function greet() {
  console.log("Hello!");
}

2. 表达式与箭头函数的变量提升差异

函数表达式与箭头函数均以“变量赋值”的形式存在，因此其提升行为由承载它的变量关键字（var、let 或 const）决定：

• 使用 var 声明：变量名被提升，但在执行赋值行之前，该变量的初值被初始化为 undefined。如果在赋值语句之前执行调用，引擎试图对 undefined 执行函数调用操作符 ()，会立即抛出 TypeError: ... is not a function。
• 使用 let 或 const 声明：变量名虽然在词法环境中登记，但并没有被初始化。从作用域开始到赋值语句完成之间的区域被称为暂时性死区（Temporal Dead Zone，TDZ）。在 TDZ 内访问该变量会直接抛出 ReferenceError: Cannot access '...' before initialization。

// 场景 1：var 函数表达式
console.log(typeof fnVar); // 输出 "undefined"
fnVar(); // 抛出 TypeError: fnVar is not a function
var fnVar = function() { console.log("var executed"); };

// 场景 2：const 箭头函数
fnArrow(); // 抛出 ReferenceError: Cannot access 'fnArrow' before initialization
const fnArrow = () => { console.log("arrow executed"); };

三、this 机制、构造调用与原型链差异

除了提升机制，三者在运行时的内部属性（Internal Slots）与上下文绑定方式上有着截然不同的设计哲学。

1. this 的动态绑定 vs 词法绑定

函数声明与函数表达式：拥有自己的 this 绑定。其 this 的具体指向完全取决于运行时的调用方式：

• 直接调用：非严格模式下指向全局对象（window/global），严格模式下为 undefined；
• 方法调用（obj.fn()）：指向调用该方法的上下文对象 obj；
• 显式绑定：通过 call、apply 或 bind 显式指定 this。

箭头函数：完全没有自己的 this。箭头函数内部的 this 在声明时就由其定义所处的外层作用域（Lexical Scope）决定，并在其生命周期内永久固定。对其使用 call()、apply() 或 bind() 传入自定义的上下文对象，第一个参数会被直接忽略。

2. 原型对象（prototype）与构造函数能力（new）

JavaScript 中的构造调用（new Func()）依赖于函数内部的 [[Construct]] 方法，并需要利用函数的 prototype 属性来建立新实例的原型链接：

• 函数声明与标准函数表达式：在创建时会自动生成一个 prototype 属性（指向包含 constructor 的原型对象），并具有 [[Construct]] 内部方法，可以充当构造函数。
• 箭头函数：没有 prototype 属性，也没有 [[Construct]] 内部方法。尝试对箭头函数使用 new 操作符会抛出 TypeError: ... is not a constructor。

3. 参数机制：arguments 对象 vs Rest 参数

在传统函数（声明与表达式）中，函数体内默认注入一个类数组对象 arguments，包含调用时传入的所有实参。

箭头函数内部不存在 arguments 对象。如果在箭头函数中直接读取 arguments，获取到的是其外层普通函数的 arguments。在箭头函数中获取不确定数量的参数时，必须使用 ES6 的 Rest 收集语法 (...args)。

四、常见开发陷阱与针对性解决方案

1. 对象字面量方法误用箭头函数

在定义对象的方法时，如果直接使用箭头函数，由于对象字面量花括号不会产生独立的词法作用域，箭头函数内部的 this 会逃逸到对象所在的上层作用域（通常是全局 window 或模块作用域），导致无法通过 this 获取对象属性。

const counter = {
  count: 10,
  // 错误做法：this 指向全局或 undefined
  incrementBad: () => {
    this.count++; // 这里的 this 不是 counter
  },
  // 正确做法：使用简写方法（标准函数表达式语法糖）
  incrementGood() {
    this.count++;
  }
};

2. 条件分支语句中的函数声明不一致性

在 if 等块级作用域分支中编写函数声明，在 ES5 及早期的旧引擎中属于未定义行为（各浏览器实现存在严重差异）。在 ES6 引入块级作用域规范后，块内函数声明的表现类似于 let，只在当前块内可见。

// 存在兼容性与意图混淆风险的写法
if (shouldInit) {
  function setup() { /* ... */ }
}

// 推荐的明确做法：使用函数表达式配合 const
let setup;
if (shouldInit) {
  setup = () => { /* ... */ };
}

五、全景特性对比与工程选型建议

为了在项目开发中建立清晰的代码规范，可参考下方的核心特性横向对比矩阵，根据具体任务的特征做出明确的技术选型。

选型实践准则：

• 优先使用箭头函数处理回调与纯计算：在 map、filter、事件监听（不依赖 event.currentTarget 作为 this 时）以及异步 Promise 链路中，箭头函数能杜绝 this 漂移问题，并且语法最为紧凑。
• 模块主干业务逻辑推荐函数声明：模块导出的主函数或顶层工具逻辑使用函数声明，使主要处理过程位于代码前部，辅助实现放置在底部，利于代码从宏观到微观的自上而下阅读。
• 需要构造实例或动态绑定时必须使用普通函数：传统的构造函数模式、对象的方法定义（需要访问 this.property）或 DOM 事件中依赖 this 绑定触发元素的场景，坚决避免使用箭头函数。