JavaScript 参数传递机制详解：从基础到高级用法

在 JavaScript 中，参数传递机制主要分为基本类型的传值与复杂类型的引用传递两种模式。根据具体的业务场景和代码需求，选择合适的传递方式对程序性能和维护性至关重要。以下是对各类传递方式的系统性总结。

1. 按值传递（Pass by Value）

1.1 核心概念

• 对于基本数据类型（如 number, string, boolean, null, undefined, symbol, bigint），函数接收参数时会创建一个值的副本。这意味着函数内部的操作仅作用于该副本，而非原始数据。
• 在函数内部对参数进行修改，不会改变调用处原始变量的值。

1.2 代码示例

function modifyValue(val) {
    val = 10; // 修改的是副本
}
let num = 5;
modifyValue(num);
console.log(num); // 输出：5

1.3 主要特点

• 调用函数的原始变量值保持恒定，不受函数内部修改影响。
• 由于仅传递值的副本，内存占用相对较小，适合轻量级数据交换。

2. 按引用传递（Pass by Reference）

2.1 核心概念

• 对于引用类型（如 Object, Array, Function），函数接收的是指向内存中对象的引用地址。通过该引用，函数可以直接访问并修改原对象。
• 在函数内部对参数属性的修改，会直接反映到原始变量上，影响外部状态。

2.2 代码示例

function modifyObject(obj) {
    obj.name = 'Modified'; // 修改的是引用
}
let person = { name: 'Original' };
modifyObject(person);
console.log(person.name); // 输出：Modified

2.3 主要特点

• 函数参数与原始变量指向内存中的同一对象实例。
• 适用于需要直接操作复杂数据结构（如大型对象或数组）的场景，但需注意避免产生意外的副作用。

3. 参数解构传递

3.1 解构赋值语法

• 利用 ES6 的解构语法，可以从对象或数组中提取特定字段作为函数参数，使接口定义更加清晰。

对象解构示例

function printName({ firstName, lastName }) {
    console.log(`First Name: ${firstName}, Last Name: ${lastName}`);
}
let user = { firstName: 'John', lastName: 'Doe' };
printName(user);

数组解构示例

function printCoordinates([x, y]) {
    console.log(`X: ${x}, Y: ${y}`);
}
let coordinates = [10, 20];
printCoordinates(coordinates);

3.2 主要特点

• 显著提升代码的可读性，无需通过 obj.key 访问内部属性。
• 仅传递函数所需的具体数据片段，减少不必要的参数冗余。

4. Rest 参数传递

4.1 核心概念

rest 参数语法允许将传入的多个不定数量参数收集到一个数组中，便于统一处理。

4.2 代码示例

function sum(...nums) {
    return nums.reduce((acc, cur) => acc + cur, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出：10

4.3 主要特点

• 专门用于处理可变数量的参数场景，如数学计算或动态列表处理。
• 作为传统 arguments 对象的现代替代方案，提供更简洁的数组操作体验。

5. 回调函数传递

5.1 核心概念

将函数作为参数传入另一个函数，允许调用方动态指定执行逻辑，实现行为的多态性。

5.2 代码示例

function processArray(arr, callback) {
    return arr.map(callback);
}
let result = processArray([1, 2, 3], num => num * 2);
console.log(result); // 输出：[2, 4, 6]

5.3 主要特点

• 非常适合处理异步操作（如 Promise 回调）或需要动态决定执行流程的场景。
• 通过抽象具体逻辑，显著提高代码的复用性和模块间的解耦程度。

6. 闭包传递

6.1 核心概念

• 在闭包结构中，内部函数可以访问并持有外部函数的变量，通过词法作用域实现数据的隐式传递与持久化。

6.2 代码示例

function createMultiplier(factor) {
    return function (num) {
        return num * factor;
    };
}
let double = createMultiplier(2);
console.log(double(5)); // 输出：10

6.3 主要特点

• 能够保持函数执行时的上下文环境数据，实现状态封装。
• 有效避免使用全局变量，减少命名冲突和全局污染风险。

7. 模板字符串传递

7.1 核心概念

利用模板字符串（Template Literals）在参数中内嵌动态表达式，实现字符串与变量的便捷拼接。

7.2 代码示例

function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet('Alice'); // 输出：Hello, Alice!

7.3 主要特点

• 简化字符串拼接语法，使动态内容的插入更加直观和易于维护。

8. 高阶函数传递

8.1 核心概念

• 高阶函数接受其他函数作为输入参数，或返回新函数，是函数式编程的核心概念之一。

8.2 代码示例

function higherOrderFunction(fn) {
    console.log(fn());
}
higherOrderFunction(() => 'I am a function'); // 输出：I am a function

8.3 主要特点

• 广泛应用于函数式编程范式，支持 map、filter 等数组方法。
• 通过组合小函数构建复杂逻辑，极大提高了代码的灵活性和扩展性。

9. 事件监听器中的参数传递

9.1 绑定事件时传递数据

• 在 DOM 事件处理中，通常通过闭包或 方法将额外数据传递给事件回调函数。

9.2 代码示例

使用闭包传参示例

let button = document.querySelector('button');
button.addEventListener('click', () => handleClick('Button clicked'));
function handleClick(message) {
    console.log(message);
}

使用 bind 方法示例

button.addEventListener('click', handleClick.bind(null, 'Button clicked'));

总结

参考文档

• MDN: Function Parameters
• MDN: Rest Parameters
• MDN: EventTarget.addEventListener

本文详细介绍了 JavaScript 中多种参数传递机制，涵盖了从基础的值传递到高级的解构与高阶函数应用。理解这些机制有助于编写更健壮、易维护的代码。如需了解更多 JS 传参技巧，建议查阅相关官方文档或往期技术文章。