JavaScript函数作为参数：基础语法与调用示例

在 JavaScript 中，将函数作为参数传递给另一个函数，是编写高复用、低耦合代码的核心手段。理解这一特性的关键，在于掌握两个基本事实：JavaScript 中的函数是“一等公民”（可以像普通数值、字符串或对象一样被赋值、传参和返回），以及在传参时传递的是函数名（引用指针）而非函数调用结果（带有括号的执行表达式）。本文将通过具体语法、执行机制、双向数据流传递与典型代码示例，详细拆解这一特性的运作方式与注意事项。

一、核心原理：为什么函数可以作为参数？

初学者常常会对“把代码块塞进变量里传递”感到抽象。要理清这个问题，首先需要理解 JavaScript 的内存组织方式与“一等公民”（First-Class Citizens）设计。

在底层机制中，使用 function 关键字或箭头语法声明的函数，本质上都是在内存堆（Heap）中创建的一个函数对象。函数的名字（例如 greet）本身并不是执行操作，它只是一个保存在执行栈中的普通变量，里面存放着指向该函数对象的内存地址指针。

既然函数名只是一个保存地址的普通标识符，那么它在语法上就享有与数字、对象完全等同的待遇：

• 可以赋值给其他变量：const myRef = greet;
• 可以存入数组或对象：const actions = [greet, farewell];
• 可以作为实参传递给另一个函数的形参：execute(greet);

接收另一个函数作为参数，或者把函数作为返回值的函数，在计算机科学中被称为高阶函数（Higher-Order Function）；而被作为实参传进去、等待在特定时机被调用的函数，则被称为回调函数（Callback Function）。

二、基础语法：如何定义并接收函数参数

实现“函数作为参数”的完整过程分为两端：接收端（高阶函数）声明一个形参占位符，并在内部适当时机执行它；调用端准备好具体业务函数，并把函数名传入。

1. 高阶函数的定义方式

定义接收函数参数的高阶函数与定义普通函数没有语法区别，只需在参数列表中预留一个形参名（通常命名为 callback、fn 或体现具体作用的名称如 action、predicate）：

// 接收端：定义一个执行两数运算的高阶函数
function calculate(a, b, operation) {
  // 在内部通过 形参名 + () 触发传入的函数
  return operation(a, b);
}

在上述代码中，operation 只是一个形参变量。只要调用者传入了一个合法的函数引用，高阶函数内部就可以像调用普通函数一样通过 operation(a, b) 来执行它。

2. 传入具名函数（Named Function）

如果业务逻辑较为通用，或者已经在其他模块中定义好了具名函数，可以直接将函数名作为实参传入：

// 声明两个独立的具体算法
function add(x, y) {
  return x + y;
}

function multiply(x, y) {
  return x * y;
}

// 传递具名函数引用
const sum = calculate(10, 5, add);
const product = calculate(10, 5, multiply);

console.log('求和结果:', sum);
console.log('相乘结果:', product);

3. 传入匿名函数与箭头函数

如果回调逻辑只在当前位置使用一次，专门声明一个独立具名函数会显得繁琐。此时可以直接在调用实参位置定义内联匿名函数或 ES6 箭头函数：

// 使用传统匿名函数传参
const diff = calculate(20, 8, function(x, y) {
  return x - y;
});

// 使用箭头函数传参（现代写法，推荐）
const power = calculate(2, 3, (base, exp) => base ** exp);

console.log('相减结果:', diff);
console.log('幂运算结果:', power);

三、执行生命周期与双向数据流

理解函数作为参数的运行全貌，需要看清数据在“高阶函数”与“回调函数”之间是如何双向流动的。整个生命周期包含清晰的 5 个步骤：

双向数据流动的关键体现在步骤 4 与步骤 5：

1. 向下注入数据（调用方 → 回调函数）：高阶函数在执行 callback(arg1, arg2...) 时，负责向回调函数注入运行时数据。回调函数的形参接收这些数据。
2. 向上回传结果（回调函数 → 调用方）：回调函数通过 return 将运算结果交还给高阶函数，高阶函数拿到结果后继续执行后续组装或筛选逻辑。

下面通过一个自定义的列表过滤器展示这种完整的双向交互：

// 高阶函数：负责循环遍历与集合维护（控制流骨架）
function customFilter(array, predicate) {
  const passedItems = [];
  
  for (let i = 0; i < array.length; i++) {
    const currentItem = array[i];
    // 1. 向下传递当前项与索引；2. 捕获回调返回的布尔判定值
    const shouldKeep = predicate(currentItem, i);
    
    if (shouldKeep) {
      passedItems.push(currentItem);
    }
  }
  
  return passedItems;
}

const scores = [45, 82, 60, 93, 37, 75];

// 传入回调策略：只保留大于等于 60 的及格成绩
const passingScores = customFilter(scores, score => score >= 60);

console.log('及格分数列表:', passingScores);

四、常见误区对比：传递引用 vs 立即执行

“误加小括号”是初学者将函数作为参数时最频繁触发的错误。通过对比两种写法在执行引擎中的真实路径，可以彻底厘清两者的本质区别：

考虑以下经典示例代码：

