JavaScript函数怎么调用？参数传递与返回值处理详解

在 JavaScript 中，函数是封装逻辑、传递数据与控制执行流程的核心单元。调用函数最基础的形式是通过函数名后加圆括号 fn()，但具体的调用方式（如普通调用、方法调用、构造函数调用或显式绑定）决定了内部上下文 this 的指向；在参数处理上，JavaScript 始终遵循“按值传递”原则，但基本类型与引用类型的表现有着根本区别；而在结果出口方面，return 语句控制着同步逻辑的截断与单值/解构输出，配合 Promise 与 async/await 则能优雅处理异步流。理解这三者的运作机理，是避免运行时逻辑偏差与内存隐患的基石。

一、函数的五种核心调用方式与 this 机制

JavaScript 是一门基于词法作用域但又具有动态 this 绑定的语言。同一个函数在不同的调用语法下，其运行上下文可能会产生截然不同的结果。掌握函数调用的首要任务，是搞清楚圆括号左侧的表达式形态。

1. 直接函数调用

这是最纯粹的调用方式，即直接在函数标识符后追加参数调用括号。在非严格模式下，函数内部的 this 默认指向全局对象（浏览器环境下为 window，Node.js 环境下为 global）；而在开启了严格模式（"use strict";）的代码块中，未指定所有者的直接调用中 this 将严格保持为 undefined，从而避免意外污染全局命名空间。

function showContext() {
  "use strict";
  return this;
}

console.log(showContext()); // 输出示例: undefined

2. 作为对象的方法调用

当函数作为一个对象的属性被通过点操作符（object.method()）或括号操作符（object['method']()）访问并立即执行时，该函数处于方法调用模式。此时，函数内部的 this 会隐式绑定到包含并调用该方法的对象实例上。

const user = {
  name: "张三",
  greet() {
    return `你好，我是 ${this.name}`;
  }
};

console.log(user.greet()); // 输出示例: "你好，我是 张三"

3. 构造函数调用

在函数调用前附加 new 运算符，便会触发构造函数机制。JavaScript 引擎会在后台执行四个步骤：创建一个全新的空对象；将该新对象的原型指向构造函数的 prototype；将该对象绑定为构造函数体内的 this；若构造函数没有显式返回非原始对象，则自动返回这个新实例对象。

function Counter(start) {
  this.count = start;
}

const c1 = new Counter(10);
console.log(c1.count); // 输出示例: 10

4. 显式绑定调用（call、apply 与 bind）

如果需要临时或长期强制改变函数执行时的 this 上下文，可以使用 Function.prototype 提供的原生方法：

• fn.call(context, arg1, arg2, ...)：立即执行函数，第一个参数指定 this，其后依次罗列单个实参。
• fn.apply(context, [arg1, arg2, ...])：立即执行函数，第一个参数指定 this，实参以数组或类数组形式打包传入。
• fn.bind(context, arg1, ...)：不立即执行，而是返回一个永久绑定了指定 this 和前置柯里化参数的新函数。

5. 箭头函数的词法作用域特点

ES6 引入的箭头函数（() => {}）在调用行为上最为特殊：它没有属于自己的 this、arguments、super 或 new.target。箭头函数内部的 this 严格继承自外层声明位置的词法作用域。即便使用 call 或 apply 显式指定，也无法更改箭头函数绑定的上下文。

二、参数传递机制与现代语法实践

“JavaScript 是按值传递还是按引用传递？”这是面试与日常开发中的经典问题。权威规范给出明确定义：JavaScript 中的所有参数传递始终是按值传递（Pass by Value）。然而由于数据类型的物理存储方式不同，其在实际代码中的表现存在本质区别。

1. 基本类型：传副本值，互不相干

基本数据类型（如 Number、String、Boolean、null、undefined、Symbol、BigInt）存储在栈内存中。当把一个基本类型变量传递进函数时，传入的是该变量值的一个全新拷贝。函数内部对形参的重新赋值或修改，丝毫不会波及函数外部的原始变量。

function modifyPrimitive(val) {
  val = 999;
}

let num = 10;
modifyPrimitive(num);
console.log(num); // 输出示例: 10（原变量保持不变）

2. 引用类型：传“指针地址”的拷贝（按共享传递）

对象、数组与函数属于引用类型，其真正的数据实体存放在堆内存中，而栈内存中仅保存指向该堆内存的指针（引用地址）。

当把一个对象传递给函数时，传递的依然是“栈内存中那个地址的值的拷贝”。此时形参与外部变量指向了同一块堆内存区域。因此：

• 修改属性：如 obj.name = "新值"，由于顺着引用地址修改了底层堆数据，外部变量也会观察到变化。
• 整对象重赋值：如 obj = { name: "新对象" }，此时只是把形参变量在栈上的指针切断并指向了另一个堆地址，外部变量的指针并未被修改，因而外部原对象完好如初。

3. 实参和形参的不匹配处理

JavaScript 极具灵活性，函数的形参个数与调用时传入的实参个数不需要严格相等：

• 实参少于形参：多余的形参变量在函数体内自动初始化为 undefined，不会抛出运行时语法错误。
• 实参多于形参：多出的实参不会报错，在普通函数中可以通过类数组对象 arguments 访问，或通过 ES6 剩余参数获取。

