New object properties for js shallow copy

problem description

shallow copying is to copy references. The copied references all point to instances of the same object, and the operations between them will affect each other. In the following example, I created a new obj object and then shallow copied a new object newObj. Why do I change the array arr, new object newObj in obj, while I directly modify the obj.name property, but the new object newObj does not change?

the environmental background of the problems and what methods you have tried

related codes

//
                function simpleClone(obj){
                   var simpleCloneObj = {};
                   for(var item in obj){
                     simpleCloneObj[item] = obj[item]  
                   }
                   return simpleCloneObj
                }
                
                var obj = {
                  name:"dabao",
                  age:28,
                  arr:[1,3,5]
                }
                
                var newObj = simpleClone(obj);
                
                obj.arr.push(0);
                obj.name = "hello";
                console.log(newObj);
                console.log(obj);

what result do you expect? What is the error message actually seen?

my understanding of shallow copy is that after a new object is shallowly copied, the properties of the original object that are worth changing will be reflected in the copied new object. I don"t know why the properties haven"t changed.

Apr.11,2021

the method you write is equivalent to newObj.name = obj.name
name,age is a string, the number is the basic type, so the value is copied, not the reference
arr is not the basic type, so the reference is copied

if you want to implement the modification you said, one changes and the other directly newObj = obj


because name is a value, not a reference, shallow copy means:

let p={
    name:"123",
    ch:[1,2,3,4],
}

let k= p;
k.name="456"
//p.name456

as shown in figure clipboard.png

in your simple Clone function, instead of manipulating the object, you manipulate the properties of the object.
copies one of these attributes, which is equivalent to

let a = "123";
let b = a;
b = "456";
//a

of course, if the property itself is still a reference, such as an array or object, then it will still be a shallow copy

. The

attribute does not change because the attribute value is a variable of value type , while arrays and objects are variables of reference type . In fact, deep copy and shallow copy are carried out around the problem of memory address , while the memory address and the attribute of the variable (reference type or value type) are inseparable. In your method, in circular copy, arr is an array, and the assignment only passes the memory address assignment, and the real value is not assigned.
your copy method, although cycled one layer, still belongs to shallow copy. For real deep copy, please refer to the $.extend method of jQuery , and copy it recursively. This is the real deep copy.


1. First, you create a new object in the function simpleClone (). NewObj and the initial obj point to two addresses;
2. The name and age of the original obj are the true values assigned when the primitive type = operation is performed, and arr is a reference type. When the = operation is performed, the arr address of the original obj is copied to the arr attribute of the newObj.
3. So name and age are no longer associated with the original, and arr is still pointing to the address of the same data as the original obj

.
Menu