The detailed explanation of JavaScript deep cloning object and the _javascript skill of example

JavaScript Deep Clone Object

Today to do the project, there is a need to use the deep cloning object, and requirements in the prototype chain programming so whim simply to review this knowledge, on the Internet to find the appropriate knowledge,

Clone object , this noun looks tall, actually also nothing, is copies a long identical object
Perhaps a beginner's little partner is thinking, that's not easy

var obj1 = {name: 'payen'};

var obj2 = obj1;

This is not a cloned object, Obj1 and Obj2 are the same objects,

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

This is supposed to be the reference value of the object

Speaking of reference values

The reference value in JavaScript is only an object

Notice here that the array is a special object, the function is also a special executable object, that is to say, they are also objects, the so-called deep cloning object is that it does not want the same house, the house you also want to give me a copy of the same I do not know if you can understand =￣ω￣=, That is, the deep cloning object reference value to copy, and relatively shallow cloned object as long as the reference value to get over the good, do not understand it does not matter, read the code to understand

First, let's take a look at the shallow clones.

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);

Do not spit groove I use easy, for a moment can not think of "shallow" English how to say (really do not know my English level six how to live). About the for-in has a small performance problem, interested in the child shoes can look at my another article

This code is simple, and I don't have much to explain.

Look at the chrome console.

Looks like a great look.

So I'm going to do something now.

Add a person to the new house

It seems that this "new house" is not new Ah, do not be confused by the variable name so, a reference value appears, shallow cloning is not easy to use

So, what are we going to do?

Now that we're going to get a new object, we'll create a new object, and we'll just have to copy something from the old object to the new object.

There's another problem, if there's another object in the object.

Then you continue to create the added process, which is obviously a cyclic process.

But there are two kinds of loops.

Iterations

Recursion

There is no doubt that recursion is better than one.

In a recursive loop, when a condition that satisfies the termination condition is returned to the end by layer, we can find the reference value recursively by layer until no reference value is found
Just look at the code.

var house = {
  name: ' Payen ',
  people: {
    father:true,
    mother:true, child
    : {
      age:1
    }
  }, Money
  : [1000,2000,3000]
}
function Deepclone (original, target) {
  var target = target | | {};//If target is undefined or not passed, set the empty object for
  (Var prop in original) {//Traverse the original object if
    (Original.hasownproperty (prop)) {/ /Copy only inside 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] = [];//processing array reference value
        }else{
          Target[prop] = {};//Processing object reference value
        }// You can use the three
        -mesh operator Deepclone (Original[prop],target[prop]);//recursively clone
      }else{//basic value
        target[prop] = Original[prop];
      }  
    }
  }
  return target;
}
var newhouse = Deepclone (house);

It says that If-else is quite suitable for use with the three-mesh operator, but I feel too long, obsessive-compulsive disorder said to see very uncomfortable, in order to prove that it really deep cloning, I deliberately put the original house complex, (we do not consider the deep cloning of functions, trouble and not significant), this time it is really a new house

I'm not going to start.

You can see that the old object does not change when the reference value of the new object changes

Programming on the prototype chain is equally

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, I hope to help you, thank you for your support for this site!