JavaScript函数基础：声明、表达式与箭头函数区别

在 JavaScript 开发中，函数是最核心的逻辑封装单元。尽管函数声明（Function Declaration）、函数表达式（Function Expression）和 ES6 引入的箭头函数（Arrow Function）均能完成计算任务与逻辑复用，但它们在 JavaScript 引擎内部的编译提升机制、运行期 this 绑定、参数对象支持以及原型构造能力上存在根本差异。混淆这三者的行为界限，极易在异步回调、事件监听或模块加载阶段引发诸如 is not a function 或 undefined 的运行时故障。本文将系统拆解这三种定义方式的技术特征与适用场景，帮助读者建立清晰可靠的函数选型原则。

一、函数声明：全函数提升与块级作用域

函数声明（Function Declaration）是 JavaScript 中最传统的函数定义语法。它以 function 关键字开头，后接强制性的函数名称、形参列表以及花括号包裹的函数体：

// 函数声明语法结构
function calculateTotal(price, taxRate) {
  return price * (1 + taxRate);
}

1. 全函数提升（Function Hoisting）

函数声明在 JavaScript 源码被执行前，就已在编译阶段（Creation Phase）被引擎解析并注册到当前作用域的环境记录（Environment Record）中。与普通变量提升仅分配内存不同，函数声明会将标识符与完整的函数体实现一并提升。因此，在物理代码行中即使将函数调用置于函数定义之前，代码依然能够顺利执行：

// 可以在定义之前合法调用
const result = greet("Alice"); 
console.log(result); // 输出示例: "Hello, Alice!"

function greet(name) {
  return "Hello, " + name + "!";
}

这种特性的优势在于可以让主流程代码优先排布在文件顶部，而将庞大的具体实现细节沉淀在文件尾部，增强代码的自顶向下可读性。

2. 块级作用域约束

在 ECMAScript 6（ES6）之前，函数声明在非严格模式下的块级语句（如 if、for 块）内表现存在浏览器实现差异。ES6 规范化了这一行为：在支持严格模式（'use strict'）的代码中，块级语句内部定义的函数声明具有块级作用域，其提升范围被限制在当前代码块内，在块外部无法被直接访问。

二、函数表达式：赋值时机与暂时性死区

函数表达式（Function Expression）将一个函数视为普通的“值”（第一类对象，First-class citizen），将其赋值给一个变量、作为实参传递或自执行。它可以是匿名的，也可以是具名的：

// 匿名函数表达式
const add = function (a, b) {
  return a + b;
};

// 具名函数表达式（Named Function Expression）
const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1); // 内部可用 fact 进行递归
};

1. 提升受限于变量声明关键字

函数表达式的本质是变量声明 + 表达式求值赋值。JavaScript 引擎在预编译阶段只提升宿主变量，而不提升右侧的函数实体。具体行为完全取决于变量声明所使用的关键字：

• 使用 var 声明：变量名被提升，其初始值被置为 undefined。若在赋值前尝试调用，引擎会抛出运行时异常 TypeError: ... is not a function。
• 使用 let 或 const 声明：变量进入暂时性死区（Temporal Dead Zone, TDZ）。若在初始化前调用或访问，引擎会抛出 ReferenceError: Cannot access '...' before initialization。

// 错误示范 1: 使用 var 声明的函数表达式
console.log(typeof multiply); // 输出示例: "undefined"
multiply(2, 3); // 抛出异常: TypeError: multiply is not a function

var multiply = function(a, b) {
  return a * b;
};

// 错误示范 2: 使用 const 声明的函数表达式
divide(10, 2); // 抛出异常: ReferenceError: Cannot access 'divide' before initialization

const divide = function(a, b) {
  return a / b;
};

2. 具名函数表达式的作用

为函数表达式添加名称（如 const fn = function internalName() {}）具有两个重要价值：

1. 递归调用解耦：函数内部可以直接使用 internalName 递归调用自身，避免外部变量重命名引起的不稳定性。
2. 调试堆栈更清晰：在发生异常排查调用栈（Call Stack）时，控制台能直接打印出 internalName，而不是模糊的 anonymous function。

三、箭头函数：词法作用域与极简化设计

ECMAScript 6 引入的箭头函数（Arrow Function）采用了类似 (param) => { ... } 的“瘦箭头”语法。它专为简洁书写和解决常见闭包作用域困扰而设计，其底层运作原理与传统函数存在明显分歧。

1. 极简语法规则

箭头函数允许在特定场景下大幅度精简代码结构：

• 单参数时可省略圆括号：x => x * 2
• 单行返回可省略大括号与 return（隐式返回）：(a, b) => a + b
• 单行返回对象字面量时需用圆括号包裹，避免与代码块符号冲突：id => ({ userId: id })

2. 词法 this 绑定（Lexical this）

普通函数（声明或表达式）的 this 是动态绑定的，其具体指向取决于该函数“在何时何地被调用”。例如作为对象方法直接调用时指向该对象；而在普通事件或 setTimeout 回调中直接调用时，this 往往退化为全局对象（浏览器环境中的 window）或严格模式下的 undefined。

