Explicación :

nos encontramos con una situación en la que necesitamos copiar un objeto a otro objeto. En este caso, es probable que tenga dos soluciones: angular.copia() o angular.extender().

Reto al que me enfrento :

Como sabemos angular.copy(source, destination) crea una copia en profundidad del objeto de origen y asignarlo a destino. Por escritura de copia en profundidad, nos referimos a que una nueva copia de la referida objeto y su trabajo bien.

copia profunda código :

var mySource = {'name' : 'Rohit', 'age' : '24'}
var myDest = {}
angular.copy(mySource,myDest);
mySource.name = "Jindal";
console.log(mySource); //Object {name: "Jindal", age: "24"}
console.log(myDest); //Object {name: "Rohit", age: "24"}
console.log(mySource.obj === myDest.obj); //false

Aquí, puedo modificar el objeto de origen de mySource.name = "Jindal" pero es que no afecten el objeto de destino myDest como se esperaba.
Si revisamos mySource.obj === myDest.obj, esto le dará falso ya que ambos apuntan a diferentes objetos.

Ahora,me estoy enfrentando el problema con angular.extend(destination, source) como se crea un shallow copy significa en esta fuente y destino, que apunta a una misma dirección. So, if i will modify source object then it will also reflect in destination object. But it's not happening.

copia superficial código :

var mySource = {'name' : 'Rohit', 'age' : '24'}
var myDest = {}
angular.extend(myDest,mySource);
mySource.name = "Jindal";
console.log(mySource); //Object {name: "Jindal", age: "24"}
console.log(myDest); //Object {name: "Rohit", age: "24"}
console.log(mySource.obj === myDest.obj); //True

jsfiddle : https://jsfiddle.net/U3pVM/24322/

Como soy nueva en esto, necesito ayuda para entender el correcto flujo de angular.copia() & angular.extender().

Inmediatamente, cualquier ayuda será muy apreciable. Gracias

InformationsquelleAutor Rohit Jindal | 2016-04-24

