发布于 由admin

参数传递总出问题？JavaScript引用与值传递机制详解

各位编程爱好者，下午好！非常荣幸今天能在这里与大家共同探讨一个在JavaScript开发中既基础又常常引发困惑的话题——参数传递机制。你是否也曾遇到这样的场景：满怀信心地将一个变量传入函数，期待它在函数内部被修改后，外部也能看到变化，结果却发现一切照旧？又或者，你明明只想在函数内部临时处理一下数据，却不小心改动了原始数据，导致一系列难以追踪的bug？

如果是这样，那么你并不孤单。这背后隐藏的，正是JavaScript独特的参数传递机制。今天，我将带大家剥开这层神秘的面纱，深入理解JavaScript究竟是如何传递参数的，它的“传值”与“传引用”之争又是如何终结的。我们将通过大量的代码示例、内存模型解析以及最佳实践，确保你在讲座结束后，能够对这一机制了然于胸，从而编写出更健壮、更可预测的JavaScript代码。

一、 值传递与引用传递：计算机科学的基石

在深入JavaScript之前，我们先来回顾一下计算机科学中关于参数传递的两种基本模型：值传递（Pass by Value） 和 引用传递（Pass by Reference）。理解这两种模型的本质，是理解JavaScript行为的关键。

1.1 值传递 (Pass by Value)

当一个变量通过值传递的方式作为参数传入函数时，函数会接收到该变量的一个副本。这意味着，函数内部对这个参数的任何修改，都只会作用于这个副本，而不会影响到函数外部的原始变量。你可以想象成，你把一份文件复印了一份给同事，同事在复印件上做了修改，你的原件依然完好无损。

特点：

  • 传递的是变量的实际值的一个拷贝。
  • 函数内部的修改不会影响外部变量。
  • 安全，不会产生意外的副作用。

1.2 引用传递 (Pass by Reference)

当一个变量通过引用传递的方式作为参数传入函数时，函数接收到的不是变量的值，而是变量在内存中的地址（引用）。这意味着，函数内部和外部的变量，实际上都指向内存中的同一个位置。因此，函数内部对这个参数的任何修改，都会直接作用于原始变量，因为它们操作的是同一块内存。这就像你把原件文件直接借给同事，同事在原件上做了修改，你的原件也就被改动了。

特点：

  • 传递的是变量在内存中的地址。
  • 函数内部的修改会直接影响外部变量。
  • 效率高，避免了大量数据的复制。
  • 潜在风险：容易产生意外的副作用，难以追踪。

1.3 为什么这个区分如此重要？

理解值传递和引用传递对于编写高质量代码至关重要。它直接影响着：

  • 数据完整性： 你的数据是否会在不经意间被修改？
  • 函数副作用： 函数除了返回结果，是否还会对外部状态产生影响？
  • 代码可预测性： 你能否准确预知代码的运行结果？
  • 调试难度： 意外的变量修改是bug的常见来源。

在许多编程语言中，如C++，你可以显式地选择是进行值传递还是引用传递（通过指针或引用）。但在JavaScript中，情况则有些特殊，且常常引发误解。

二、 JavaScript的真相：一切皆是值传递

现在，让我们揭开JavaScript参数传递的最终答案：JavaScript总是采用值传递（Pass by Value）。

是的，你没听错，也并不是我口误。无论是基本数据类型还是对象类型，JavaScript在函数调用时，传递的都是参数的值。不过，这里的关键在于：当传递的是对象时，这个“值”实际上是对象在内存中的“引用地址”的副本。

正是这种看似矛盾的说法，导致了大量的困惑。许多开发者会因为观察到对象在函数内部被修改后外部也受影响的行为，而误认为JavaScript对对象是“引用传递”。但从严格意义上讲，这仍然是值传递——传递的是引用地址这个“值”的副本。

为了更好地理解这一点，我们首先需要区分JavaScript中的数据类型。

三、 基本数据类型 (Primitives)：简单的值传递

JavaScript的基本数据类型包括：

  • Number (数字)
  • String (字符串)
  • Boolean (布尔值)
  • Null (空)
  • Undefined (未定义)
  • Symbol (符号，ES6新增)
  • BigInt (大整数，ES2020新增)

这些类型的值是不可变的（immutable）。当我们将一个基本数据类型的变量作为参数传入函数时，函数会收到这个值的一个独立副本。函数内部对这个副本的任何操作，都不会影响到原始变量。

3.1 代码示例：基本数据类型的参数传递

function modifyPrimitive(num, str, bool) {
    console.log("--- Inside modifyPrimitive function ---");
    console.log("Initial num:", num);     // 10
    console.log("Initial str:", str);     // "hello"
    console.log("Initial bool:", bool);   // true

    num = 20; // 修改副本
    str = "world"; // 修改副本
    bool = false; // 修改副本

    console.log("Modified num:", num);    // 20
    console.log("Modified str:", str);    // "world"
    console.log("Modified bool:", bool);  // false
    console.log("--- End of modifyPrimitive function ---");
}

let myNumber = 10;
let myString = "hello";
let myBoolean = true;

console.log("Before function call:");
console.log("myNumber:", myNumber);   // 10
console.log("myString:", myString);   // "hello"
console.log("myBoolean:", myBoolean); // true

modifyPrimitive(myNumber, myString, myBoolean);

console.log("After function call:");
console.log("myNumber:", myNumber);   // 10 (unchanged)
console.log("myString:", myString);   // "hello" (unchanged)
console.log("myBoolean:", myBoolean); // true (unchanged)

解析：

  1. 当 modifyPrimitive 函数被调用时，myNumber 的值 10 被复制，赋给了函数参数 num。myString 的值 "hello" 被复制给 str，myBoolean 的值 true 被复制给 bool。
  2. 在函数内部，num = 20; 这样的赋值操作，实际上是让函数内部的局部变量 num 不再指向原来的 10 副本，而是指向了一个新的值 20。它并没有改变外部的 myNumber。
  3. 函数执行完毕后，外部的 myNumber、myString 和 myBoolean 依然保持着它们原始的值，因为函数内部的操作只影响了它们的副本。

3.2 内存模型（概念性）

我们可以这样理解内存中的变化：

  • 初始状态：

    • myNumber –> 10
    • myString –> "hello"
    • myBoolean –> true

  • 函数调用时：

    • myNumber –> 10
    • myString –> "hello"
    • myBoolean –> true
    • num (函数内) –> 10 (副本)
    • str (函数内) –> "hello" (副本)
    • bool (函数内) –> true (副本)

  • 函数内部修改后：

    • myNumber –> 10
    • myString –> "hello"
    • myBoolean –> true
    • num (函数内) –> 20 (新的值)
    • str (函数内) –> "world" (新的值)
    • bool (函数内) –> false (新的值)

很明显，外部变量与函数内部参数之间，在内存上是完全独立的。

四、 对象类型 (Objects)：引用地址的值传递

JavaScript中的对象类型包括：

  • Object (普通对象，包括字面量 {})
  • Array (数组)
  • Function (函数)
  • Date (日期)
  • RegExp (正则表达式)
  • 以及所有用户自定义的类实例

与基本数据类型不同，对象是可变的（mutable）。当我们将一个对象作为参数传入函数时，函数接收到的不是整个对象的副本，而是对象在内存中的引用地址的副本。

这就是混淆的根源！虽然传递的是“值”（即引用地址），但由于这个“值”指向的是同一个内存位置，因此函数内部对该内存位置上对象属性的修改，会反映到函数外部。然而，如果在函数内部重新赋值这个参数变量本身，则不会影响外部。

4.1 场景一：修改对象属性，外部受影响

这是最常见的，也最容易被误认为“引用传递”的场景。

function modifyObjectProperties(obj) {
    console.log("--- Inside modifyObjectProperties function ---");
    console.log("Initial obj.name:", obj.name); // Alice
    console.log("Initial obj.age:", obj.age);   // 30

    obj.name = "Bob"; // 修改对象的属性
    obj.age += 5;     // 修改对象的属性
    obj.city = "New York"; // 添加新属性

    console.log("Modified obj.name:", obj.name); // Bob
    console.log("Modified obj.age:", obj.age);   // 35
    console.log("Modified obj.city:", obj.city); // New York
    console.log("--- End of modifyObjectProperties function ---");
}

let person = { name: "Alice", age: 30 };

console.log("Before function call:");
console.log("person.name:", person.name); // Alice
console.log("person.age:", person.age);   // 30
console.log("person.city:", person.city); // undefined

modifyObjectProperties(person);

console.log("After function call:");
console.log("person.name:", person.name); // Bob (changed!)
console.log("person.age:", person.age);   // 35 (changed!)
console.log("person.city:", person.city); // New York (added!)

解析：

  1. 当 modifyObjectProperties 函数被调用时，person 变量中存储的，是对 { name: "Alice", age: 30 } 这个对象在内存中的引用地址。
  2. 这个引用地址的值被复制，并赋给了函数参数 obj。
  3. 现在，person 和 obj 都拥有同一个引用地址的副本，它们都指向内存中的同一个对象。
  4. 在函数内部，obj.name = "Bob"; 这样的操作，是通过 obj 这个引用，找到了它指向的内存中的对象，然后修改了那个对象的 name 属性。
  5. 因为 person 也指向同一个对象，所以它也能“看到”这些修改。

4.2 内存模型（概念性）

  • 初始状态：

    • 内存中有一个对象 { name: "Alice", age: 30 }，假设其地址为 ADDR_X。
    • person –> ADDR_X

  • 函数调用时：

    • 内存中有一个对象 { name: "Alice", age: 30 }，地址为 ADDR_X。
    • person –> ADDR_X
    • obj (函数内) –> ADDR_X (引用地址的副本)

  • 函数内部修改属性后：

    • 内存中 同一个对象 变为 { name: "Bob", age: 35, city: "New York" }，地址仍为 ADDR_X。
    • person –> ADDR_X
    • obj (函数内) –> ADDR_X

可以看到，person 和 obj 始终指向同一个对象，因此通过其中任何一个修改对象属性，都会影响到另一个。

4.3 场景二：在函数内部重新赋值参数，外部不受影响

这是证明JavaScript是“值传递”的关键论据。如果在函数内部对参数变量本身进行重新赋值（而不是修改其属性），那么外部的原始变量将不会受到影响。

function reassignObjectParameter(obj) {
    console.log("--- Inside reassignObjectParameter function ---");
    console.log("Initial obj.name:", obj.name); // Alice

    obj = { name: "Charlie", age: 40 }; // 重新赋值参数变量，指向一个新对象

    console.log("Reassigned obj.name:", obj.name); // Charlie
    console.log("--- End of reassignObjectParameter function ---");
}

let anotherPerson = { name: "Alice", age: 30 };

console.log("Before function call:");
console.log("anotherPerson.name:", anotherPerson.name); // Alice

reassignObjectParameter(anotherPerson);

console.log("After function call:");
console.log("anotherPerson.name:", anotherPerson.name); // Alice (unchanged!)

解析：

  1. 当 reassignObjectParameter 函数被调用时，anotherPerson 变量中存储的引用地址（假设为 ADDR_Y）被复制，赋给了函数参数 obj。
  2. 此时，anotherPerson 和 obj 都指向 { name: "Alice", age: 30 } (地址 ADDR_Y)。
  3. 在函数内部执行 obj = { name: "Charlie", age: 40 }; 时，发生了关键的变化：
    • JavaScript引擎在内存中创建了一个全新的对象 { name: "Charlie", age: 40 }，假设其地址为 ADDR_Z。
    • 函数内部的局部变量 obj 不再指向 ADDR_Y，而是被重新赋值为 ADDR_Z。
  4. 此时，anotherPerson 仍然指向 ADDR_Y，而 obj 则指向 ADDR_Z。它们已经“分道扬镳”。
  5. 函数执行完毕，外部的 anotherPerson 依然指向原始对象，所以它的属性没有改变。

4.4 内存模型（概念性）

  • 初始状态：

    • 内存中有一个对象 { name: "Alice", age: 30 }，假设其地址为 ADDR_Y。
    • anotherPerson –> ADDR_Y

  • 函数调用时：

    • 内存中有一个对象 { name: "Alice", age: 30 }，地址为 ADDR_Y。
    • anotherPerson –> ADDR_Y
    • obj (函数内) –> ADDR_Y (引用地址的副本)

  • 函数内部重新赋值后：

    • 内存中原始对象 { name: "Alice", age: 30 }，地址为 ADDR_Y。
    • 内存中 新对象 { name: "Charlie", age: 40 }，地址为 ADDR_Z。
    • anotherPerson –> ADDR_Y (未改变)
    • obj (函数内) –> ADDR_Z (指向新对象)

