Skip to main content
6 de 6
Fomateo general de la respuesta intentando beneficiar la legibilidad.
Mariano
  • 24.5k
  • 20
  • 76
  • 105

De la documentación de jQuery:

$.extend( target, obj1, \[ obj2 \] )
Añade el contenido de los obj1, obj2, al target, y devuelve este último.

Es decir, que el comportamiento correcto y esperado es el que tú das por erróneo. Lo raro es el primer caso, que según dices, no hace lo mismo... ¿Seguro que en el primer caso que expones, ambos, jTemp y jDef, no terminan con los mismos atributos?

  • Si lo que quieres es añadir un atributo a un objeto ya creado, es tan fácil como hacer una simple asignación.

  • Si lo que quieres es obtener un objeto que mezcle otros 2, sería:

      result = $.extend( { }, obj1, obj2 }
    


### Descripción

$.extend( ) extiende el objeto pasado como primer argumento con los atributos de los otros objetos, y devuelve ese primer argumento. Como le pasamos un objeto vacío, sin contenido previo, copia el contenido de los otros 2 objetos sobre ese objeto vacio; al finalizar, target contiene todos los atributos contenidos en los otros 2, que no han sido modificados.

Por último, $.extend( ) nos devuelve el objeto que le pasamos como primer argumento (recordemos que los objetos se pasan por referencia), con lo que ya tenemos nuestra operacion union realizada.


### Ejemplo:
function obtenerBBDD() {
    return [{cod: 1, desc: '111'}, {cod: 2, desc: '222'}];
}

var jDef = {id: 'hola', valores: obtenerBBDD()};
// jDef = {"id":"hola","valores":[{"cod":1,"desc":"111"},{"cod":2,"desc":"222"}]}

var jTemp = $.extend({ },  jDef);
// jTemp = {"id":"hola","valores":[{"cod":1,"desc":"111"},{"cod":2,"desc":"222","selected":true}]}

Aqui empezamos con los problemas. jTemp["valores"] no es un objeto independiente, es una referencia al "valores" contenido en jDef.

Es decir, jTemp.valores es el mismo objeto que jDef.valores. Por lo tanto, cualquier cambio a uno de ellos afecta al otro.

Posibles soluciones

  1. Usar $.extend( ) con un argumento true inicial, para que haga una copia recursiva:

    var jTemp = $.extend( true, { }, jDef )
    

Según la documentación, ese true inicial forzará la copia recursiva, de modo que jTemp y jDef no estén enlazados, y se resuelva el problema.

  1. Usar otra librería, que sí realice un deep copy, si jQuery no lo permite.
Trauma
  • 26.9k
  • 5
  • 42
  • 68