A brief analysis of the implementation principle of JavaScript deep copy

Original: http://www.cnblogs.com/xie-zhan/p/6020954.html

When JavaScript implements inheritance, it needs to copy objects, and in order to affect the original data without affecting the copied data, that is, when there is a sharing relationship, we need to make a deep copy.

Here is a simple analysis of its implementation principle

First on the code:

varObj1 ={name:' Awen ', Song: {auther:' Xiao Ming ', Title:Guangzhou}, hobby: [' Eat ', ' eat ', ' eating ']};varObj2 = {}; for(varKinchobj1) {Obj2[k]=obj1[k];} Console.log (OBJ2); //Object {name: "Awen", Song:object, Hobby:array[3]}obj2[' hobby '].push (' Drink '); Console.log (OBJ1); //Object {name: "Awen", Song:object, Hobby:array[4]}Console.log (OBJ2);//Object {name: "Awen", Song:object, Hobby:array[4]}

It is concluded that the shallow copy can not complete the requirement, for the property is the object, only the simple copy of the address, its referential relationship is also in; not in line with our requirements;

Take a look at the deep copy:

functioninCopy (obj1,obj2) {varobj1 = Obj1 | | {};//fault-tolerant processing     for(varKinchobj2) {         if(Obj2.hasownproperty (k)) {//Copy only instance properties, not prototypes            if(typeofObj2[k] = = ' object ') {//data for reference types processed separatelyObj1[k] = Array.isarray (Obj2[k])?[]:{}; InCopy (Obj1[k],obj2[k]); //recursive processing of reference type data}Else{Obj1[k]= Obj2[k];//Direct copy of data of value type            }        }    }}

Deep copy changes between the two do not affect each other

1 copy no longer has a sharing relationship between the two

2 copy after the data type can not be changed, that is, when it is necessary to determine the array, the need for a separate recursive traversal

3 at the time of inheriting, we realize the inheritance of the prototype object property through the prototype property, we need to propose the property on the prototype object in the deep copy, and filter by the hasOwnProperty method;

The test code and results are as follows

varObj3 ={name:' Awen ', Song: {auther:' Xiao Ming ', Title:Guangzhou}, hobby: [' Eat ', ' eat ', ' eating ']};varObj4 ={};incopy (OBJ4,OBJ3); Console.log (OBJ3);//Object {name: "Awen", Song:object, Hobby:array[3]}Console.log (OBJ4);//Object {name: "Awen", Song:object, Hobby:array[3]}Obj4.hobby.pop (); Console.log (OBJ3);//Object {name: "Awen", Song:object, Hobby:array[3]}Console.log (OBJ4);//Object {name: "Awen", Song:object, Hobby:array[2]}obj4.song.title = ' Beijing '; Console.log (OBJ3); Console.log (OBJ4);

OBJ4 Dynamic Change

3 Copy data type consistency

Data type has not changed

A brief analysis of the implementation principle of JavaScript deep copy