This is the 16th day of my participation in the August More Text Challenge. For details, see:August is more challenging

A vision from heaven

Before we talk about deep and shallow copy, let’s take a look at two phenomena, the = sign operation of basic types and reference types, and see if anything strange happens

  • When the basic type carries out the = sign operation, the phenomenon is the same as our common sense, there is no different

    let a = 1;
let b = a;
b = 2;                          // a: 1 b: 2
Copy the code

  • There is a problem with the = sign operation for reference types. Post code

      let c = { name: "shengjingyin" };
  let d = c;
  d.name = "juliya";                // c: {name: "juliya"} d: {name: "juliya"}
Copy the code

    ?? Ten thousand??

    What’s going on here? I’m just redefining D.name, right? Why did C change with it?

Oh, that’s the same asIt depends on how the reference type is storedTo review the data storage method of this cited type.

See! The value of the reference type is the object, which is stored in the heap memory, while the stack memory stores the variable identifier of the object and the address of the object in the heap memory. D, when assigned, is actually the same as c’s reference address. They have the same “key” to the entity in the heap, and the object is essentially the same. So when I change d.name, C. name is affected as well

Two, deep copy & shallow copy

So why are there two kinds of copies? They are also slightly different

Let’s look at an example of a shallow copy, just like the example above (don’t worry about what a shallow copy is, we’ll get to that later).

let c = { name: "shengjingyin" };
let d = Object.assign({}, c);       / / ES6 method
d.name = "juliya";                  // c: {name: "shengjingyin"} d: {name: "juliya"}
Copy the code

This is a perfect solution, the association between C and D is completely disconnected, can happily continue to develop, but….. Let’s look at one more code

let c = { name: "shengjingyin".habit: ["Basketball"."Swimming"]};let d = Object.assign({}, c);
d.habit.push("code");
Copy the code

Can see!! The hobby column is related again!! Don’t let people write code!

So… Then comes the moment when deep copy shines

let c = { name: "shengjingyin".habit: ["Basketball"."Swimming"]};let d = JSON.parse(JSON.stringify(c));          //ES5           
d.habit.push("code");
Copy the code

Disconnect again! comfortable

Through the above examples, know the role of shallow copy? In fact, isReference type=When we do the sign operation, there are some strange correlations, and we need to do something special to cut the correlation between themThat’s what deep copy is all about!! (Tips: for basic types of data you do not need a deep or shallow copy)

Concept to summarize

  • Shallow copy: Can be understood as a simple copyObject The attribute value of the element in the first layerIf it’s a basic type, it’s a basic type=Number operation, complete replication; forThe attribute value of the element in the first layerIs the equivalent of a reference type or a reference type=With the number operation, the memory address of the reference type is copied, not the entity, so there is still a correlation problem.
  • Deep copy: For deep copy, it can be understood that regardless of the layer, the relationship between the two variables is cut off. These two variables have no correlation, do not affect each other and are independent of each other.

In general, the main differences between the two are: for the first layer of data whose properties are reference type, the replication is a reference or an instance of the data, the reference is a shallow copy, and the reverse is a deep copy