这个例子清晰地表明，即使对于对象，JavaScript依然是值传递。它传递的是引用地址这个“值”的副本，而不是引用本身。如果你修改了副本指向的内容，那么所有指向该内容的引用都会看到改变；但如果你修改了副本本身（让它指向别处），那么原始的引用是不会受影响的。

4.5 数组的参数传递

数组在JavaScript中也是对象。因此，数组的参数传递行为与普通对象完全一致。

4.5.1 修改数组元素，外部受影响

function modifyArrayElements(arr) {
    console.log("--- Inside modifyArrayElements function ---");
    console.log("Initial arr:", arr); // [1, 2, 3]

    arr.push(4); // 修改数组（添加元素）
    arr[0] = 100; // 修改数组元素

    console.log("Modified arr:", arr); // [100, 2, 3, 4]
    console.log("--- End of modifyArrayElements function ---");
}

let myArray = [1, 2, 3];

console.log("Before function call:");
console.log("myArray:", myArray); // [1, 2, 3]

modifyArrayElements(myArray);

console.log("After function call:");
console.log("myArray:", myArray); // [100, 2, 3, 4] (changed!)

4.5.2 在函数内部重新赋值数组参数，外部不受影响

function reassignArrayParameter(arr) {
    console.log("--- Inside reassignArrayParameter function ---");
    console.log("Initial arr:", arr); // [1, 2, 3]

    arr = [5, 6, 7]; // 重新赋值参数变量，指向一个新数组

    console.log("Reassigned arr:", arr); // [5, 6, 7]
    console.log("--- End of reassignArrayParameter function ---");
}

let anotherArray = [1, 2, 3];

console.log("Before function call:");
console.log("anotherArray:", anotherArray); // [1, 2, 3]

reassignArrayParameter(anotherArray);

console.log("After function call:");
console.log("anotherArray:", anotherArray); // [1, 2, 3] (unchanged!)

这些行为都与普通对象保持一致，再次印证了“引用地址的值传递”的说法。

4.6 对象解构作为参数 (ES6+)

ES6引入的对象解构（Destructuring Assignment）在函数参数中的应用，有时也会带来一些疑问。然而，其底层机制仍然是值传递。解构操作只是从传入的对象中提取出指定的属性值，这些属性值会作为独立的局部变量在函数作用域内创建。

function processUser({ name, age, address }) {
    console.log("--- Inside processUser function ---");
    console.log("Initial name:", name);      // John
    console.log("Initial age:", age);        // 25
    console.log("Initial address:", address); // { city: "London", street: "Main St" }

    name = "Jane"; // 修改局部变量name (基本类型)
    age += 5;      // 修改局部变量age (基本类型)
    address.city = "Manchester"; // 修改传入对象的address属性 (对象属性修改)

    console.log("Modified name:", name);            // Jane
    console.log("Modified age:", age);              // 30
    console.log("Modified address.city:", address.city); // Manchester
    console.log("--- End of processUser function ---");
}

let user = {
    name: "John",
    age: 25,
    address: { city: "London", street: "Main St" }
};

console.log("Before function call:");
console.log("user.name:", user.name);           // John
console.log("user.age:", user.age);             // 25
console.log("user.address.city:", user.address.city); // London

processUser(user);

console.log("After function call:");
console.log("user.name:", user.name);           // John (unchanged, because 'name' was a primitive copy)
console.log("user.age:", user.age);             // 25 (unchanged, because 'age' was a primitive copy)
console.log("user.address.city:", user.address.city); // Manchester (changed, because address was a reference copy, and its property was mutated)

解析：

当 processUser(user) 被调用时：

  1. user.name 的值 "John" 被复制给函数参数 name。
  2. user.age 的值 25 被复制给函数参数 age。
  3. user.address 的引用地址（假设为 ADDR_A）被复制给函数参数 address。
  • name = "Jane"; 和 age += 5; 仅仅修改了函数内部的局部基本类型变量 name 和 age 的副本，不会影响外部 user.name 和 user.age。
  • address.city = "Manchester"; 则是通过 address 这个引用副本，找到了原始的 address 对象，并修改了其 city 属性。由于外部的 user.address 也指向同一个对象，因此外部会看到这个改变。

这再次完美符合“值传递”的原则，只是传递的是不同类型的值（基本类型的值本身，对象的引用地址的值）。

五、 避免副作用：拥抱不可变数据与纯函数

理解了JavaScript的参数传递机制后，我们发现对于对象类型，函数内部的修改确实可能影响到外部。这在许多情况下是期望的行为，但有时也会带来难以预料的副作用，导致代码难以维护和调试。为了写出更健壮、更可预测的代码，我们应该积极采纳不可变数据（Immutable Data）模式和纯函数（Pure Functions）的概念。

5.1 什么是副作用？

副作用是指一个函数在执行过程中，除了返回一个值之外，还修改了其作用域之外的某些状态。对于对象参数而言，如果函数修改了传入对象的属性，那么它就产生了副作用。

5.2 什么是不可变数据？

不可变数据是指一旦创建，就不能再被修改的数据。如果需要对不可变数据进行“修改”，实际上是创建了一个新的数据副本，然后在新副本上进行操作。

优点：

  • 可预测性： 数据不会在不经意间被修改，更容易理解代码行为。
  • 调试方便： 减少了状态变化的复杂性，更容易定位bug。
  • 并发安全： 在多线程或异步环境中，不可变数据是天然线程安全的。
  • 优化性能： 有些库（如React）可以通过比较引用来快速判断数据是否发生变化，从而进行渲染优化。

5.3 什么是纯函数？

纯函数是指满足以下两个条件的函数：

  1. 相同的输入，相同的输出： 给定相同的输入，它总是返回相同的输出。
  2. 无副作用： 它不会修改任何外部状态，包括传入的参数对象。

优点：

  • 易于测试： 只需要测试输入和输出。
  • 易于缓存： 可以缓存函数的计算结果（memoization）。
  • 易于组合： 纯函数可以更容易地组合起来构建复杂逻辑。

5.4 实现不可变数据和纯函数的技术

为了避免修改原始对象参数，我们可以在函数内部创建参数的副本，并在副本上进行操作。

5.4.1 浅拷贝 (Shallow Copy)

浅拷贝只会复制对象的第一层属性。如果属性值是基本类型，则直接复制；如果属性值是另一个对象（引用类型），则复制的是其引用地址，这意味着新旧对象仍然共享内部的子对象。

  • 使用扩展运算符 (...)： 这是ES6中最简洁、最常用的浅拷贝方法。

    // 拷贝对象
const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = { ...originalObject };
copiedObject.a = 10;
copiedObject.b.c = 20; // 这会影响 originalObject.b.c
console.log(originalObject); // { a: 1, b: { c: 20 } }
console.log(copiedObject);   // { a: 10, b: { c: 20 } }

// 拷贝数组
const originalArray = [1, { a: 2 }, 3];
const copiedArray = [...originalArray];
copiedArray[0] = 10;
copiedArray[1].a = 20; // 这会影响 originalArray[1].a
console.log(originalArray); // [1, { a: 20 }, 3]
console.log(copiedArray);   // [10, { a: 20 }, 3]

  • 使用 Object.assign()： 也可以用于浅拷贝对象。

    const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = Object.assign({}, originalObject);
copiedObject.a = 10;
copiedObject.b.c = 20; // 同样会影响 originalObject.b.c
console.log(originalObject); // { a: 1, b: { c: 20 } }
console.log(copiedObject);   // { a: 10, b: { c: 20 } }

  • 使用 Array.prototype.slice() 或 Array.from()： 用于浅拷贝数组。

    const originalArray = [1, { a: 2 }, 3];
const copiedArraySlice = originalArray.slice();
const copiedArrayFrom = Array.from(originalArray);

5.4.2 深拷贝 (Deep Copy)

深拷贝会递归地复制对象及其所有嵌套的子对象，确保新旧对象之间完全独立。

  • 使用 JSON.parse(JSON.stringify())： 简单粗暴，但有局限性。

    • 无法复制函数、undefined、Symbol、BigInt。
    • 无法处理循环引用。
    • Date 对象会被转换为字符串。
    • 正则表达式会变成空对象。 
      const originalObject = { a: 1, b: { c: 2 }, d: new Date(), e: function() {} };
