On July 5, 1996, dolly, a cloned sheep, was born at the Roslin Institute in Edinburgh, UK. Cloning is a process in which organisms reproduce asexually through somatic cells and eventually form genetically identical offspring. Dolly and Dorset ewes have exactly the same appearance, and the clones in our program are similar to this. You take a copy of a property in one object and put it in another object.
“Shallow clone“
What is shallow cloning? Shallow cloning is when I copy all the properties of obj{} into obj1{}, and then I change the variables in the object. The original values do not affect each other.
Look at the code: property value is the original value when copied
var obj = {
name: 'Fan Bingbing'.
age: 101,
sex: 'female'
}
var obj1 = {
}
function clone(origin, target) {
var target = target || {}; // Error tolerance, if the user does not pass the target automatically created
for (var prop in origin) {
target[prop] = origin[prop];
}
return target;
}
clone(obj, obj1);
Copy the codeWhen the original value is modified:
Look at the code: property values are copied for reference values
var obj = {
name: 'Fan Bingbing'.
age: 101,
sex: 'female'.
hobby:["Reading"."Make a movie."]
}
var obj1 = {
}
function clone(origin, target) {
var target = target || {}; // Error tolerance, if the user does not pass the target automatically created
for (var prop in origin) {
target[prop] = origin[prop];
}
return target;
}
clone(obj, obj1);
Copy the codeWhen the reference value is modified:
From the execution result, it can be seen that the modification of the original value does not affect each other. Once the reference value is modified, one change is followed by the other, which is the shallow clone.
“Deep clone” (that’s the point)
So what is a proclone? Deep clone is to modify the reference value, do not affect each other, you change me unchanged.
Look at the code:
var obj = {
name: 'Fan Bingbing'.
age: 101,
sex: 'female'.
hobby:["Reading"."Make a movie."].
boyfriend:{
name:"Li3 ge".
son:{
name : "Li Xiaobao"
}
}
}
var obj1 = {
}
Copy the codeLet’s go through the process of deep cloning:
To copy an object from obj to obj1, we need to copy an attribute from obj to obj1, which has both original and reference values. First we need to walk through the entire object to see what types of values it contains:
“1. Iterate over the object“
Use for(var prop in obj) to traverse objects
“2, determine whether the original value, the original value can be directly copied, reference values need to be further processed, reference values and groups and objects, so in the second step to determine whether the array is an object.“
Typeof () is used to determine whether the result is object or not
“3. Determine whether it is an array or an object“
There are three ways to determine whether an array is an object: instanceof, constructor, and toString. ToString is best used because instanceof and Constructor have cross-parent domain problems.
“4. Create the corresponding array or object“
“5, the recursion“
The process is straightened out for writing code:
var obj = {
name: 'Fan Bingbing'.
age: 101,
sex: 'female'.
hobby: ["Reading"."Make a movie."].
boyfriend: {
name: "Li3 ge".
son: {
name: "Li Xiaobao"
}
}
}
var obj1 = {
}
function deepClone(origin, target) {
Var target = target | | {}, / / fault-tolerant processing, to prevent the user does not pass the target value
toStr = Object.prototype.toString,
arrAtr = "[object Array]";
for (var prop inOrigin) {// Iterate over the object
if(origine.hasownProperty (prop)) {// Prevent getting the prototype chain property
if(origin[prop] ! = ="null" && typeof (origin[prop]) == 'object') {// Check whether it is the original value
target[prop]=(toStr.call(origin[prop]) == arrAtr) ? [] : {}; // Create the corresponding array or object
DeepClone (Origin [prop], target[prop])
} else {
target[prop] = origin[prop]; // Is the original value, directly copy
}
}
}
return target;
}
Copy the codeTest code:
The above is for everyone to share! I also just started to write technical articles, not a lot of experience, hope the nuggets can give more advice! Thank you!