Copia superficial: en el caso de una copia superficial, cuando copiamos el objeto original en el objeto clonado, el objeto clonado tiene la copia de la dirección de memoria del objeto original. Significa que ambos apuntan a la misma dirección de memoria.
Tanto el objeto original como el objeto clonado apuntan internamente al mismo objeto al que se hace referencia. Dado que apuntan a la misma dirección de memoria, si cambiamos el objeto clonado, los cambios se reflejarán en el objeto original porque apuntan a la misma dirección de memoria.
Javascript
<script>
var obj1 = {
id: 1,
company: "GFG"
};
var obj2 = obj1;
obj2.id = 2;
console.log(obj1.id);
console.log(obj2.id);
</script>
Producción:
2 2
Explicación: En este caso, hemos clonado el objeto original obj1 en el objeto obj2. Dado que ambos hacen referencia internamente a la misma dirección de memoria si cambian la identificación con el objeto obj2, también cambiaría la identificación del objeto obj1.
obj2.id = 2 también cambiará la identificación del objeto obj1.
Esto se llama copia superficial. Una copia superficial significa que una vez que hagamos cambios en el objeto clonado, también se reflejará en el objeto original.
Pero en el caso de una copia profunda, cambiar el valor del objeto clonado no se reflejará en el objeto original, porque ambos apuntan a diferentes objetos de referencia. Debido a que el objeto original tiene su propio objeto de referencia y después de la clonación, el objeto clonado tiene su propio objeto de referencia. Ambos son diferentes.
Cómo evitar la copia superficial para que cambiar el objeto clonado no afecte nuestro objeto original. Podemos usar los siguientes métodos para evitar copias superficiales.
- Usando el operador de propagación
- Usando el operador Object.assign
- Usando JSON.stringify y JSON.parse
Uso del operador de extensión: podemos evitar la creación de copias superficiales con la ayuda del operador de extensión.
Javascript
<script>
var obj1 = {
id: 1,
company: "GFG"
};
var obj2 = { ...obj1 };
obj2.id = 2;
console.log(obj1.id);
console.log(obj2.id);
</script>
Producción:
1 2
Aquí estamos cambiando la identificación con el objeto obj2 pero no está cambiando la identificación del objeto obj1.
Usando el operador Object.assign: Toma los dos parámetros:
- Objeto vacío y
- Objeto original
Javascript
<script>
var obj1 = {
id: 1,
company: "GFG"
};
var obj2 = Object.assign({}, obj1);
obj2.id = 2;
console.log(obj1.id);
console.log(obj2.id);
</script>
Producción:
1 2
Pero el problema de trabajar con el operador Object.assign es que no funciona perfectamente en el caso de objetos anidados.
Javascript
<script>
var obj1 = {
id: 1,
company: "GFG",
details:
{
employee_no: 10
}
};
var obj2 = Object.assign({}, obj1);
obj2.details.employee_no = 20;
console.log(obj1.details.employee_no);
console.log(obj2.details.employee_no);
</script>
Producción:
20 20
En este caso, tenemos un objeto anidado y estamos cambiando employee_no con la ayuda de obj2. Y por eso obj1 employee_no también se cambia. Entonces Object.assign no funciona perfectamente en el caso de un objeto anidado.
JSON.stringify y JSON.parse: Funciona perfectamente en el caso de objetos anidados. A diferencia del operador Object.assign, no cambia nuestro objeto original cuando hacemos cambios en el objeto clonado.
Javascript
<script>
var obj1 = {
id: 1,
company: "GFG",
details:
{
employee_no: 10
}
};
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2.details.employee_no = 20;
console.log(obj1.details.employee_no);
console.log(obj2.details.employee_no);
</script>
Producción:
10 20
Publicación traducida automáticamente
Artículo escrito por sftrengdeepak y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA