JS函数参数传递是值传递还是引用传递？

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JS函数参数传递机制：值传递还是引用传递？》，聊聊，我们一起来看看吧！

JavaScript函数参数传递本质是值传递，原始类型传值副本，对象类型传引用地址副本，因此修改对象属性会影响外部对象，但重新赋值参数不影响。

JavaScript 的函数参数传递机制，核心就一句话：它永远是值传递。无论是原始类型（如数字、字符串）还是对象类型（包括数组、函数），传递的都是变量的值。只不过，对于对象而言，这个“值”是一个指向内存中实际对象的引用（或者说内存地址），而不是对象本身。所以，我们看到的“引用传递”现象，本质上是“引用地址的值传递”。

解决方案

理解 JavaScript 参数传递的关键在于区分原始值和引用值。当我们把一个变量作为参数传递给函数时，JavaScript 会创建这个参数的一个局部副本。

对于原始值类型（number, string, boolean, null, undefined, symbol, bigint），这个局部副本就是原始值本身的一个精确拷贝。这意味着，你在函数内部对这个参数的任何修改，都只会影响到这个局部副本，而不会触及到函数外部的原始变量。

function modifyPrimitive(num) {
  num = num + 10;
  console.log("Inside function (primitive):", num); // 20
}

let myNumber = 10;
modifyPrimitive(myNumber);
console.log("Outside function (primitive):", myNumber); // 10 (unaffected)

而对于对象类型（Object, Array, Function），情况就显得有些微妙了。此时传递的“值”并不是对象本身，而是存储在变量中的那个指向对象内存地址的“引用”。函数接收到的是这个引用地址的一个副本。这意味着，函数内部的参数和外部的原始变量现在都指向内存中的同一个对象。因此，如果你通过这个引用去修改对象的属性，那么外部的原始对象也会随之改变，因为它们指向的是同一块内存区域。

function modifyObjectProperties(obj) {
  obj.name = "Jane Doe";
  obj.age = 30;
  console.log("Inside function (object properties):", obj); // { name: 'Jane Doe', age: 30 }
}

let myObject = { name: "John Doe", age: 25 };
modifyObjectProperties(myObject);
console.log("Outside function (object properties):", myObject); // { name: 'Jane Doe', age: 30 } (affected)

然而，如果你在函数内部尝试将参数重新赋值为一个全新的对象，那么这个操作只会改变函数内部局部参数的指向，使其指向新的内存地址，而不会影响到函数外部的原始变量。因为原始变量依然持有它最初的那个引用地址。

function reassignObject(obj) {
  obj = { city: "New York" }; // obj现在指向了一个全新的对象
  console.log("Inside function (reassigned object):", obj); // { city: 'New York' }
}

let anotherObject = { country: "USA" };
reassignObject(anotherObject);
console.log("Outside function (reassigned object):", anotherObject); // { country: 'USA' } (unaffected)

这三个例子，在我看来，基本就涵盖了所有关于 JavaScript 参数传递的“真相”了。

为什么很多人会误解为“引用传递”？

说实话，这种误解真的太普遍了，甚至我刚开始接触 JavaScript 的时候也曾一度困惑。我想，这主要是因为当我们在函数内部修改了传入对象的属性时，函数外部的原始对象也确实发生了变化，这看起来简直就是“引用传递”的典型行为啊！在许多其他语言（比如 C++ 的引用）中，这种行为就是引用传递的标志。所以，把这种现象直接归结为“引用传递”，似乎是直观且“符合经验”的。

但问题在于，JavaScript 的“引用”和 C++ 里的“引用”是不同的概念。JavaScript 传递的那个“引用”，本身也是一个值。你可以把它想象成一个门牌号或者内存地址。当你把一个对象的门牌号传给函数时，函数拿到的只是这个门牌号的副本。函数内部和外部的变量，现在都有了同一个门牌号，所以它们都能找到同一栋房子。你通过门牌号副本去修改房子内部的装修，房子当然会变。但是，如果你在函数内部把这个门牌号副本换成了另一个新房子的门牌号，那只是你手里的门牌号变了，外面那个人手里的门牌号（指向老房子）可没变。

这种“看起来像引用传递，但实际是值传递”的机制，其实是 JavaScript 设计哲学中的一个权衡。它既提供了操作共享对象的能力，又避免了像 C++ 那样直接操作内存地址可能带来的复杂性和风险。理解这一点，就能避开很多潜在的坑。

深入理解：原始值与对象在内存中的存储差异

要彻底搞清楚参数传递，我们不得不稍微深入一点，看看 JavaScript 在内存里是怎么“玩”的。这背后其实是原始值和对象在内存中存储方式的根本区别。