4 Comentarios

  1. 9

    He actualizado el código . Ahora angular.se extiende funciona como se espera. Recuerde que si usted pase angular.se extiende un objeto vacío como primer parámetro (destino) y, a continuación, la fuente, angular se va a conservar tanto los objetos y copiar sólo las propiedades, como angular.copia no.

    //angular.copy()
    
    var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}}
    var myDest = angular.copy(mySource);
    
    mySource.name = "Rohit";
    console.log(mySource); //Object {name: "Rohit", age: "24", obj: Object}
    console.log(myDest); //Object {name: "sakshi", age: "24", obj: Object}
    console.log(mySource.obj === myDest.obj); //false
    
    //angular.extend()
    
    var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}}
    var myDest = angular.extend(mySource);
    mySource.name = "Rohit";
    console.log(mySource); //Object {name: "Rohit", age: "24", obj: Object}
    console.log(myDest); //Object {name: "Rohit", age: "24", obj: Object}
    console.log(mySource.obj === myDest.obj); //True
  2. 4

    agular.copy de los clones (copia en profundidad) de un objeto y crea un nuevo objeto con los mismos valores, mientras que angular.extend hace una copia superficial de modo que los atributos se refieren a los mismos valores en la memoria. Una muy buena explicación es dada aquí que se distingue muy bien entre .copy(), .extend() y .merge() métodos

  3. 2

    Primitivas son copiados por valor y no por referencia pero primero tratar de entender copy vs extend

    copia

    Recorre cada propiedad de un objeto, si es una primitiva acaba de copiar, si es un objeto de crear un nuevo objeto y realizar una copia recursiva

    La aplicación de la vería como el siguiente, tenga en cuenta que, obviamente, hay algunos casos más, pero me estoy guardando simple

    function copy(dest, source) {
      for (var property in source) {
        if (typeof source[property] === 'object') {
          var clone = {}
          copy(clone, source[property])
          dest[property] = clone
        } else {
          //a primitive
          dest[property] = source[property]
        }
      }
    }

    extender

    Recorre cada propiedad de un objeto, si es una primitiva acaba de copiar, si es un objeto de crear una referencia al objeto en lugar de crear un nuevo objeto que tiene las mismas referencias que el objeto original

    function extend(dest, source) {
      for (var property in source) {
        dest[property] = source[property]
      }
    }

    Tal vez usted está esperando que al hacer una copia superficial primitivas también será superficial copiado sin embargo como se puede ver por encima de ellos siempre están clonados, para solucionar su problema en su lugar, puede cambiar las propiedades de un objeto de referencia (que se consigue con una copia superficial)

    var mySource = {person: {'name' : 'Rohit', 'age' : '24'}}
    var myDest = {}
    angular.extend(myDest,mySource);
    mySource.person.name = "Jindal";
    console.log(mySource); //Object {person: {name: "Jindal", age: "24"}}
    console.log(myDest);  //Object {person: {name: "Jindal", age: "24"}}
    console.log(mySource.obj === myDest.obj); //True
  4. 2

    Para la copia del objeto de las siguientes cosas metters.

    • Los puntos del objeto a la misma ubicación de memoria o no

      • Copia Normal – Sí
      • Angular copia – No
      • Angular extender – No
      • Angular de mezcla – No
    • Interior de los puntos del objeto a la misma ubicación de memoria o no

      • Copia Normal – Sí
      • Angular copia – No
      • Angular extender – No
      • Angular de mezcla – No
    • Hace copia de mantener el actual niño objetos o eliminar los objetos

      • Copia Normal – Reemplazar
      • Angular copia Anular
      • Angular de ampliar Mantener
      • Angular de mezcla – Mantener

    Aquí es el plunker copia para que

    //'=' assignment copy
    console.info('assignment copy');
    var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}}
    var myDest = {oldObj:'old'} //old properties will be override
    myDest = mySource;
    mySource.name = "Rohit";
    console.log(mySource); //Object {name: "Rohit", age: "24", obj: Object}
    console.log(myDest); //Object {name: "sakshi", age: "24", obj: Object}
    console.log(mySource === myDest); //true         //points to same object
    console.log(mySource.obj === myDest.obj); //true //points to same object
    //angular.copy()
    console.info('angular copy');
    var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}}
    var myDest = {oldObj:'old'} //old properties will be override
    angular.copy(mySource,myDest);
    mySource.name = "Rohit";
    console.log(mySource); //Object {name: "Rohit", age: "24", obj: Object}
    console.log(myDest); //Object {name: "sakshi", age: "24", obj: Object}
    console.log(mySource === myDest); //false //points to different object
    console.log(mySource.obj === myDest.obj); //false //points to different object
    //angular.extend()
    console.info('angular extend');
    var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}}
    var myDest = {oldObj:'old'}
    angular.extend(myDest,mySource);
    mySource.name = "Rohit";
    console.log(mySource); //Object {name: "Rohit", age: "24", obj: Object}
    console.log(myDest); //Object {oldObj:'old',name: "sakshi", age: "24", obj: Object}
    mySource.obj.key = '123';
    console.log(myDest.obj.key);
    console.log(mySource === myDest); //false //points to different object
    console.log(mySource.obj === myDest.obj); //True //points to same object
    //angular.extend()
    console.info('angular merge');
    var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}}
    var myDest = {oldObj:'old'}
    angular.merge(myDest,mySource);
    mySource.name = "Rohit";
    console.log(mySource); //Object {name: "Rohit", age: "24", obj: Object}
    console.log(myDest); //Object {oldObj:'old',name: "sakshi", age: "24", obj: Object}
    console.log(mySource === myDest); //false //points to different object
    console.log(mySource.obj === myDest.obj); //false //points to different object
    • Su código se muestra una cosa (angular.extend utiliza las mismas referencias para el interior de los objetos), y el resumen de los estados de la otra cosa.
    • Sí. Creo angular.extender debería ser » Sí «en el Interior de los puntos del objeto a la misma ubicación de memoria o no» de la lista.

Dejar respuesta

Please enter your comment!
Please enter your name here