In all object-oriented languages, there are problems with object references, copying, and so on that can be difficult for beginners to understand. Today I’m going to summarize object copying in JavaScript.

The first thing to know is that data in JavaScript is divided into basic (single) types and reference types. Except for Object, the rest of the objects are basic types such as String, Number, Boolean, undefined. Arrays, time objects, our own custom objects, and so on, are all inherited from Object, so they are all reference types.

When an object is assigned in JS, the basic type is copied directly, for example:

let a = 1;
let b = a;
b = 2;
console.log(a);
console.log(b);
Copy the code

Effect:

If you assign a to b, you copy a to b. If you change b, you do not change a.

Also look at this:

function ch(num) {
	num = num + 10;
}

let a = 1;
console.log(a);
ch(a);
console.log(a);
Copy the code

Results:

We tried to change the value of a by the function, but it didn’t work. Mun = a; num = 10; num = a; num = a; num = a;

Let’s create an object and try it:

Let gzskill = {skillName: 'turn you into a pudding ', description:' deal damage to enemies and restore health ', injury: 2000} let miyako = {name: 'miyako ', age: '14', race: 'ghost', skill: gzSkill, say: () => {console.log(' I ~ good ~ hate ~ ah '); } } let miyakoCopy = miyako; Name = 'miyakocopy.name '; console.log(miyako); console.log(miyakoCopy);Copy the code

So here I create a custom object miyako, and I create a variable miyakoCopy, and if I change that variable, does that change? Here are the results:

You can see that only the new object is changed, but the original object is also changed. Why?

Because our custom Object belongs to the Object type, belongs to the reference type, when we directly assign to another Object, only the reference occurs, equivalent to miyako and miyakoCopy two names point to the same space in memory. If you change one, the other will change.

This is a shallow copy in JS, that is, when we assign an existing object to a new object, we do not open up a new space in memory for the new object, but the reference occurs.

Again, pass the object as a parameter to the function, and you’ll notice that it also changes:

Let gzskill = {skillName: 'turn you into a pudding ', description:' deal damage to enemies and restore health ', injury: 2000} let miyako = {name: 'miyako ', age: '14', race: 'ghost', skill: gzSkill, say: () => {console.log(' I ~ good ~ hate ~ ah '); }} function chName(char) {ch.name = 'Izumo '; } console.log(miyako); chName(miyako); console.log(miyako);Copy the code

Results:

When an object is passed as a parameter, the function creates the replica object and assigns the passed argument directly to the replica, and then operates on the replica. We are passing in data of the reference type, so the replica object is a shallow copy of the passed argument.

So if we want to copy an object, we want to do a deep copy, what do we do?

You can write a function, create an object, and iterate and recursively retrieve the properties of the original object, and copy each property to the new object in turn. If the attribute is of a primitive type, such as a numeric string, etc., then we can assign the value directly to the new object attribute, because assigning the value directly to the primitive type is actually copying. If it is a reference type, then recursively:

/** * Make a deep copy of an object * @param {*} originObject * @returns copyObject */ function copyObject(originObject) {let destObject = {}; for (let key in originObject) { let property = originObject[key]; if (property == null) { destObject[key] = null; } else if (property == undefined) { destObject[key] = undefined; } else if (typeof property == 'object') { destObject[key] = copyObject(property); } else { destObject[key] = property; } } return destObject; }Copy the code

Then we experiment with the objects we have constructed above:

let miyakoCopy = copyObject(miyako); Name = 'miyakocopy.name '; miyakoCopy.skill.injury = 3000; Miyakocopy.say = () => {console.log(' trick or treat! '); } console.log(miyako); miyako.say(); console.log(miyakoCopy); miyakoCopy.say();Copy the code

Results:

It can be seen that through this method to achieve deep replication, whether the object itself or the object in the object are implemented deep replication.

In fact, in Java, C# and other object-oriented programming languages, object replication, reference is the same as the above js situation is the same.