const deepCopiedObject = JSON.parse(JSON.stringify(originalObject));
deepCopiedObject.b.c = 20;
console.log(originalObject);    // { a: 1, b: { c: 2 }, d: "2023-10-27T...", e: undefined }
console.log(deepCopiedObject);  // { a: 1, b: { c: 20 }, d: "2023-10-27T...", e: undefined }
// 注意：函数e丢失，日期d变为字符串

  • 使用 structuredClone() (Web API / Node.js v17+)： 现代的深拷贝方法，功能更强大，可以处理循环引用，支持更多类型（如Date、RegExp、Map、Set、Blob、File等）。

    const originalObject = {
    a: 1,
    b: { c: 2 },
    d: new Date(),
    e: /test/g,
    f: new Map([['key', 'value']])
};
originalObject.self = originalObject; // 循环引用

try {
    const deepCopiedObject = structuredClone(originalObject);
    deepCopiedObject.b.c = 20;
    deepCopiedObject.d.setFullYear(2000); // 修改副本的Date对象
    deepCopiedObject.f.set('newKey', 'newValue');

    console.log(originalObject.b.c); // 2
    console.log(deepCopiedObject.b.c); // 20
    console.log(originalObject.d.getFullYear()); // 当前年份
    console.log(deepCopiedObject.d.getFullYear()); // 2000
    console.log(originalObject.f.size); // 1
    console.log(deepCopiedObject.f.size); // 2
    console.log(deepCopiedObject.self === deepCopiedObject); // true (循环引用也被正确拷贝)

} catch (e) {
    console.error("structuredClone not available or error:", e);
    // Fallback for older environments if needed
}

    structuredClone() 是目前推荐的深拷贝方法，但在旧版浏览器或Node.js环境中可能不被支持。

  • 使用第三方库： 对于复杂的深拷贝需求，可以考虑使用如Lodash的 _.cloneDeep()。

5.5 实践：将函数改造为纯函数

// 非纯函数 (有副作用)
function addAgeMutating(person) {
    person.age += 1;
    return person;
}

let user1 = { name: "Alice", age: 30 };
let updatedUser1 = addAgeMutating(user1);
console.log("Mutated user1:", user1);         // { name: "Alice", age: 31 }
console.log("Updated user1:", updatedUser1); // { name: "Alice", age: 31 }
console.log("user1 === updatedUser1:", user1 === updatedUser1); // true (指向同一个对象)

// 纯函数 (无副作用)
function addAgePure(person) {
    // 创建person对象的浅拷贝，修改age属性
    // 如果person有嵌套对象，且该嵌套对象也需要修改，则需要更深层次的拷贝或多层解构
    return { ...person, age: person.age + 1 };
}

let user2 = { name: "Bob", age: 25 };
let updatedUser2 = addAgePure(user2);
console.log("Original user2:", user2);         // { name: "Bob", age: 25 } (未被修改)
console.log("Updated user2:", updatedUser2); // { name: "Bob", age: 26 }
console.log("user2 === updatedUser2:", user2 === updatedUser2); // false (指向不同对象)

// 针对嵌套对象的纯函数操作
function updateAddressCityPure(person, newCity) {
    // 确保address对象也被拷贝，而不是直接引用
    return {
        ...person,
        address: {
            ...person.address, // 拷贝address对象
            city: newCity      // 修改city属性
        }
    };
}

let user3 = { name: "Charlie", age: 35, address: { city: "London", street: "High St" } };
let updatedUser3 = updateAddressCityPure(user3, "Paris");
console.log("Original user3:", user3); // { name: "Charlie", age: 35, address: { city: "London", street: "High St" } }
console.log("Updated user3:", updatedUser3); // { name: "Charlie", age: 35, address: { city: "Paris", street: "High St" } }
console.log("user3 === updatedUser3:", user3 === updatedUser3); // false
console.log("user3.address === updatedUser3.address:", user3.address === updatedUser3.address); // false (因为address也被拷贝了)

通过采纳不可变数据模式和纯函数，我们可以大大提高代码的健壮性和可维护性。

六、 常见误区与最佳实践

理解了JavaScript参数传递的深层机制后，我们可以总结一些常见的误区并提出相应的最佳实践。

