JavaScript 的传值方式是什么

JavaScript 中的传值方式主要是 按值传递 和 按引用传递。在处理不可变的基本数据类型（如数字、字符串、布尔值）时，JavaScript 采用按值传递的方式；而在处理可变的对象类型时，则采用按引用传递。 这意味着当你操作基本类型的变量时，任何改变不会影响到原始值，因为这些修改发生在其副本上。反之，在操作对象时，由于变量持有的是对其内存中地址的引用，所以改变对象内的属性将会影响到所有引用该对象的变量。

展开来说，在JavaScript中，按值传递的本质是指当变量与另一个变量相互独立时，对其中一个变量的修改不会影响另一个。这里的“按值”传递，并不意味着仅仅复制值，更确切地说，是复制变量的副本到新的存储位置。因此，基本类型的数据是独立、不共享的。

一、基本数据类型的按值传递

基本数据类型包括：数字（Number）、字符串（String）、布尔值（Boolean）、null、undefined、Symbol（ES6新增）和BigInt（ES2020新增）。这些类型的数据在赋值或者传递给函数时，实际上是将值复制一份到新的变量或函数的参数中。

当函数外部的变量传递给函数内部时，相当于在函数内部创建了一个新的变量，并将外部变量的值复制过去。函数内部对这个参数的任何修改，都不会反馈到外部变量。

二、对象的按引用传递

相对于基本数据类型，对象类型（如对象、数组、函数等）在赋值或传递时，传递的是内存中对象地址的引用。这意味着，如果将一个对象赋值给另一个变量，实际上是将对象在内存中的地址复制给了新的变量，导致两个变量指向同一个对象。

当通过这个引用对对象进行修改时，无论是通过哪个变量进行的修改，都会反映到原始对象上，因此，看起来就像是通过“引用”传递。

例子理解按引用传递

考虑下面的代码段：

let obj1 = { value: 10 };

let obj2 = obj1;
obj2.value = 20;
console.log(obj1.value); // 输出 20

这段代码清晰地展示了按引用传递的机制：obj1 和 obj2 实际上指向同一个内存地址，因此通过 obj2 修改 value 属性同样影响到了 obj1。

三、函数中的传递机制

在函数中，无论是基本类型还是对象类型，传递的机制遵循JavaScript的传值和引用的原则。函数参数是局部变量，当向函数传递基本类型的数据时，函数内部对参数的修改不会影响到实际的变量；而传递对象时，则是传递对象引用的副本，函数内部对对象的修改会影响到实际的对象。

函数传递基本类型

function modify(x) {

  x = 10;
  return x;
}
let num = 5;
console.log(modify(num)); // 输出 10
console.log(num); // 输出 5

函数传递对象类型

function modify(obj) {

  obj.value = 10;
  return obj;
}
let myObj = { value: 5 };
console.log(modify(myObj).value); // 输出 10
console.log(myObj.value); // 也输出 10

四、理解误区与深拷贝、浅拷贝

JavaScript中的传递机制常常引起误解：

• 误区：经常有人认为对象是通过引用传递的。实际上，按照定义，JavaScript总是通过值传递的。但是，当值是对象时，传递的值是对象引用的副本。
• 浅拷贝与深拷贝：为了解决对象在传递时可能出现的问题（例如不希望原始对象被修改），可以使用浅拷贝或深拷贝。浅拷贝只复制一层对象的属性，而深拷贝则是递归复制对象的所有层级属性，创建一个完全独立的副本。

通过深入理解这些传值机制和相关概念，开发者可以更好地编写和调试JavaScript代码，避免常见的陷阱。

相关问答FAQs：

JavaScript的参数传递方式是什么？

传值方式指的是在函数调用时，实参将如何传递给形参。在JavaScript中，参数的传递方式有按值传递和按引用传递两种。

按值传递是什么意思？

按值传递是指将实参的值复制一份给形参，在函数内部对形参的修改不会影响到实参。常见的基本数据类型，如字符串、数字、布尔值等，在函数调用时是按值传递的。

按引用传递是什么意思？

按引用传递是指将实参的引用（内存地址）复制一份给形参，函数内部对形参的修改会直接影响到实参。常见的引用类型，如对象、数组等，在函数调用时是按引用传递的。

如何实现按引用传递？

在JavaScript中，可以通过将实参指向同一个对象或数组的引用，来实现按引用传递的效果。这样，在函数内部修改形参时，实参也会受到影响。

例如：

function updateArray(arr) {
  arr.push(4);
}

var myArray = [1, 2, 3];
updateArray(myArray);
console.log(myArray);  // [1, 2, 3, 4]

在上面的例子中，函数updateArray()接收一个数组作为参数，并在函数内部对该数组进行修改。传入的参数myArray和形参arr本质上指向同一个数组的引用，所以在updateArray()函数中对arr的修改会直接影响到myArray。