首页 >web前端 >js教程 >JavaScript 如何处理原始类型和对象的值传递和引用传递?

JavaScript 如何处理原始类型和对象的值传递和引用传递?

Patricia Arquette
Patricia Arquette原创
2024-12-18 12:54:11956浏览

How Does JavaScript Handle Pass-by-Value and Pass-by-Reference with Primitive Types and Objects?

JavaScript 值传递与引用传递

在 JavaScript 中,所有变量都是按值传递,这意味着原始值的副本被创建并传递给函数。但是,当值是对象(例如数组或对象字面量)时,副本是对原始对象的引用。

对函数参数的影响

  • 原语: 当原语(例如数字、字符串)传递给函数时,对函数所做的任何更改函数内的值仅限于函数的局部范围,不会影响函数外部的原始变量。
  • 对象引用:当对象引用传递给函数时,函数内对对象属性所做的更改会反映在原始对象中,甚至在函数外部也是如此。

对外部变量的影响函数

  • 按引用传递:对象引用通过引用传递,这意味着在函数内对对象属性所做的更改将影响原始对象的属性,但函数内对引用本身所做的任何更改(例如重新分配)不会影响原始引用变量。
  • 按值传递:按值传递的原始值和对象引用不会影响函数外部的原始变量。

示例

function f(a, b, c) {
  a = 3; // Reassignment changes the local variable only.
  b.push("foo"); // Property change affects the original object.
  c.first = false; // Property change affects the original object.
}

const x = 4;
let y = ["eeny", "miny", "mo"];
let z = { first: true };
f(x, y, z);

console.log(x, y, z.first); // Output: 4, ["eeny", "miny", "mo", "foo"], false

在上面的示例中,b 和 c 对象的更改反映在

深入示例:

function f() {
  const a = ["1", "2", { foo: "bar" }];
  const b = a[1]; // Copy the reference to the original array element
  a[1] = "4"; // Change the value in the original array
  console.log(b); // Output: "2" (Original value of the copied reference)
}

在第一个示例中,即使 a 已被修改, b 仍然保留原始值,因为它是引用的副本。

function f() {
  const a = [{ yellow: "blue" }, { red: "cyan" }, { green: "magenta" }];
  const b = a[1]; // Copy the reference to the original object
  a[1].red = "tan"; // Change the property in the original object
  console.log(b.red); // Output: "tan" (Property change is reflected in both variables)
  b.red = "black"; // Change the property through the reference
  console.log(a[1].red); // Output: "black" (Property change is reflected in both variables)
}

在第二个示例中,更改为a[1].red 会影响 a 和 b,因为它们共享相同的对象引用。

创建独立副本

要创建对象的完全独立副本,您可以使用 JSON.parse() 和 JSON.stringify() 方法分别反序列化和序列化对象。例如:

const originalObject = { foo: "bar" };
const independentCopy = JSON.parse(JSON.stringify(originalObject));

以上是JavaScript 如何处理原始类型和对象的值传递和引用传递?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn