返回

剖析JS原始值和引用值的奥秘,洞悉变量赋值之精髓

前端

原始值与引用值:本质剖析

在JavaScript中,变量可以保存两种类型的数据:原始值和引用值。原始值包括字符串、数字、布尔值、null和undefined。引用值包括对象、数组和函数。

原始值:不可变的简单数据类型

  • 原始值是简单的数据类型,存储在栈内存中。
  • 当您将原始值分配给变量时,JavaScript会创建一个该值的副本并将其存储在变量中。
  • 对原始值的任何更改都不会影响原始值本身,只会影响变量中存储的副本。

引用值:可变的复杂数据类型

  • 引用值是复杂的数据类型,存储在堆内存中。
  • 当您将引用值分配给变量时,JavaScript会在堆内存中创建一个该值并将其地址存储在变量中。
  • 对引用值的任何更改都会影响原始值本身,也会影响所有引用该值的变量。

按值传递:深入解析变量赋值机制

JavaScript中的所有函数都是按值传递的。这意味着当您将一个变量的值传递给函数时,函数会创建一个该值的副本并使用该副本。对函数中变量的任何更改都不会影响原始变量的值。

按值传递机制对于理解JavaScript中的变量赋值非常重要。例如,以下代码不会更改原始变量的值:

function changeNumber(num) {
  num = 10;
}

let number = 5;
changeNumber(number);
console.log(number); // Output: 5

在上面的代码中,当您将number变量的值传递给changeNumber函数时,函数会创建一个number的副本并使用该副本。函数中对副本的任何更改都不会影响原始number变量的值。

值拷贝与对象引用:理解变量赋值的本质

当您将一个对象或数组的值分配给变量时,JavaScript会创建一个该值的副本并将其存储在变量中。但是,该副本并不是对象的副本,而是一个指向对象的引用的副本。

这意味着对副本的任何更改都会影响原始对象。例如,以下代码会更改原始对象的属性值:

let person = {
  name: "John",
  age: 30
};

let personCopy = person;

personCopy.age = 35;

console.log(person.age); // Output: 35

在上面的代码中,当您将person对象的值分配给personCopy变量时,JavaScript会创建一个person对象的引用副本并将其存储在personCopy变量中。然后,当您更改personCopy对象的age属性时,您实际上是在更改原始person对象的age属性。

结语:掌握变量赋值,编写健壮代码

理解JS中原始值和引用值的区别以及按值传递的机制对于编写健壮的代码非常重要。通过掌握这些知识,您将能够避免意外更改原始变量的值并确保您的代码按预期工作。