正文

掌握JS中的值传递和引用传递：揭秘函数传参的奥秘与陷阱

/0 浏览量
0404

在JavaScript中，理解值传递和引用传递的概念对于编写高效和可靠的代码至关重要。这两个概念决定了当我们将变量作为参数传递给函数时，函数内部对这些变量的操作如何影响原始变量。下面，我们将深入探讨JavaScript中的值传递和引用传递，并揭示其中的一些陷阱。

值传递

值传递（Primitive Passing）是JavaScript中的一种默认的参数传递方式。在值传递中，传递的是变量的实际值，而不是变量本身。

基本数据类型

对于基本数据类型（如数字、字符串、布尔值等），值传递是显而易见的。当你将一个基本数据类型的变量传递给函数时，函数内部得到的实际上是一个新的、独立的副本。

function addOne(num) {
    return num + 1;
}

let num = 5;
let result = addOne(num);
console.log(num); // 输出: 5
console.log(result); // 输出: 6

在上面的例子中，num 是一个基本数据类型的变量，当我们调用 addOne 函数时，它接收的是 num 的值，即 5。在函数内部对其进行修改并不会影响原始的 num 变量。

引用传递

引用传递（Reference Passing）发生在变量引用的是对象时。在JavaScript中，对象（包括数组、函数、对象等）是通过引用传递的。

对象的引用

当你将一个对象传递给函数时，传递的是对这个对象的引用，而不是对象的一个副本。这意味着函数内部对对象属性的操作会直接反映到原始对象上。

function changeColor(obj) {
    obj.color = 'blue';
}

let car = { color: 'red' };
changeColor(car);
console.log(car.color); // 输出: blue

在这个例子中，car 是一个对象，我们将其传递给 changeColor 函数。在函数内部，我们修改了 car 的 color 属性，由于传递的是引用，原始的 car 对象的 color 属性也被修改了。

深拷贝与浅拷贝

在引用传递中，有时我们可能希望创建对象的副本，而不是直接操作原始对象。这时就需要了解深拷贝和浅拷贝的概念。

浅拷贝

浅拷贝（Shallow Copy）创建一个新对象，并复制原始对象中所有的可枚举属性。如果属性值是基本数据类型，则复制的是值；如果是对象，则复制的是引用。

let car = { color: 'red', engine: { horsepower: 150 } };
let carCopy = { ...car }; // 使用展开运算符进行浅拷贝

carCopy.color = 'blue';
console.log(car.color); // 输出: red
console.log(carCopy.color); // 输出: blue

car.engine.horsepower = 180;
console.log(car.engine.horsepower); // 输出: 180
console.log(carCopy.engine.horsepower); // 输出: 180

在上面的例子中，虽然我们修改了 carCopy 的 color 属性，但 car 的 color 属性并没有改变。然而，由于 engine 属性是一个对象，它被共享了。

深拷贝

深拷贝（Deep Copy）创建一个新对象，并复制原始对象及其所有子对象的所有可枚举属性。对于嵌套对象，深拷贝会递归地复制每个子对象。

let car = { color: 'red', engine: { horsepower: 150 } };
let carDeepCopy = JSON.parse(JSON.stringify(car)); // 使用JSON序列化和反序列化进行深拷贝

carDeepCopy.color = 'blue';
console.log(car.color); // 输出: red
console.log(carDeepCopy.color); // 输出: blue

car.engine.horsepower = 180;
console.log(car.engine.horsepower); // 输出: 180
console.log(carDeepCopy.engine.horsepower); // 输出: 150

在这个例子中，由于我们使用了深拷贝，carDeepCopy 的 color 和 engine 属性都完全独立于原始的 car 对象。

总结

通过理解值传递和引用传递，你可以更好地控制JavaScript中函数传参的行为。值传递适用于基本数据类型，而引用传递适用于对象。了解浅拷贝和深拷贝可以帮助你创建对象的副本，而不是直接操作原始对象。在编写JavaScript代码时，注意这些概念可以帮助你避免一些常见的陷阱，并提高代码的健壮性。

-- 展开阅读全文 --