6.1 常见误区

  1. 误区一：认为JavaScript对对象是“引用传递”。

    • 真相： 即使是对象，传递的也是其内存地址的“值”的副本。这个副本本身是独立的，但它指向的内存位置是共享的。
    • 表现： 函数内修改对象属性会影响外部，但函数内重新赋值参数变量不会影响外部。

  2. 误区二：混淆浅拷贝和深拷贝。

    • 表现： 使用扩展运算符或 Object.assign 进行“拷贝”后，认为所有嵌套对象也完全独立了，结果内部对象仍然被共享修改。
    • 真相： 浅拷贝只复制第一层，嵌套对象仍然是引用。

  3. 误区三：不加区分地修改函数参数。

    • 表现： 无论传入的是基本类型还是对象，都在函数内部直接修改参数，导致不可预测的副作用。
    • 真相： 对于对象类型参数，直接修改其属性会影响外部。

6.2 最佳实践

  1. 始终记住：JavaScript是值传递。

    • 对于基本类型，传递的是值的副本。
    • 对于对象，传递的是引用地址值的副本。
    • 这个核心概念将帮助你预判代码行为。

  2. 尽可能保持函数纯粹：

    • 除非函数明确的职责就是修改外部状态（例如，DOM操作函数），否则尽量编写纯函数。
    • 如果函数需要修改对象，且不希望影响原始对象，请在函数内部创建对象的副本，并在副本上操作。使用 structuredClone() 或扩展运算符进行拷贝。

  3. 明确函数意图：

    • 如果一个函数确实需要修改传入的对象（例如，一个优化器或数据清理器），请在函数名或文档中明确指出其“破坏性”（mutating）行为，例如 mutateUser(user) 而不是 processUser(user)。

  4. 善用 const 声明：

    • 虽然 const 不能阻止对象属性的修改，但它可以防止参数变量在函数内部被重新赋值。这可以避免像 obj = { ... } 这样的操作意外地切断与原始对象的关联。 
      function processData(constObj) {
// constObj = {}; // 这会导致 TypeError: Assignment to constant variable.
constObj.prop = "new value"; // 这是允许的，因为修改的是对象属性
}

  5. 警惕嵌套对象的修改：

    • 当处理包含嵌套对象的参数时，如果需要保证完全的不可变性，请确保进行深拷贝或在每一层都使用扩展运算符创建新对象。

  6. 利用ES6+特性进行防御性编程：

    • 对象和数组的扩展运算符 (...) 是创建浅拷贝的强大工具。
    • 解构赋值可以在函数签名中直接提取所需属性，避免直接操作整个对象。

七、 总结表格

为了方便大家记忆和对比，这里用表格总结一下JavaScript参数传递的核心行为：

特性 / 数据类型 基本数据类型 (Number, String, Boolean等) 对象类型 (Object, Array, Function等)
实际传递机制 值传递（传递值的副本） 值传递（传递引用地址值的副本）
函数内部行为 param = newValue param = newObject
对外部变量影响 无影响。
函数内部修改参数，只影响副本。		 无影响。
函数内部重新赋值参数变量，只影响副本。
函数内部行为 N/A param.property = newValue
对外部变量影响 N/A 有影响。
函数内部修改对象属性，外部变量会看到改变，因为指向同一块内存。
不可变性 本身不可变。 本身可变。
推荐实践 直接使用即可。 尽可能创建副本进行操作，保持纯函数。

常用拷贝方法一览：

| 方法 | 拷贝类型 | 适用范围 | 优点 | 缺点 |
| structuredClone() | 深拷贝 | 对象、数组、Map、Set、Date、RegExp、Blob、File等几乎所有可克隆的简单结构化数据。 | 功能强大，可以处理循环引用。 | 无法拷贝函数、DOM节点、Error对象等不可结构化的数据。
| 其他注意事项 | Null、Undefined 也是基本类型。 | null 会被处理为 null。当值属性为 undefined 或函数时，在 JSON.stringify 过程中会被忽略。 |

尾声

通过今天的深入探讨，我们应该已经彻底厘清了JavaScript参数传递的机制。它并非简单的“传值”或“传引用”，而是一种统一的“值传递”策略，只不过对于对象而言，这个“值”恰好是内存中的引用地址。这种机制决定了我们在函数内部对参数的不同操作会带来不同的外部影响。

掌握这一核心原理，是我们写出高质量、可维护JavaScript代码的基石。在实际开发中，尤其是在团队协作和大型项目中，理解并遵循不可变数据模式和纯函数原则，将极大地降低代码的复杂性，提高可预测性和健鲁性。希望今天的讲解能帮助大家解决长期以来的困惑，并在未来的编程实践中更加得心应手。谢谢大家！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注