JavaScript：关于引用类型重新赋值和修改属性的差异

前言

前段时间写代码的时候，混淆了引用类型重新赋值 和 修改属性，因此这里转载一篇博文标记一下。

区别：浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制；

• 引用类型浅拷贝：
  1. 定义：浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存；
  2. 实现：Object.assign()实现浅拷贝及一层的深拷贝

• 引用类型深拷贝：
  1. 定义：深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象；
  2. 实现：

  • 使用JSON.stringify和JSON.parse实现深拷贝：JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象；
    缺陷：它会抛弃对象的constructor，深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object；这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，也就是说，只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON；
  • jquery 提供一个$.extend可以用来做深拷贝；

• 引用类型重新赋值： 见下文讲解

• 引用类型修改属性： 见下文讲解

---

如何理解JavaScript中给变量赋值，是引用还是复制

一、JavaScript中值的类型

JavaScript中的值分为2大类：基本类型和引用类型。每种类型下面又分为5种类型。

基本类型：

     数字类型：Number；字符串类型：String；布尔类型：Boolean(true和false)；Undefined；Null。

引用类型：

     函数、数组、日期、正则、错误。

注意：所有的引用类型都是对象，也就是Object对象下的一个类。

二、值和引用

    在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。

    对基本类型，是按值访问的，即通过值复制的方式来赋值和传递。

    对引用类型，是按引用访问的，即通过引用复制的方式赋值和传递。在操作对象时，实际上是在操作对象的引用，而不是实际的对象。

下面通过示例来理解两者的区别。

例1：

    以数字基本类型值为例，将数字赋给变量a，此时a持有的是该值的一个复制本。再将a赋给变量b，此时b持有的是该值得另一个复制本，不论b怎么变化，都不会影响a的值。

    注意：所有的基本类型值都是不会变的。比如一个字符串"abcd"，它的值永远是"abcd"，不可能发生改变。如果把它赋给一个变量，var x="abcd"，然后给x赋其他的值，那么x的值可以改变，但是abcd"这个字符串本身的值没有发生任何变化。包括使用某些自带的函数，比如x.toUpperCase()；这个函数返回的是x字符串的大写形式"ABCD"。注意，是“返回”一个值，而不是改变原有的值。此时，变量x的值仍然是"adcd"，除非你使用了x=x.toUpperCase()。（即重新对变量赋值了）

    对于基本类型，将其值赋给一个变量时，就是将这个值赋值给了变量，值本身不会发生任何变化。在给变量重新赋值后，变量的值就变化了。变量之间是可以比较的，比较的就是他们本身的值。

例2：

    以数组引用类型为例。JavaScript支持在定义变量的时候同时给它赋值，即var a=[1,2,3]同时定义一个对象并将其赋值给变量。

    定义一个对象（数组[1,2,3]），此时这个对象在内存中建立。当给把这个对象赋值给一个变量时，变量a仅仅是对这个对象的引用，而不是将该对象复制到了该变量中。即变量a中存储的是指向对象的地址。将a的值赋给b，也即将a中的地址赋给了变量b。这是变量a和b都指向同一个对象。所以b值得改变就会直接引起对象本身的改变，因为变量a也指向这个数组，所以a的值肯定也会发生变化。

    注意：对象的比较与基本类型值不同。即使两个对象完全相同，比如两个完全相同的数组，它们也是不相等的。只有两个变量指向同一个对象时，它们才是相等的。如：

var a = [1,2,3],b = [1,2,3];
console.log(a===b);//false
var c=a;
console.log(c===a);//ture

 

例3：

    例3与例2的区别在于，对b进行了重新赋值操作，b就不再是引用a的指向，并与a的指向没有任何关系，而是指向了一个新的数组[1,2,3,4]，所以b的操作也不再影响到a指向的值。

例4：函数-无重新赋值

    将数组赋值给变量a后，a指向数组[1,2,3]。调用函数foo(a)之后，向数组中插入数字4，原数组发生变化，所以a也跟着变成[1,2,3,4]。

例5：函数-有重新赋值

• 定义数组[1,2,3]并赋值给变量a，a指向该数组。
• 调用函数foo(a)，执行的操作是：

        1、向原数组中插入数字4，原数组变成[1,2,3,4]；

        2、定义新数组[4,5,6]，并重新赋值给a。此时变量指向了新数组，原数组保持[1,2,3,4]不变；

        3、向变量中插入数字7，由于此时变量指向了新数组，所以此步操作改变了新数组[4,5,6]，新数组又变成另一个新数组[4,5,6,7]；

        4、执行console.log操作，显示的是这个最新的数组，即[4,5,6,7]。

• 函数外执行console.log操作。由于函数中，只有第一步操作改变了原数组，后续操作改变的是新赋值的数组[4,5,6]（新赋值之后，变量a指向了该新数组，所有后续操作，都是针对的新数组），所有该步操作的结果显示的是[1,2,3,4]。

例6：函数-清空当前引用的数组

• 定义数组[1,2,3]并赋值给变量a，a指向该数组。
• 调用函数foo(a)，执行的操作是：

        1、向原数组中插入数字4，原数组变成[1,2,3,4]；

        2、清空数组。由于此时变量仍然指向原数组，所以此处操作针对的是原数组，即清空原数组；

        3、向数组中插入数字4,5,6,7。由于没有重新赋值操作，变量仍然指向原数组，所以原数组变为新数组[4,5,6,7]；

        4、执行console.log操作，显示的是这个最新的数组，即[4,5,6,7]。

• 函数外执行console.log操作，由于函数中变量都没有重新赋值，所以每一步操作针对的都是原数组，最终原数组变成了这个最新的数组，即[4,5,6,7]。

三、更多例子

例1：

    当多个变量持有同一对象的引用时，通过其中的任何一个，都可以改变对象。

例2：

     对比代码可知，test1和test2的区别在于，变量a在test1中不断地赋值新的引用，导致a与b持有的引用不同，后面向a添加的属性，b都无法访问到。

---

转载原文地址：https://www.cnblogs.com/haidaojiege/p/6694271.html
参考文章地址：https://www.jianshu.com/p/cf1e9d7e94fb