¿Podría alguien explicar el comportamiento de mutación a continuación?
function test () { let data = {} const run = () => { console.log(data) } const update = () => { data = {} } return { container: { data }, run, update }; } const { container, run, update } = test(); update(); // run an update to reset value to {} container.data.test = { result: 'test' }; // try to mutate the data run(); // it will still return {} instead { data: {test: {result: 'test'}} }Espero que actualizar el objeto resulte en mutar el objeto de datos dentro de la función, pero parece que no es el caso, como si hubiera creado un nuevo objeto.
const { container, run, update } = test();
Esto crea un nuevo objeto que incluye el valor actual de la variable de data y lo asigna.
update(); // run an update to reset value to {}
Esto cambia el valor de la variable de data a un nuevo objeto.
container.data.test = { result: 'test' }; // try to mutate the data
Esto muta el objeto que se asignó originalmente a data y se copió en el nuevo objeto que se devolvió desde test() .
No tiene ningún efecto sobre el nuevo objeto que ahora es el valor de los datos.
En otras palabras:
return { container: { data }, run, update };
… copia el valor de los datos y no crea una referencia a la variable de data .
Cuando llamas a la función test() , container.data y data apuntan al mismo objeto:
container.data -----> {} <------ datapero después de la siguiente declaración:
container.data.test = { result: 'test' }; container.data apunta a un objeto diferente:
container.data -----> { result: 'test' } data -----> {} pero data todavía apuntan al objeto vacío y esta variable data es registrada por la función run() .
Lo importante que debe saber aquí es que reasignar a container.data tampoco reasigna a la variable de data .