A brief analysis of the implementation principle of JavaScript deep copy

Source: Internet
Author: User
Tags ming shallow copy hasownproperty

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.