In the beginning

Understand depth copy and assignment, need the prior knowledge: JS data types, JS stack concept

Js data types: basic data type, reference data type

  • Basic data types include:String Number Boolean Undefined null(Where NULL is a historical relic,typeof null //ObjectThe null type is referenced as an empty object. I’m not going to extend it.)
  • Reference data types:Function Object Array

Stack concept in js

  • Stack: Automatically allocates and frees memory for basic, simple data segments that occupy a fixed amount of space, as well as Pointers to reference data types. The data structure is linear, last in, first out
  • Heap: Dynamically allocated memory, of varying size and not automatically freed, that holds reference types, objects that may be composed of multiple values, stored in heap memory, containing variables of reference types that actually hold Pointers to the object rather than the variable itself. Its data structures are chaotic

Definitions and Differences

  • Assignment: The assignment operator assigns values to JavaScript variables. Basic data types assign values directly to variables without affecting each other. Reference data types assign Pointers to variables that interact with each other
    • example 
      // Base data type assignment
var a = 1
var b = a
// a -> b -> 1 when a = 2
// Reference data type assignment
var c = [1.2.3.4]
var d = c
// If c[0] = 2 c -> [2,2,3,4] d -> [2,2,3,4]
Copy the code
  • Shallow copy: A new object is created in the heap and its property values are assigned directly from the corresponding property of the source object.Properties of the base data type are assigned directly to the corresponding properties.An attribute referencing a data type assigns a pointer to the corresponding attributeTherefore, attributes of the base datatype are not affected, and attributes referencing datatype are affected
    • example 
      var obj1 = {
   a:123.b: [[1.2].3]}function clone(obj){
   var cloneobj={}
   for (var key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) { cloneobj[key] = obj[key]; }}return cloneobj
}
var obj2 = clone(obj1)
/** * var obj2 = {* a:123, * b:[[1,2],3] *} */

Obj1. a -> 234 obj2.a -> 123 if obj1.a = 234
/ / when obj1. B [0] [0] = 2 output obj1. B - > [[2], 3] obj2. B - > [[2], 3]
/ / when obj1. [1] b = 4 output obj1. B - > [[1, 2], 4] obj2. B - > [[1, 2], 4]
Copy the code
  • Deep copy: Creates a new object in the heap. This new object is copied from the source object. It is two objects with different Pointers and does not affect each other.
    • example 
      var obj1 = {
   a:123.b: [[1.2].3]}function deepclone(obj){
   var cloneobj = new obj.constructor() // obj.constructor creates this value from the constructor without extension
   if (obj === null) return obj
   if (obj instanceof Date) return new Date(obj)
   if (obj instanceof RegExp) return new RegExp(obj)
   if (typeofobj ! = ='object') return obj
   for (var key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) { cloneobj[key] =deepclone(obj[key]); }}return cloneobj
}
var obj2 = deepclone(obj1)
/** * var obj2 = {* a:123, * b:[[1,1,],1] *} */
Obj1. a -> 234 obj2.a -> 123 if obj1.a = 234
/ / when obj1. B [0] [0] = 2 output obj1. B - > [[2], 3] obj2. B - > [[1, 2], 3]
/ / when obj1. [1] b = 4 output obj1. B - > [[1, 2], 4] obj2. B - > [[1, 2], 3]
Copy the code

conclusion

  • Assignment is not a shallow copy. It is simply an assignment to a value of a simple data type, referencing a pointer (index) to the data type.
  • A shallow copy can obtain only the original data of the first layer of the source object (values of simple data types and Pointers (indexes) referencing data types). When the reference data type values in the source object change, the copied object will also be affected
  • The two deep-copy objects do not affect each other
In the first article, if there is something wrong, you are welcome to correct it, learn together and make progress together.

Ps: Like a “like”, the follow-up summary from time to time