Detailed description and examples of JavaScript deep object cloning

This article mainly introduces the related information about deep object cloning in JavaScript, and attaches the instance code to help you learn this knowledge. If you need it, you can refer to the deep object cloning in JavaScript.

Today, when I was working on a project, I had a need to use deep clone objects, and I had to program on the prototype chain to review this knowledge point. I found the relevant knowledge on the Internet,

Clone object. This term looks like a tall object. In fact, it's nothing. It's just copying a long and identical object.
Maybe some beginners are thinking, isn't that easy? so easy

Var obj1 = {name: 'payen '};

Var obj2 = obj1;

This is not a clone object. obj1 and obj2 are essentially the same object,

They point to the same memory address space and get the same small house.

This should be because the object is a reference value

Reference Value

Only objects are referenced in JavaScript.

Note that arrays are special objects and functions are also special executable objects. That is to say, they are also objects. The so-called deep clone object means that it does not want the same house, you have to copy the same copy of the house for me. I don't know if you can understand it like this. That is, the reference value of the deep clone object must be copied, the relatively shallow clone object only needs to take the reference value. It doesn't matter if you don't understand it. You can understand it after reading the code.

First, let's take a look at the shortest object.

var house = {  name: 'payen',  people: {    father: true,    mother: true  }}function easyClone(obj){  var newObj = {};  for(var prop in obj){    if(obj.hasOwnProperty(prop)){      newObj[prop] = obj[prop];    }  }  return newObj;}var newHouse = easyClone(house);

Don't let me talk about how easy I use. I can't think of it for a while ). The for-in has a small performance issue. If you are interested in it, please read my other article.

This code is simple and I will not explain it much.

Let's take a look at the chrome console.

Check the code.

Var house = {name: 'payen', people: {father: true, mother: true, child: {age: 1 }}, money, 3000]} function deepClone (original, target) {var target = target ||{}; // if the target is undefined or no parameter is passed, set an empty object for (var prop in original) {// traverse the original object if (original. hasOwnProperty (prop) {// only copy the object, regardless of the prototype chain if (typeof original [prop] === 'object') {// reference value if (Object. prototype. toString. call (original [prop]) = '[object Array]') {target [prop] = []; // process array reference value} else {target [prop] ={}; // process object reference value} // you can use the three-object operator deepClone (original [prop], target [prop]); // recursive clone} else {// basic value target [prop] = original [prop] ;}} return target ;} var newHouse = deepClone (house );

The if-else written above is suitable for using the three-object operator, but I feel too long. Obsessive-compulsive disorder means that it is uncomfortable to read. To prove that it is actually a deep clone, I made the original house more complicated (we don't consider the deep cloning of functions, which is troublesome and meaningless). This time it is really a new house.

The same is true for prototype chain programming.

var house = {  name: 'payen',  people: {    father: true,    mother: true,    child: {      age: 1    }  },  money: [1000,2000,3000]}Object.prototype.cloneTo = function(obj){  var obj = obj || {};  for(var prop in this){    if(this.hasOwnProperty(prop)){      if(typeof this[prop] === 'object'){        if(Object.prototype.toString.call(this[prop]) === '[object Array]'){          obj[prop] = [];        }else{          obj[prop] = {};        }        this[prop].cloneTo(obj[prop]);      }else{        obj[prop] = this[prop];      }    }  }  return obj;}var newHouse = {};house.cloneTo(newHouse);

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!

For more details about JavaScript deep object cloning and related instance articles, please follow the PHP Chinese network!