为了代码简洁性,引起值类型和引用类型赋值的错误说明

先看以下代码:
我们先声明一个变量

let a = { b:1,c:{d:2}}

执行以下代码:

if (情况一) {
  a.b = 3
}
if (情况二) {
  a.b = 4
}

有时我们为了代码的简洁性,会把代码优化成以下这样:

let variable = a.b
if (情况一) {
  variable = 3
}
if (情况二) {
  variable = 4
}
console.log(a) // 发现a里的b没变

我们执行这个简洁版代码之后,发现a里的b没有变,到底为什么呢?我们再继续看下以下代码:

let variabl1 = a.c
if (情况一) {
  variable1.d = 3
}
if (情况二) {
  variable1.d = 4
}
console.log(a) // 发现a里的c对象里的d发生变化

综合以上,我们发现a对象里的b是值类型,c是引用类型,当我们声明一个值类型的变量时,JavaScript会为其分配一块内存,用来存储该变量的值。当我们对该变量进行赋值时,JavaScript会将该值复制到新的内存空间中,并将新的内存地址赋给变量。

这意味着,每个值类型的变量都有自己独立的内存空间,它们之间互不影响。当我们修改一个值类型的变量时,实际上是在修改其所对应内存空间中的值,而其他变量仍然引用原来的值。

因此,在对值类型进行赋值、传递参数或返回值时,都是进行了一次浅拷贝,即将值复制到新的内存空间中,并且新的变量仍然是一个独立的值类型。

相比之下,引用类型在赋值时,只是将内存地址复制给了新的变量,而并没有为该变量创建新的内存空间。这意味着,多个变量指向同一块内存空间,它们共享同一个值。

如果我们对引用类型进行复制,只进行了一次浅拷贝,此时新的变量和原变量仍然引用同一个对象,当我们修改其中一个变量所指向的对象时,其他变量也会受到影响。因此,如果我们想要分开操作多个变量则需要进行深度克隆,创建一个新的对象并将其属性复制到新的对象中,以确保变量之间的独立性。

所以,我们有时不能一脑子想着代码简洁性,要懂得其中的原理,否则bug是躲不过的

你可能感兴趣的:(bug收集,js里的基本概念,javascript)