js中关于普通类型的赋值和引用类型的赋值

超、凢脫俗 2024-05-23 18:49 30阅读 0赞

#### 文章目录 ####

*  基本类型的赋值
 *   *  普通类型变量赋值代码解析
     *  基本类型赋值参考图
 *  引用类型的赋值：
 *   *  对象赋值代码解析
     *  引用类型赋值参考图：

--------------------

我们得知道，js中存在两种类型的变量，一种是`基本类型`（Number、String、Boolean、Undefined、Null，还有ES6中的Symbol），这些类型的变量存放的是变量的`数值`；一种则是`引用类型`，引用类型的值（对象）是引用类型的实例，变量存放的是`对象地址的引用`。

## 基本类型的赋值 ##

基本类型的变量赋值时保存的是那个变量数值的副本。

### 普通类型变量赋值代码解析 ###

var num1=1;
    var num2=num1;
    console.log(num1,num2);//1 1

例如，在这段代码中，`num2保存的就是num1数值的一个副本`。它们存在的联系就是，赋值的此刻，num2保存的数值和num1的数值相同，而**对num1之后的操作，无法影响num2**，同样的，**对num2的操作也影响不到num1**。

var num1=1;
    var num2=num1;
    console.log(num1,num2);//1 1
    num1=22;
    console.log(num1,num2);//22 1
    num2=33;
    console.log(num1,num2);//22 33

从这里就可以看出来，给num1赋值22的时候，num1的值从1变成了22，但num2的值保持不变；给num2赋值33的时候，num2的值从1变成了33，但是num1的数值还是上一次赋值完成时的22。

### 基本类型赋值参考图 ###

![9c38fc03957e44f899c2f70b481beced.png][]

**普通类型的变量复制会生成新的数值副本，彼此之间不再存在联系**。

## 引用类型的赋值： ##

引用类型的变量赋值的时候，**并不会将其对应的对象复制出一个副本**，而是将这个副本的**地址**给赋值操作的那个变量。

对象赋值的时候**实际上也是在复制值**，只不过和基本类型的赋值不一样，基本类型的值就是它本来存储的数据，但是**引用类型的变量存放的只是这个对象存储的地址的引用**，所以就算是复制了数值，也只是**把和这个对象地址的引用复制了一遍**，并**没有产生新的对象副本**。

### 对象赋值代码解析 ###

var object1={
        num:1};
    var object2=object1
    console.log(object1,object2);//{num: 1} {num: 1}

此时，object2存放的不是object1对象的副本，它们俩对应的是同一个对象。

从这里就能看出来，无论你是操作object1的num属性，还是操作object2的num属性，实际上都会带着object1和object2对应的对象一同变化，这就更说明了**它们实际上存放的数值是同一个对象地址的引用**。

### 引用类型赋值参考图： ###

![在这里插入图片描述][0dd6d655b2f54473921c4666bc0ec338.png]  
复制钱obj1指向一个对象（保存了这个对象地址的引用）。  
执行代码：`var obj2=obj1`后，**obj2也保存了同一个对象地址的引用**。

obj2保存的对象地址引用和obj1保存的对象地址引用是相同的，它们**指向了同一个对象**。

上面的对象复制属于一种**浅复制**，并没有复制对象的各个属性，关于如何做到**深复制**，也是需要研究学习的知识。

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[9c38fc03957e44f899c2f70b481beced.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/0d864e9ae16a4f999dec55cb6d5f0675.png
[0dd6d655b2f54473921c4666bc0ec338.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/e62c45443d524894982373d7cddf637a.png