Detailed explanation and examples of deep cloning objects in JavaScript-JS Tutorial-php.cn

Detailed explanation and examples of deep cloning objects in JavaScript

高洛峰

Release： 2016-12-07 16:40:47

Original

1414 people have browsed it

JavaScript Deep Clone Object

Today I was working on a project, and there was a need to use deep clone objects, and it required programming on the prototype chain, so I decided to review this knowledge point on a whim and found the corresponding knowledge on the Internet,

Clone Object , this term may seem fancy, but it’s actually nothing. It’s just copying an object that looks exactly the same. Maybe some beginners are thinking, isn’t that simple? So easy

var obj1 = {name: &#39;payen&#39;};
var obj2 = obj1;

Copy after login

This is not a clone of an object, obj1 It is basically the same object as obj2.

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

This is because the object is a reference value

Speaking of reference values

JavaScript Reference values are only objects

Note here that arrays are special objects and functions are also special executable objects. That is to say, they are also objects. The so-called deep cloning object means that it does not want the same house. You also want the house. Make an exact copy for me. I don’t know if you can understand what I say =￣ω￣=, that is, the reference value of the deep clone object needs to be copied, while the corresponding shallow clone object only needs to take the reference value. It doesn’t matter if you don’t understand, you will understand after reading the code

First, let’s take a look at shallow clone objects

var house = {
  name: &#39;payen&#39;,
  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);

Copy after login

Don’t complain that I use easy. I can’t remember how to say “shallow” in English (really) I don’t know how I passed CET-6). There is a small performance problem about the for-in. If you are interested, you can read my other article

This code is very simple and I won’t explain it more

Let’s take a look at the chrome console

Detailed explanation and examples of deep cloning objects in JavaScript

Looks great

Then let me do one thing now

Add a person to the new house

Detailed explanation and examples of deep cloning objects in JavaScript

It seems that this "new house" is not new, don't be confused by the variable name Therefore, when reference values appear, shallow cloning is not easy to use. In this case, what should we do? Since we want to get a new object, we create a new object, copy the contents of the old object to Isn’t there a new object?

There is another question. What if there are still objects in the object?

Then continue to repeat the process of creating and adding. It is obviously a cyclic process

But there are two kinds of loops

Iteration

Recursion

There is no doubt that recursion is better

In a recursive loop, when a condition that meets the termination condition is encountered, it returns layer by layer to end. Then we can find the reference value layer by layer through recursion until there is no reference value.

Let’s look at the code

var house = {
  name: &#39;payen&#39;,
  people: {
    father: true,
    mother: true,
    child: {
      age: 1
    }
  },
  money: [1000,2000,3000]
}
function deepClone(original, target){
  var target = target || {};// 如果target为undefined或没传参，设置空对象
  for(var prop in original){// 遍历原对象
    if(original.hasOwnProperty(prop)){// 只拷贝对象内部，不考虑原型链
      if(typeof original[prop] === &#39;object&#39;){// 引用值
        if(Object.prototype.toString.call(original[prop]) === &#39;[object Array]&#39;){
          target[prop] = [];// 处理数组引用值
        }else{
          target[prop] = {};// 处理对象引用值
        }// 可以用三目运算符
        deepClone(original[prop],target[prop]);// 递归克隆
      }else{// 基本值
        target[prop] = original[prop];
      } 
    }
  }
  return target;
}
var newHouse = deepClone(house);

Copy after login

It is written that if-else is suitable for using the ternary operator, but I feel it is too verbose, and the obsessive-compulsive disorder said that it was very uncomfortable to read, in order to prove that it is really Deep cloning, I deliberately made the original house more complicated (we don’t consider deep cloning of functions, which is troublesome and of little significance), this time it is really a new house

I won’t expand it

You can watch it It appears that the reference value of the new object has changed, but the old object has not changed.

The same applies to programming on the prototype chain

var house = {
  name: &#39;payen&#39;,
  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] === &#39;object&#39;){
        if(Object.prototype.toString.call(this[prop]) === &#39;[object Array]&#39;){
          obj[prop] = [];
        }else{
          obj[prop] = {};
        }
        this[prop].cloneTo(obj[prop]);
      }else{
        obj[prop] = this[prop];
      }
    }
  }
  return obj;
}
var newHouse = {};
house.cloneTo(newHouse);

Copy after login

The above is the detailed explanation and examples of JavaScript deep cloning objects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!