函数参数有坑，你知道么

你是否曾经想过为什么在 JavaScript 中，有时候修改函数内的参数似乎会影响到原始值，而有时却不会呢？

今天探讨一下 JavaScript 中不同数据类型在函数参数传递中的秘密，帮助你更好地理解这一核心概念。

1. 数据类型概述

JavaScript 中的数据类型分为简单数据类型（基本数据类型）和复杂数据类型（引用数据类型）。

简单数据类型包括字符串、数字和布尔值。

复杂数据类型包括对象、数组和函数。

2. 按值传递 VS 按引用传递

在 JavaScript 中，参数传递有两种方式：按值传递和按引用传递。

了解这两者的区别对于正确理解函数参数的行为至关重要。

简单数据类型是按值传递的，而复杂数据类型是按引用传递的，即传递的是变量指向的内存地址。

3. 传递基本数据类型

基本数据类型的传递是比较直观的，因为它是按值传递的。

当我们传递字符串、数字或布尔值给函数时，函数内对参数的修改不会影响到原始值。

以下是一个例子：

function modifyPrimitive(param) {
  param = 'Modified'; // 不会影响原始值
}

let str = 'Original';
modifyPrimitive(str);
console.log(str); // 输出：Original，没有受到函数影响

4. 传递引用数据类型

引用数据类型的传递相对复杂一些。当我们传递对象、数组或函数给函数时，实际上是传递了它们的“地址”。

这就意味着，函数内部对这个“地址”进行的修改会影响到原始的对象。

以下是一个例子： 

function modifyReference(param) {
  param.name = 'Modified'; // 会影响原始对象
}

let obj = { name: 'Original' };
modifyReference(obj);
console.log(obj.name); // 输出：Modified，定义obj对象受到了函数的影响

敲黑板

有一些特殊情况需要我们特别小心。修改函数参数内部的属性会影响原始函数，但是重新赋值不会影响原始对象。

// 示例1：重新赋值不会影响原始对象
function assignNewObject(param) {
  param = { name: 'New Object' }; // 不会影响原始对象
}

let originalObj = { name: 'Original' };
assignNewObject(originalObj);
console.log(originalObj.name); // 输出：Original

// 示例2：修改函数参数内部的属性会影响原始对象
function modifyObjectProperty(param) {
  param.name = 'Modified'; // 会影响原始对象
}

let obj = { name: 'Original' };
modifyObjectProperty(obj);
console.log(obj.name); // 输出：Modified

在示例 1 中，我们重新为参数 param 赋予了一个新的对象，param 指向了一个新对象，不再指向之前的对象了，但这并不会影响到原始对象 originalObj 。

在示例 2 中，我们修改了参数 param 内部的属性，这确实影响了原始对象 obj 。

这是因为在 JavaScript 中，参数传递是按值传递的，但对于引用类型（如对象），传递的是其引用，因此修改引用指向的对象内部的属性会影响原始对象。

但如果在函数内部对参数重新赋值为新对象，这只会在函数内部产生一个新的局部引用，并不影响原始对象。

5. 结语

今天这个知识点看起来很简单，但是非常重要。在实际工作中，如果代码复杂了，定位问题，还是很麻烦的。

希望你在工作中能特别关注引用类型传递，稍不留神就有可能跟你的预期不符。