正文

掌握JS函数参数传递：深入理解值传递与引用传递的区别

/0 浏览量
0401

JavaScript 是一种高级编程语言，它以其简洁的语法和灵活的动态类型系统而闻名。在 JavaScript 中，函数参数的传递方式是理解其行为和避免潜在错误的关键。本文将深入探讨 JavaScript 中函数参数的值传递和引用传递之间的区别。

值传递（Primitive Pass-by-Value）

在 JavaScript 中，基本数据类型（如数字、字符串、布尔值和 null）是通过值传递来传递给函数的。这意味着当我们将一个基本数据类型的变量作为参数传递给函数时，实际上传递的是该变量的值的一个副本。

示例：

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

let x = 5;
console.log(addOne(x)); // 输出 6
console.log(x); // 输出 5，x 的值没有改变

在上面的例子中，addOne 函数接收一个名为 num 的参数。由于 num 是一个基本数据类型（在这里是数字），当它被传递到函数中时，实际上传递的是其值 5 的一个副本。因此，在函数内部对 num 的任何修改都不会影响原始变量 x。

引用传递（Reference Pass-by-Reference）

JavaScript 中复杂数据类型（如对象和数组）是通过引用传递来传递给函数的。这意味着当我们将一个复杂数据类型的变量作为参数传递给函数时，实际上传递的是该变量的引用。

示例：

function addProperty(obj) {
  obj.newProperty = 'new value';
}

let person = { name: 'Alice' };
addProperty(person);
console.log(person); // 输出 { name: 'Alice', newProperty: 'new value' }

在这个例子中，person 是一个对象，因此当它被传递到 addProperty 函数时，传递的是对该对象的引用。在函数内部，我们添加了一个新的属性 newProperty 到该对象。由于我们传递的是引用，原始对象 person 被修改了。

注意事项：

  1. 对象字面量：当传递对象字面量时，传递的是对象的引用，而不是对象本身。这意味着如果两个函数都接收到相同的对象字面量作为参数，它们将指向同一个对象。
let obj1 = { a: 1 };
let obj2 = { a: 1 };

function modifyObject(obj) {
  obj.a = 2;
}

modifyObject(obj1);
console.log(obj1); // 输出 { a: 2 }
console.log(obj2); // 输出 { a: 1 }，obj2 没有被修改
  1. 原始数据类型包装：在函数内部，原始数据类型（如字符串、数字和布尔值）可以通过 new 操作符被包装成对象。这意味着在函数内部修改这些包装对象可能会导致意外的行为。
function modifyString(str) {
  str += ' modified';
}

let myString = 'original';
modifyString(myString);
console.log(myString); // 输出 'original'，myString 没有被修改

总结

理解 JavaScript 中函数参数的值传递和引用传递对于编写高效和可维护的代码至关重要。通过区分基本数据类型和复杂数据类型的传递方式，你可以更好地控制函数对数据的影响，并避免潜在的错误。希望本文能帮助你深入理解 JavaScript 函数参数传递的原理。

-- 展开阅读全文 --