Home > Developer > JavaScript
Let's take a look at the defects of the shortest replication. I don't know how many people have done it?
Copy codeThe Code is as follows:
Var oOriginal = {
MemNum: 1, // number
MemStr: "I am a string", // string
MemObj :{
Test1: "Old value" // we'll test
},
MemArr: [// array
"A string", // string member of array
{// Object member of array
Test2: "Try changing me" // we'll test
}
]
};
This is a complex object that contains objects and arrays. Let's take a look at the complexity of the famous inheritance function of Prototype. It is hard to say that it is inheritance, and jQuery does not.
Copy codeThe Code is as follows:
Var extend = function (result, source ){
For (var key in source)
Result [key] = source [key];
Return result;
}
Test procedure:
Copy codeThe Code is as follows:
Var oCopy = extend ({}, oOriginal); // shortest copy
OCopy. memObj. test1 = "New value"; // if a problem occurs, it is reflected to the original object.
Alert (oOriginal. memObj. test1); // The result copy is modified together with the original one.
OCopy. memArr [1]. test2 = "I am changed ";
Alert (oOriginal. memArr [1]. test2 ); //
<! Doctype html> <ptml lang = "en"> <pead> <meta charset = "UTF-8"/> <meta content = "IE = 8" http-equiv = "X-UA -Compatible "/> <title> javascript deep copy by situ zhengmei </title> </pead> <body> javascript deep copy by situ zhengmei </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
It seems that if you do not want to modify the original object, we need to specially process the object and array. To process them, we must recognize them. See the following functions:
Copy codeThe Code is as follows:
/**
* Type identification-By situ zhengmei: cheng (MIT Licensed)
* Http://www.cnblogs.com/rubylouvre/archive/2010/01/20/1652646.html
*/
Var is = function (obj, type ){
Var toString = Object. prototype. toString, undefined;
Return (type = "Null" & obj = null) |
(Type = "Undefined" & obj = undefined) |
ToString. call (obj). slice (8,-1) === type;
};
The above function is used for type recognition. typeof is unreliable. Array will return "object", and instanceof will not work. It cannot determine the Array instance of another document object. Although the use of Object. prototype. toString. call is not perfect, the duck type can be easily counterfeited, but it is always more reliable than before.
Next, we officially enter the topic. Our deep copy function will specially process key-value pairs of objects and arrays. For them, the program will first create a new object and array for the target object, then copy them one by one. We can see that it does not use hasOwnProperty, in other words, even the properties that can be traversed in the prototype are all given to it. For arrays, we do not need to loop for (,). It can only loop through the elements in parentheses, and cannot loop through other attributes attached to the array. Therefore, we still need to... in this slow method. Since deep copy detects all attributes and creates new objects in the middle, it is a very heavy method. Use it unless necessary.
Copy codeThe Code is as follows:
/**
* Type identification-By situ zhengmei: cheng (MIT Licensed)
* Http://www.cnblogs.com/rubylouvre/archive/2010/03/26/1696600.html
*/
Dom. deepCopy = function (result, source ){
For (var key in source ){
Var copy = source [key];
If (result = copy) continue; // For example, window. window = window, it will be in an endless loop and need to be processed.
If (dom. is (copy, "Object ")){
Result [key] = arguments. callee (result [key] ||{}, copy );
} Else if (dom. is (copy, "Array ")){
Result [key] = arguments. callee (result [key] | [], copy );
} Else {
Result [key] = copy;
}
}
Return result;
};
<! Doctype html> <ptml lang = "en"> <pead> <meta charset = "UTF-8"/> <meta content = "IE = 8" http-equiv = "X-UA -Compatible "/> <title> javascript deep copy by situ zhengmei </title> </pead> <body> javascript deep copy by situ zhengmei </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Author: situ zhengmei
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