相反，箭头函数根本没有属于自己的 this 绑定。箭头函数内部的 this 是纯粹通过词法作用域链（Lexical Scope）静态捕获其外层非箭头函数的上下文。此外，任何试图通过 call()、apply() 或 bind() 篡改箭头函数 this 指向的行为都会被引擎直接忽略：

const timerHandler = {
  counter: 0,
  
  // 传统函数在回调中由于上下文丢失引发错误
  startWrong: function() {
    setTimeout(function() {
      // 这里的 this 运行时指向全局对象或 undefined
      this.counter++;
      console.log("Wrong counter:", this.counter); // 输出示例: NaN
    }, 100);
  },

  // 箭头函数通过词法静态继承外层 startCorrect 的 this
  startCorrect: function() {
    setTimeout(() => {
      // this 稳定指向 timerHandler 实例对象
      this.counter++;
      console.log("Correct counter:", this.counter); // 输出示例: 1
    }, 100);
  }
};

3. 不可作为构造函数

箭头函数设计之初就是轻量级的逻辑封装，没有内部方法 [[Construct]]，也没有 prototype 属性。如果对箭头函数使用 new 操作符，引擎会直接中断并抛出致命错误：

const Person = (name) => {
  this.name = name;
};

console.log(Person.prototype); // 输出示例: undefined
const p = new Person("Bob");   // 抛出异常: TypeError: Person is not a constructor

4. arguments 对象的缺失与 Rest 参数替代

普通函数在调用时，会自动在内部作用域注入一个类数组对象 arguments，用于动态读取调用时传递的所有实参。但箭头函数内部并不具备自身的 arguments。如果在箭头函数中直接引用该关键字，它同样只会沿作用域链向外层查找外层普通函数的 arguments。

在现代 JavaScript 中，推荐使用 ES6 的剩余参数语法（Rest Parameters）替代陈旧的 arguments：

// 传统函数使用 arguments
function sumOld() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

// 箭头函数使用 ES6 Rest 参数 (...args)
const sumNew = (...args) => args.reduce((sum, val) => sum + val, 0);

console.log(sumNew(1, 2, 3, 4)); // 输出示例: 10

四、工程实践中的技术选型指南

理解技术差异的最终目的是在具体工程场景中做出准确选型。以下决策流图和选型规则汇总了常见场景的规范模式：

1. 优先使用函数声明的场景

• 模块顶层公共函数：利用函数提升特性，让顶层业务调用逻辑置于文件上部，底层实现向下折叠，提高代码整体浏览效率。
• 需要递归且语义明确的独立工具库：如深度克隆、树形遍历等独立算法函数。

2. 优先使用函数表达式的场景

• 条件分支赋值：根据环境条件或配置动态确定函数实现（如兼容性 polyfill）。
• 高阶函数的返回值：函数柯里化（Currying）或闭包工厂函数中作为产物返回。

3. 优先使用箭头函数的场景

• 数组内置高阶方法：例如 Array.prototype.map()、filter()、reduce() 等无状态回调。
• 异步任务与 Promise 链：如 fetch().then(res => res.json())，避免外层变量 that = this 或 .bind(this) 的繁琐操作。

五、反模式警示：切勿使用箭头函数的典型禁区

由于箭头函数缺乏动态 this 与原型链构造能力，在以下三个典型场景中强行使用箭头函数会导致不可预期的逻辑崩溃：

1. 对象字面量方法定义

对象字面量（Object Literal）的大括号不具备块级作用域。如果用箭头函数定义对象方法，内部的 this 会直接越过对象，指向外部模块作用域或 window：

const userProfile = {
  username: "Dave",
  // 错误写法: 箭头函数的 this 指向外层环境，而非 userProfile
  displayBad: () => {
    console.log("Username:", this.username); 
  },
  // 正确写法: 使用 ES6 对象方法简写
  displayGood() {
    console.log("Username:", this.username);
  }
};

userProfile.displayBad();  // 输出示例: "Username: undefined"
userProfile.displayGood(); // 输出示例: "Username: Dave"

2. DOM 原生事件监听器

在传统的 DOM 事件绑定中，事件处理函数中的 this 默认指向触发事件的当前 DOM 节点元素（event.currentTarget）。若使用箭头函数，this 将退化为外层环境，导致无法通过 this 直接读取或操作该元素：

const button = document.getElementById("submit-btn");

// 错误写法: 箭头函数导致 this 指向 window/全局
button.addEventListener("click", () => {
  // this.classList 抛出 TypeError: Cannot read properties of undefined
  this.classList.toggle("active");
});

// 正确写法: 普通函数正确绑定当前 DOM 元素
button.addEventListener("click", function() {
  this.classList.toggle("active"); // 这里的 this 稳定指向 button 元素
});

3. 原型链挂载方法

在基于原型继承或构造函数模式的代码中，如果向 prototype 挂载箭头函数，实例在调用该方法时无法通过动态查找将 this 绑定到当前实例上，造成数据污染或空指针异常：

function Product(title) {
  this.title = title;
}

// 错误写法: 原型上的箭头函数
Product.prototype.getTitle = () => this.title;

const item = new Product("Mechanical Keyboard");
console.log(item.getTitle()); // 输出示例: undefined