JS Learning Essay One: Object simple, deep cloning (copy)

All instances of JavaScript are objects, except that the objects are slightly different, divided into primitive types and composite types. The primitive type object refers to a string (string), a numeric value (number), a Boolean (Boolean), a composite type object that refers to an array (array), an object, or a function.

Since the objects are divided into these two categories, the biggest difference between them is the difference between replication clones. Ordinary objects store the actual data of the object, while the reference object stores the object's reference address, and the actual content of the object is stored separately, because the reference object is usually quite large, which is the means of data overhead and memory overhead optimization. It is often difficult for beginners to understand this part of the content, just like the prototype of the object, is also the same concept. The prototype of the object is also a reference object, which puts the methods and properties of the prototype in separate memory, while the object's prototype chain points to the memory address. Although this part of the content is more difficult, the principle is consistent, and the purpose is consistent.

1. Clone of primitive type Object 1.1, String clone

2. var x="1";
4. var y=x;
6. Y="2";
10. "1"
12. Alert(x);
14. "2"
16. Alert(y);

1.2, the value of the cloning

2. var x=1;
4. var y=x;
6. Y=2;
10. 1
12. Alert(x);
14. 2
16. Alert(y);

1.3. Cloning of Boolean values

2. var x=true;
4. var y=x;
6. Y=false;
10. True
12. Alert(x);
14. False
16. Alert(y);

2. Cloning of a synthetic type Object 2.1, an array

If a normal clone is used:

2. var x=[1,2];
4. var y=x;
6. Y. Push(3);
10. The
12. Alert(x);
16. The
18. Alert(y);

From the above, the original array x, the clone array y, modified the clone array y, but also modified the original array x, which is the characteristics of the Reference object. So how do you get a complete array clone?

2. var x=[1,2];
4. var y=[];
6. var i=0;
8. var J=x. Length;
10. For(; I<J; I+ +)
12. {
14. Y[i]=x[i];
16. }
18. Y. Push(3);
22. The
24. Alert(x);
28. The
30. Alert(y);

In this way, the clone array y, the original array x, two array complementary interference, implements the complete array clone.

2.2. Cloning of objects

And the cloning of an array, the complete cloning of the object is as follows:

2. var x={1:2,3:4};
4. var y={};
6. var i;
8. For(i in x)
10. {
12. Y[i]=x[i];
14. }
16. Y[5]=6;
20. Object {1:2, 3:4}
22. Console. Log(x);
26. Object {1:2, 3:4, 5:6}
28. Console. Log(y);

2.3. Cloning of functions

var x=function () {alert (1);}; var y=x;y=function () {alert (2);};/ /function () {alert (1);}; alert (x);//Y=function () {alert (2);}; alert (y);

The cloning of the function, using the "=" symbol, and changing the cloned object, will not affect the object before cloning, because the cloned object will be copied once and store the actual data, is the real clone.

3. Complete object cloning

Based on 1 and 2, summarize the complete object clones, including cloning ordinary objects and referencing objects. Before writing this method, we must think that the cloned reference object must take a full clone (deep clone), including the object's value is also an object to complete cloning (deep cloning).

Complete object cloning is also called deep object cloning, deep cloning of objects, deep copying of objects, and so on.

2. function clone(obj)
4. {
6. var o,i,J,K;
8. if(typeof(obj)! ="Object" | | obj= = =null)return obj;
10. if(obj instanceof(Array))
12. {
14. o=[];
16. I=0; J=obj. Length;
18. for(; I<J; I+ +)
20. {
22. if(typeof(obj[i]) = = ="Object" && obj[ i]!=null)
24. {
26. o[i]=arguments. Callee(obj[i]);
28. }
30. Else
32. {
34. o[i]=obj[i];
36. }
38. }
40. }
42. Else
44. {
46. o={};
48. for(i in obj)
50. {
52. if(typeof(obj[i]) = = ="Object" && obj[i]! =null)
54. {
56. o[i]=arguments. Callee(obj[i]);
58. }
60. Else
62. {
64. o[i]=obj[i];
66. }
68. }
70. }
74. return o;
76. }

4. References

• Http://javascript.ruanyifeng.com/grammar/basic.html#toc9

JS Learning Essay One: Object simple, deep cloning (copy)