当我们声明一个原始值变量，比如 let a = 10;，通常情况下（虽然现代 JavaScript 引擎有优化，但从概念上理解），这个 10 这个值是直接存储在变量 a 所占据的内存空间里的，我们称之为栈内存（Stack）。栈内存的特点是结构简单、存取速度快，但空间有限，主要用于存储原始值和函数调用的上下文。当你把 a 传递给函数时，函数参数会开辟一个新的内存空间，把 10 这个值复制一份放进去。两者之间再无瓜葛。

而当我们声明一个对象变量，比如 let obj = { name: "Alice" };，事情就完全不同了。{ name: "Alice" } 这个实际的对象数据，是存储在堆内存（Heap）中的。堆内存的特点是空间大、灵活，可以存储任意大小的复杂数据结构，但存取速度相对较慢。变量 obj 本身在栈内存中存储的，并不是对象的所有数据，而是一个指向堆内存中那个实际对象数据的“地址”（或者叫引用）。

所以，当 obj 作为参数传递给函数时，函数接收到的，正是这个“地址”的副本。函数内部的参数变量，现在也拥有了同一个地址。它们就像两把钥匙，都能打开同一扇门，进入同一间屋子。你通过其中一把钥匙进入屋子，改变了屋子里的家具摆设，另一把钥匙再进去时，看到的就是改变后的样子。但如果你用其中一把钥匙去配了一把新屋子的钥匙，那和老屋子就没关系了。这种内存模型，是理解所有 JavaScript 引用行为的基础。

实际开发中如何避免参数传递带来的“意外”？

在日常开发中，参数传递带来的“意外”通常是指函数内部对对象参数的修改，不经意间影响了函数外部的原始对象，导致了难以追踪的副作用。要避免这种问题，有几个策略非常实用：

1. 明确意图：是否需要修改原对象？ 在编写函数时，首先要问自己：这个函数是否应该修改传入的对象？如果答案是“不应该”，那么就必须采取措施来保护原始对象。如果答案是“应该”，那么就需要在函数签名或文档中明确指出这一点，让调用者知道函数会产生副作用。

2. 创建浅拷贝（Shallow Copy） 当你只需要修改对象的第一层属性，且不希望影响原始对象时，浅拷贝是一个简单有效的办法。

   • 对象： 使用 Object.assign({}, originalObject) 或 ES6 的展开运算符 {...originalObject}。

     function processUser(user) {
       const newUser = { ...user }; // 创建一个浅拷贝
       newUser.status = "active";
       return newUser;
     }
     let userProfile = { id: 1, name: "Bob" };
     let activeUser = processUser(userProfile);
     console.log(userProfile); // { id: 1, name: 'Bob' } (未被修改)
     console.log(activeUser);  // { id: 1, name: 'Bob', status: 'active' }

   • 数组： 使用 Array.prototype.slice() 或展开运算符 [...originalArray]。

     function addId(items) {
       const newItems = [...items]; // 创建一个浅拷贝
       newItems.push(newItems.length + 1);
       return newItems;
     }
     let myArr = [10, 20];
     let updatedArr = addId(myArr);
     console.log(myArr);       // [10, 20] (未被修改)
     console.log(updatedArr);  // [10, 20, 3]

     需要注意的是，浅拷贝只复制了对象的第一层。如果对象内部嵌套了其他对象，那么这些嵌套对象仍然是共享的引用。

3. 创建深拷贝（Deep Copy） 如果你的对象包含多层嵌套，并且你希望完全独立地操作这个对象，那么你需要进行深拷贝。

   • JSON.parse(JSON.stringify(object))： 这是最常见也最简单的深拷贝方法，但它有局限性。它不能拷贝函数、undefined、symbol、Date 对象（会变成字符串）、正则表达式等。对于只包含基本数据类型和普通对象的复杂数据结构，它通常足够用。

     function processComplexObject(data) {
       const newData = JSON.parse(JSON.stringify(data));
       newData.details.age = 40;
       return newData;
     }
     let complexObj = { name: "Charlie", details: { age: 35, city: "London" } };
     let processedObj = processComplexObject(complexObj);
     console.log(complexObj.details.age); // 35
     console.log(processedObj.details.age); // 40

   • 第三方库： 对于更复杂的场景，例如需要拷贝函数、循环引用等，Lodash 的 _.cloneDeep() 等专业库是更好的选择。

4. 采用函数式编程思想：纯函数 尽量编写“纯函数”（Pure Function）。纯函数有两个特点：

   • 给定相同的输入，总是返回相同的输出。
   • 不会产生任何副作用，即不修改函数外部的任何状态（包括传入的对象参数）。 遵循这个原则，可以大大减少代码中的“意外”和 bugs。

通过这些实践，我们不仅能更清晰地理解 JavaScript 的参数传递机制，也能在实际开发中写出更健壮、更可维护的代码。毕竟，代码的健壮性往往比一时的“简洁”更重要。

到这里，我们也就讲完了《JS函数参数传递是值传递还是引用传递？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于对象类型,引用传递,值传递,深拷贝,JS参数传递的知识点！