Shulou(Shulou.com)06/02 Report--

This article focuses on "analyzing shallow and deep copies of JavaScript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "analyzing JavaScript shallow copy and Deep copy".

First, direct assignment

An object is a reference type. If you assign a value directly to another object, you will only assign a reference. In fact, the two variables point to the same data object. If the property of one object changes, the other will also change.

Example 1, simple example:

Let human1 = {id: 1, name: "happy"}; human2 = human1; / / here is the direct assignment console.log (human1); / / {id: 1, name: 'happy'} console.log (human2); / / {id: 1, name:' happy'} / / change the name of human1, and human2's will also change human1.name = "life"; console.log (human1) / / {id: 1, name: 'life'} console.log (human2); / / {id: 1, name:' life'}

Example 2, when an object is passed as a parameter, it also passes a reference:

Let human1 = {id: 1, name: "happy"}; console.log (human1); / / {id: 1, name: 'happy'} function foo (human) {/ / the name of the human object has been changed here human.name = "life";} foo (human1); / / the passing object is the passing reference console.log (human1); / / {id: 1, name:' life'} two, shallow copy

The shallow copy only copies the first layer of the object, and if the property value of the first layer is the object, then the property only copies a reference.

Let object1 = {a: 1, b: {/ / b is the object b1: 2}; object2 = Object.assign ({}, object1); / / here is the shallow copy, where the b object only replicates the reference / / an is a regular type and does not affect each other object1.a = 10 console.log (object1.a); / / 10console.log (object2.a) / / 1 / / b is an object and will influence each other object1.b.b1 = 20 console.log (object1.b.b1); / / 20console.log (object2.b.b1); / / 20

If you want to achieve complete replication, use a deep copy.

III. Deep copy

Sen copy is not only a layer to copy, but also a layer to copy if it is an object.

1. The way the JSON object

If the object can be identified as a JSON object, it can be done as a JSON object.

Follow the example above:

Let object1 = {a: 1, b: {/ / b is the object b1: 2}; object2 = JSON.parse (JSON.stringify (object1)); / / Deep copy / / an is a regular type and does not affect each other object1.a = 10 console.log (object1.a); / / 10console.log (object2.a); / / 1 / / b is an object and does not affect each other object1.b.b1 = 20 Console.log (object1.b.b1); / / 20console.log (object2.b.b1); / / 2

In fact, the principle of deep copy here is to convert the object into a json string, and then to a json object, and then to a json string in the middle, which has nothing to do with the original object.

The advantage of this method: the implementation is very simple.

Disadvantages:

If any attribute value is a function, it cannot be copied and the data will be lost.

In addition, the prototype object cannot be copied.

So this approach is only suitable for object confirmation that it is pure json data.

two。 Recursive replication

Because progressive replication is required layer by layer, it is easy to think of using recursive methods. Please refer to the following implementation:

Function deepCopy (source) {/ / if it is not an object or null, return if directly (typeof source! = = 'object' | | source = null) {return source;} let target = {}; / traverse the replication attribute for (let k in source) {if (! source.hasOwnProperty (k)) {continue } if (typeof source [k] = = 'object') {/ / if it is an object, copy recursively target [k] = deepCopy (source [k]); continue;} let descriptor = Object.getOwnPropertyDescriptor (source, k); Object.defineProperty (target, k, descriptor);} return target;}

Because it is a layer-by-layer replication, after the replication is complete, the two objects will not affect each other and can also support methods.

Let object1 = {a: 1, b: {/ / b is the object b1: 2}, f: function () {/ / f is the method console.log (3);}}; object2 = deepCopy (object1); / / deep copy, you can also copy the function. Object1.f (); / / 3object2.f (); / / 3 / / b is an object and does not affect each other. Object1.b.b1 = 20 position console.log (object1.b.b1); / / 20console.log (object2.b.b1); / / 2

Copy prototype object

But there is also a problem with this method, which is that the prototype object cannot be copied, so make a slight improvement:

/ / change let target = {}; to the following way / / ensure that the prototype is also copied let target = Object.create (Object.getPrototypeOf (source))

This is fine, let's take an example to verify it:

Function Human () {this.id = 1;} Human.prototype.bar = function () {console.log ("bar");}; let human1 = new Human (); human2 = deepCopy (human1); console.log ("human1", human1); console.log ("human2", human2)

Look at the prototypes of the next two objects:

Deep copy replication prototype object:

Perfect copy.

Of course, this method also has a problem, that is, if the level of recursion is too deep, it is easy to cause stack overflow. However, in practice, it is also recommended not to copy very large objects, there should be another good solution.

At this point, I believe you have a deeper understanding of "analyzing JavaScript shallow copy and deep copy". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.