Before we talk about the shallow copy and deep copy of JavaScript, we need to discuss the data type of JS. We all know there are five types of number,boolean,string,null,undefined,object. And object also contains Function,array and object itself. The previous five types are called basic types, while object is a reference type. One might ask, why do you want to divide the basic type and the reference type? You'll understand later.
Let's take a look at the concise definition of shallow copy and deep copy:
- Deep copy: Copy data directly to the corresponding variable
- Shallow copy: Copy the address of the data to the corresponding variable
And how does the data type relate to the type of replication we're talking about? Let's try to find out.
Experiment One:
Before we talk about the shallow copy and deep copy of JavaScript, we need to discuss the data type of JS. We all know there are five types of number,boolean,string,null,undefined,object. And object also contains Function,array and object itself. The previous five types are called basic types, while object is a reference type. One might ask, why do you want to divide the basic type and the reference type? You'll understand later.
Let's take a look at the concise definition of shallow copy and deep copy:
Deep copy: Copy data directly to the corresponding variable
Shallow copy: Copy the address of the data to the corresponding variable
And how does the data type relate to the type of replication we're talking about? Let's try to find out.
Experiment One:
var a = "dengkunming";
var a= A;
alert (A1);//dengkunming
A= "ABC";
alert (A1);//dengkunming;
In this code we assign a to A1, and when the value of a changes, the A1 does not change.
Experiment Two:
var a = [0,1,2,3];
var a1= A;
alert (A1);//[0,1,2,3]
a[1]= "Change";
alert (A1);//[0, "change", 2,3]
In this code we also assign a value to A1, and when A's value changes, A1 changes.
This is the matter, the same operation of the results how can there be differences? We look back, and the smart one thinks it might be that these two aces are a little different. What's different? The front is a string, followed by an array. It seems to be the basic type and data type we mentioned earlier. So let's change the data type and see what happens.
Experiment Three:
var a = 3578;
var a= A;
alert (A1);//3578
a=8735;
alert (A1);//3578
Experiment Four:
var a = {W1:2,w2:3}
var a1= A;
alert (A1);//{w1:2,w2:3}
A1.w1= "Deng";
alert (a);//{W1: "Deng", W2:3}
In both sets of experiments, we replaced the data types with the number type and object type respectively. In experiment three, it can be found that A1 does not change with the value of a, and in Experiment IV, a will change with A1 (here is slightly different from experiment two, change is A1, of course, if you change a, A1 will follow change)
It seems that we can draw a general conclusion:
The base type assignment in JS is deep copy, and the assignment of reference type is shallow copy.
It is now necessary to extend the definition of deep copy and shallow copy.
Shallow copy: It is the address of the data assigned to the corresponding variable, but not the specific data copied to the variable, the variable will change with the value of the data.
Deep replication: The assignment of data to the corresponding variable, resulting in a new data that is irrelevant to the source data (the data address has changed).
Experiment Five:
var a = {W1:2,w2:3}
var a1= A;
alert (A1);//{w1:2,w2:3}
var a={x1:7,x2:8}
alert (A1);//{w1:2,w2:3}
According to our theory above, this is a shallow copy. A1 should change with a, but why does it backfire here? This is the type of reference that is causing trouble. Object assignment is actually a reference to the value, passing is an address. So the fourth line of Experimental V is to point the variable A to a new address. And A1 or point to the original address, the original address of the value has not changed, so A1 will not change. So keep in mind that shallow replication does not change as the storage data address changes, only as data values change.
So how do we implement deep replication of reference types? This is the old topic of deep cloning. Just need to write a non native clone function yourself.
function Clone (obj) {
var o=[];
if (obj.constructor== Array) {
o=obj.slice (0);
}else{
o={};
for (var i in obj) {
O[i] = typeof obj[i] = = = "Object" Obj[i].clone (): Obj[i];}
return
o;
}