4. 参数默认值与解构赋值

ES6 正式支持在形参列表中声明默认值。值得注意的是：默认参数只有在实参为严格的 undefined 时才会触发计算，若传入 null、0 或 false，默认值不会生效。

function configure(timeout = 3000, debug = false) {
  return { timeout, debug };
}

console.log(configure(undefined, true)); // 输出示例: { timeout: 3000, debug: true }
console.log(configure(null, true));      // 输出示例: { timeout: null, debug: true } (null 会覆盖默认值)

此外，结合对象解构可以实现清晰的“命名参数”风格，配合解构默认值能有效防御属性缺失：

function createUser({ name = "匿名", role = "访客" } = {}) {
  return `${name} (${role})`;
}

console.log(createUser()); // 输出示例: "匿名 (访客)"

5. 剩余参数（Rest Parameters）替代 arguments

在现代代码编写中，应全面优先使用 ...rest 语法代替传统的 arguments。剩余参数是一个真正的 Array 实例，可直接链式调用 map、reduce 等高阶方法，并且在箭头函数中同样可用。

function sumAll(factor, ...numbers) {
  return numbers.reduce((acc, cur) => acc + cur * factor, 0);
}

console.log(sumAll(2, 1, 2, 3)); // 输出示例: 12 (计算: 1*2 + 2*2 + 3*2)

三、函数返回值处理与多值返回范式

函数不仅承担数据处理逻辑，更需要将计算结果可靠地反馈给调用方。在 JavaScript 中，控制流离开函数体的方式决定了最终的返回值。

1. return 语句的机制与控制流截断

return 语句用于终止当前函数的执行，并将跟随在后面的表达式计算结果返回给调用者。一旦遇到 return，该行后续的所有语句均会被跳过。若函数体内没有任何 return，或者写了 return; 但未指定表达式，JavaScript 将自动且始终返回 undefined。

2. 多值返回的标准实践：解构模式

JavaScript 原生只允许单个函数调用返回一个独立的实体。如果业务上需要返回多个关联结果，推荐使用数组或对象作为载体，并在调用方通过解构赋值解包。

3. 异步函数的返回值：Promise 与 async/await

当函数前标记了 async 关键字时，该函数的行为产生重要转变：无论其内部 return 什么样的具体数据，该函数调用后必然返回一个 Promise 对象。

• 若返回非 Promise 值（如字符串、数值），引擎会自动通过 Promise.resolve(value) 包装它。
• 若函数内部抛出异常（throw error），则会自动返回一个 rejected 状态的 Promise。
• 调用端必须通过 .then() 回调或在另一个 async 函数中通过 await 来提取其真正承载的数据。

四、常见易错陷阱与生产级最佳实践

1. 回调函数传递导致 this 隐式丢失

这是前端业务中最高频的错误之一。当把一个对象的方法作为回调函数传入 setTimeout 或 DOM 事件监听器时，实际传递的是该方法的函数引用，调用时退化成了“普通直接调用”，原宿主上下文不复存在。

const buttonHandler = {
  text: "提交中...",
  handleClick() {
    console.log(this.text);
  }
};

// 错误做法：直接传递引用，此时 this 丢失（在严格模式下变为 undefined，非严格模式下为 window）
setTimeout(buttonHandler.handleClick, 100); 

// 正确方案 A：使用箭头函数包裹，维持词法绑定
setTimeout(() => buttonHandler.handleClick(), 100);

// 正确方案 B：使用 bind 固化上下文
setTimeout(buttonHandler.handleClick.bind(buttonHandler), 100);

2. 对象解构时的双重默认值防护

当使用对象解构处理函数参数时，如果调用方完全不传递参数（传入 undefined），代码会正常应用最外层的默认空对象 {}；但若调用方显式传入了 null，解构将会直接崩溃，抛出 TypeError: Cannot destructure property of null。

// 防御性设计：对于外部可能传入 null 的不可控场景
function renderWidget(options) {
  // 显式合并空对象，防止 options 为 null 导致的解构致命异常
  const { width = 100, height = 100 } = options || {};
  return `尺寸: ${width}x${height}`;
}

console.log(renderWidget(null)); // 输出示例: "尺寸: 100x100"（平稳降级）

3. async 函数内 return 与 return await 的选择

许多开发者疑惑是否应该在 async 函数内部书写 return await promise。在绝大多数情况下，直接 return promise 即可，外层调用者会同样等待该 Promise 解析；但如果该语句位于 try...catch 块内部，则必须显式保留 await，否则异常将直接穿透出去，导致本地的 catch 块无法拦截该错误。

async function safeFetch(url) {
  try {
    // 此处必须 await，才能在发生网络错误时触发本地 catch
    return await fetch(url).then(r => r.json());
  } catch (err) {
    console.warn("请求失败，启动降级缓存", err);
    return { fallback: true };
  }
}

五、核心规则全景总结

综合上述分析，我们将 JavaScript 函数的调用规范、参数处理与返回值处理提炼为一张全景速查图，便于日常开发与代码审查中核对参照。