Detailed explanation of javascript deep copy (deepClone)

Javascript deep copy is a problem that beginners and even experienced developers often encounter and cannot understand javascript deep copy well.

Deep copy (deepClone)?

The opposite of deep copy is shallow copy. Many beginners are very confused when they come into contact with this concept.

Why use deep copy?

In many cases, we need to assign a value to a variable and assign a value to the memory address. However, when assigning a reference value type, it only shares a memory area, resulting in the assignment. The previous value remains consistent.

Look at a specific example

// 给test赋值了一个对象
var test = {
  a: 'a',
  b: 'b'
};
 
// 将test赋值给test2
// 此时test和test2是共享了同一块内存对象，这也就是浅拷贝
var test2 = test;
 
test2.a = 'a2';
 
test.a === 'a2'// 为true

Illustration:

It is now easy to understand why reference value type data affects each other.

Implementation

To implement a deep copy function, you have to talk about the numerical type of JavaScript.

Judge javascript type

There are the following basic types in javascript

Type description
undefined The undefined type has only one value, undefined, which is when the variable is not assigned a value The value
null The null type also has only one value null, which is an empty object reference
Boolean Boolean has two values, true and false
String It represents text information
Number It represents numeric information
Object It is an unordered collection of a series of attributes, including function and array Array
It is impossible to judge function and array using typeof. The Object.prototype.toString method is used here.
[By default, each object will inherit the toString() method from Object. If this method is not overridden (shadowed) by the same name method on the object itself or a closer upper prototype, the object's method is called. toString() method will return "[object type]", where the string type represents an object type][1]

function type(obj) {
  var toString = Object.prototype.toString;
  var map = {
    '[object Boolean]' : 'boolean', 
    '[object Number]'  : 'number', 
    '[object String]'  : 'string', 
    '[object Function]' : 'function', 
    '[object Array]'  : 'array', 
    '[object Date]'   : 'date', 
    '[object RegExp]'  : 'regExp', 
    '[object Undefined]': 'undefined',
    '[object Null]'   : 'null', 
    '[object Object]'  : 'object'
  };
  return map[toString.call(obj)];
}

Implementing deepClone

For non-reference values Values ​​of the type are assigned directly, while reference value types (object) need to be traversed again and assigned recursively.

function deepClone(data) {
  var t = type(data), o, i, ni;
   
  if(t === 'array') {
    o = [];
  }else if( t === 'object') {
    o = {};
  }else {
    return data;
  }
   
  if(t === 'array') {
    for (i = 0, ni = data.length; i < ni; i++) {
      o.push(deepClone(data[i]));
    }
    return o;
  }else if( t === &#39;object&#39;) {
    for( i in data) {
      o[i] = deepClone(data[i]);
    }
    return o;
  }
}

There is something you should pay attention to here. For the function type, the blogger here assigns the value directly or shares a memory value. This is because the function is more about completing certain functions, having an input value and a return value, and for the upper-level business, it is more about completing business functions, and there is no need to actually deep copy the function.

But how to copy the function type?

In fact, the blogger only thought of using new to operate it, but the function will be executed once. I can’t imagine what the execution results will be! o(╯□╰)o! I don’t have any other good ideas yet, so everyone’s guidance is welcome!

At this point, deep copy has almost been implemented. Does anyone think that shallow copy has not been implemented yet?

Shallow copy?

For shallow copy, it can be understood as operating only a common memory area! There will be danger here! (.﹏.*)

If you directly operate this shared data without control, data abnormalities will often occur and be changed by other parts. Therefore, you should not directly operate the data source, but encapsulate some methods for the data source to perform CURD operations on the data.

It’s probably almost done here, but as a front-end, not only JavaScript itself must be considered, but also DOM, browser, etc. must be considered.

Element type

Look at the following code, what will be returned?

Object.prototype.toString.call(document.getElementsByTagName('div')[0])

The answer is [object HTMLDivElement]

Sometimes save If you accidentally perform a deep copy of the DOM element, the above deep copy function will fail to judge the Element element. To judge the Element element, use instanceof to judge. Because for different tags, tostring will return the constructor corresponding to different tags.

function type(obj) {
  var toString = Object.prototype.toString;
  var map = {
    '[object Boolean]' : 'boolean', 
    '[object Number]'  : 'number', 
    '[object String]'  : 'string', 
    '[object Function]' : 'function', 
    '[object Array]'  : 'array', 
    '[object Date]'   : 'date', 
    '[object RegExp]'  : 'regExp', 
    '[object Undefined]': 'undefined',
    '[object Null]'   : 'null', 
    '[object Object]'  : 'object'
  };
  if(obj instanceof Element) {
    return 'element';
  }
  return map[toString.call(obj)];
}

First pass JSON.stringify, and then JSON.parse, you can achieve deep copy. But the data type only supports basic numeric types.

var obj = {
  a: 'a', 
  b: function(){console.log('b')}
}
 
//在JSON.stringify的时候就会把function给过滤了。
 
JSON.stringify(obj)// "{"a":"a"}"

Summary

Here is a summary of deep copy and how to implement a deep copy. In different scenarios, it is necessary to determine whether deep copy needs to be used based on the business scenario.

For more detailed javascript deep copy (deepClone) related articles, please pay attention to the PHP Chinese website!