The difference between JavaScript shallow copy and deep copy

Before understanding what shallow copy and deep copy are, you must first understand the storage characteristics of value types and reference types in JavaScript.

1. Value types are divided into two types:
Basic data types: string, number, boolearn, undefined, null
Composite data types: Array, Object, Function, Date, RegExp……

2. Assignment
```2.1 Basic data type assignment example

   var num = 123;
   var num2 = num;

"
* The storage characteristics of value type assignment, copy all the data in the variable copies, stored in the new variable.
* `var num = 123` means that the number stored in the variable is 123.
* Then copy the data, that is, copy 123. Then there are 2 in the memory data
* Assign the copied data to `num2`. Changes in the variable value of num2 will not affect the variable value of num
* Its characteristic is that there are **two copies of data** in the memory.


"2.2 Composite data type assignment example

var o = { name: '张三' };
var obj = o;

"
* Assignment is to copy the data stored in variable o, and then assign the data to obj
* The characteristic is that there is only one copy of data in the memory, and the name attribute values ​​of object o and object obj point to the same address.
* Problem: Modifying the name attribute in object obj will affect the corresponding name attribute in the original object o.

Then the question is, how can a composite data type assign a value to another object without affecting its own value when another object modifies the value?
The following is about it? Let me talk about my understanding of deep copy and shallow copy:

# Deep copy and shallow copy

1. What is deep copy and what is shallow copy

Shallow copy:* Only the attributes of the current object are copied, and when the attributes of the current object are reference types, this is not considered.
*The attributes are reference types, and the copied object references the address. If it is changed, it will affect the copied object attributes. .

Deep copy: * All reference structures of the current object's data are copied, and the data is independent in memory.

*The attribute is a reference type. If it is changed, it will not Will affect the copied object properties


2. Implement deep copy code encapsulation

var deepCopy = function () {
   // 1, 创建一个对象
   var temp = {};
   // 2, 拷贝属性, 判断如果是引用类型需要深拷贝
   for ( var k in this ) {
      if ( typeof this[ k ] === 'object' ) {
         temp[ k ] = this[ k ].deepCopy();
      } else {
         temp[ k ] = this[ k ];
      }
      // temp[ k ] = this[ k ];
   }
   // 3, 返回对象
   return temp;
};

Test example:

var car = { name: '法拉利' };
var p = { name: '张三', age: 19, gender: '男', car: car };
//给对象car和对象p动态添加 拷贝的 方法
car.deepCopy = deepCopy;
p.deepCopy = deepCopy;
//重新定义一个newP对象，将对象p中的所有属性与方法都赋值给newP。
var newP = p.deepCopy();
//这个时候修改对象p中的属性方法对应的值时，如果在没有调用封装的深拷贝的函数时，newP的值也会相应改变。
//调用了深拷贝的函数之后，即使对象p中的值改变，也不会影响newP中值。
p.name = '李四';
p.age = 20;
p.gender = '女';
p.car.name = '兰博基尼';

The above is the implementation. Deep copy method

The above is the detailed content of The difference between JavaScript shallow copy and deep copy. For more information, please follow other related articles on the PHP Chinese website!