function sayGreeting() {
  console.log('你好，欢迎阅读！');
}

// 错误示范：带了小括号
// setTimeout(sayGreeting(), 1000);
// 结果：sayGreeting() 在注册定时器时被瞬间执行，然后把返回值 undefined 注册给定时器，1 秒后毫无反应。

// 正确示范：传递函数名引用
setTimeout(sayGreeting, 1000);
// 结果：1000 毫秒后，定时器内部代码执行 sayGreeting()，准时打印问候语。

如果需要在传参的同时为回调预设参数，且不能立即执行，该怎么办？常见有两种规范解法：

解法一：外层包裹匿名箭头函数

function greetUser(username) {
  console.log(`欢迎光临，${username}！`);
}

// 在实参处声明一个无参箭头函数，延迟其内部调用
setTimeout(() => greetUser('张三'), 1000);

解法二：使用 Function.prototype.bind 预设实参

// bind 会返回一个新的函数引用，预置实参但不立即执行
const boundGreet = greetUser.bind(null, '李四');
setTimeout(boundGreet, 1000);

五、生产环境典型应用场景

函数作为参数并不是孤立的语法特性，它构成了现代 JavaScript 异步编程与声明式数据处理的基石。在日常业务开发中，以下三种场景最为普遍：

1. 数组内置高阶迭代方法（map / filter / reduce）

JavaScript 数组原型上内置了一系列高阶函数，极大地简化了集合变换操作，替代传统的 for 循环计数器：

const products = [
  { id: 101, name: '键盘', price: 299 },
  { id: 102, name: '鼠标', price: 129 },
  { id: 103, name: '显示器', price: 1499 }
];

// map 接收一个映射转换函数
const productNames = products.map(item => item.name);

// filter 接收一个条件断言函数
const affordable = products.filter(item => item.price < 500);

console.log('商品名称集合:', productNames);
console.log('平价商品集合:', affordable);

2. 异步处理与事件驱动模型

由于 JavaScript 在浏览器与 Node.js 环境中是单线程运行的，网络请求与用户交互均依赖事件循环机制。将响应代码包装成函数传给事件监听器或 Promise，是异步调用的通用范式：

// 模拟异步数据获取高阶函数
function fetchUserProfile(userId, onSuccess, onError) {
  setTimeout(() => {
    if (userId > 0) {
      const user = { id: userId, nickname: '工程师小陈', role: 'Developer' };
      onSuccess(user); // 触发成功回调
    } else {
      onError(new Error('用户 ID 无效')); // 触发错误回调
    }
  }, 500);
}

// 传入两个回调函数分别处理成功与异常分支
fetchUserProfile(
  42,
  user => console.log('获取成功:', user.nickname),
  err => console.error('获取失败:', err.message)
);

3. 策略模式：解耦通用流程与多变算法

在编写业务通用组件时，经常需要支持不同的排序规则或格式化方式。通过把算法提取成参数，可以避免写满复杂的 if-else 分支：

// 通用表格排版高阶函数
function renderReport(records, formatter) {
  console.log('--- 报表导出开始 ---');
  records.forEach((record, idx) => {
    // 具体的排版字符串由外部传入的 formatter 决定
    console.log(`[#${idx + 1}] ${formatter(record)}`);
  });
  console.log('--- 报表导出完毕 ---');
}

const employees = [
  { name: '赵六', dept: '研发部', salary: 18000 },
  { name: '钱七', dept: '运营部', salary: 12000 }
];

// 策略 A：简略格式
renderReport(employees, emp => `${emp.name} (${emp.dept})`);

// 策略 B：财务格式
renderReport(employees, emp => `${emp.name} | 薪资: ¥${emp.salary.toLocaleString()}`);

六、关键避坑要点与健壮性防护

在将函数作为参数传递的实际项目中，以下三点也是排查 Bug 的高发区：

1. 回调函数内部的 this 指向漂移

使用传统 function 语法定义的方法，在被作为参数抽离并由高阶函数独立调用时，其执行上下文中的 this 会丢失原本的对象绑定，转而指向全局对象（非严格模式）或 undefined（严格模式）：

const counter = {
  count: 0,
  increment() {
    this.count++;
    console.log('当前计数:', this.count);
  }
};

// 错误：直接提取对象方法传参，执行时 this 指向丢失
// setTimeout(counter.increment, 500); // NaN 或 TypeError

// 正确做法 A：使用箭头函数维持词法上下文
setTimeout(() => counter.increment(), 500);

// 正确做法 B：使用 bind 固化上下文
setTimeout(counter.increment.bind(counter), 500);

2. 高阶函数内部的防御性校验

在高阶函数内部直接调用传入的参数前，应始终考虑调用者未传参或传入非法类型的边界条件。缺少校验会导致直接抛出未捕获的 TypeError：

function processTask(data, onFinished) {
  // 危险写法: onFinished(data); (如果外部未传参则崩溃)

  // 推荐防护写法：验证类型后再执行
  if (typeof onFinished === 'function') {
    onFinished(data);
  }
}

七、知识全景与语法速查

为了在实际编码中快速做出选型，下表与全景图梳理了三种函数传参形式的核心特点与适用条件：