Skip to main content
se añadieron 81 caracteres en el cuerpo
Origen Enlace
Alvarez
  • 4k
  • 4
  • 18
  • 39

Clonando objetos complejos

Clonar objetos que poseen estructuras circulares es una tarea que requiere un poco más de esfuerzo; ¿que pasa si el objeto que queremos clonar no es un nodo DOM, sino un objeto plano con propiedades que se referencian entre sí?… ¿Y cómo clonar objetos con estructura circular?

Una forma de solucionar este problema, es mantener las referencias de los objetos creados, de tal manera que si el objeto ya se creó, entonces pasamos la referencia de ese objeto y así evitamos que se cree infinitamente. Para ello vamos a crearAqui un array como propiedad dearticulo muy bueno sobre la función, para que guarde las referencias de los Object que posee el elemento que clonaremos.clonacion: Conclusión

Es importante conocer la forma en que JavaScript le da manejo a los valores de las variables, teniendo en cuenta que para los valores primitivos se copia su contenido, y para los objetos, se crea un apuntador a su referencia; entender que las funciones son tratadas como propiedades de un objeto en el contexto de ejecución, es crucial para comprender algunos patrones de diseño y el funcionamiento de los métodos call(), apply(), bind()

La intención de éste artículo fue demostrar la importancia que tiene la clonación de objetos para mejorar la calidad de nuestro código, evitando errores comunes como el hecho de que una función pueda modificar el objeto original que fue pasado como argumento.

Clonando objetos complejos

Clonar objetos que poseen estructuras circulares es una tarea que requiere un poco más de esfuerzo; ¿que pasa si el objeto que queremos clonar no es un nodo DOM, sino un objeto plano con propiedades que se referencian entre sí?… ¿Y cómo clonar objetos con estructura circular?

Una forma de solucionar este problema, es mantener las referencias de los objetos creados, de tal manera que si el objeto ya se creó, entonces pasamos la referencia de ese objeto y así evitamos que se cree infinitamente. Para ello vamos a crear un array como propiedad de la función, para que guarde las referencias de los Object que posee el elemento que clonaremos. Conclusión

Es importante conocer la forma en que JavaScript le da manejo a los valores de las variables, teniendo en cuenta que para los valores primitivos se copia su contenido, y para los objetos, se crea un apuntador a su referencia; entender que las funciones son tratadas como propiedades de un objeto en el contexto de ejecución, es crucial para comprender algunos patrones de diseño y el funcionamiento de los métodos call(), apply(), bind()

La intención de éste artículo fue demostrar la importancia que tiene la clonación de objetos para mejorar la calidad de nuestro código, evitando errores comunes como el hecho de que una función pueda modificar el objeto original que fue pasado como argumento.

Aqui un articulo muy bueno sobre la clonacion:

Origen Enlace
Alvarez
  • 4k
  • 4
  • 18
  • 39

Clonando objetos complejos

Clonar objetos que poseen estructuras circulares es una tarea que requiere un poco más de esfuerzo; ¿que pasa si el objeto que queremos clonar no es un nodo DOM, sino un objeto plano con propiedades que se referencian entre sí?… ¿Y cómo clonar objetos con estructura circular?

Una forma de solucionar este problema, es mantener las referencias de los objetos creados, de tal manera que si el objeto ya se creó, entonces pasamos la referencia de ese objeto y así evitamos que se cree infinitamente. Para ello vamos a crear un array como propiedad de la función, para que guarde las referencias de los Object que posee el elemento que clonaremos. Conclusión

Es importante conocer la forma en que JavaScript le da manejo a los valores de las variables, teniendo en cuenta que para los valores primitivos se copia su contenido, y para los objetos, se crea un apuntador a su referencia; entender que las funciones son tratadas como propiedades de un objeto en el contexto de ejecución, es crucial para comprender algunos patrones de diseño y el funcionamiento de los métodos call(), apply(), bind()

La intención de éste artículo fue demostrar la importancia que tiene la clonación de objetos para mejorar la calidad de nuestro código, evitando errores comunes como el hecho de que una función pueda modificar el objeto original que fue pasado como argumento.

/** Clona un objeto (deep-copy)
 * @param  {Any}    from: el objeto a clonar
 * @param  {Object} dest: (opcional) objeto a extender
 * @return {Any} retorna el nuevo objeto clonado
 */
var fnClone = (function() {
  // @Private
  var _toString = Object.prototype.toString;
 
  // @Private
  function _clone (from, dest, objectsCache) {
    var prop;
    // determina si @from es un valor primitivo o una funcion
    if (from === null || typeof from !== "object") return from;
    // revisa si @from es un objeto ya guardado en cache
    if (_toString.call(from) === "[object Object]") {
      if (objectsCache.filter(function (item) {
        return item === from;
      }).length) return from;
      // guarda la referencia de los objetos creados
      objectsCache.push(from);
    }
    // determina si @from es una instancia de alguno de los siguientes constructores
    if (from.constructor === Date || from.constructor === RegExp || from.constructor === Function ||
      from.constructor === String || from.constructor === Number || from.constructor === Boolean) {
      return new from.constructor(from);
    }
    if (from.constructor !== Object && from.constructor !== Array) return from;
    // crea un nuevo objeto y recursivamente itera sus propiedades
    dest = dest || new from.constructor();
    for (prop in from) {
      // TODO: allow overwrite existing properties
      dest[prop] = (typeof dest[prop] === "undefined" ?
          _clone(from[prop], null, objectsCache) :
          dest[prop]);
    }
    return dest;
  }
 
  // función retornada en el closure
  return function (from, dest) {
    var objectsCache = [];
    return _clone(from, dest, objectsCache);
  };
 
}());

var freeman, david;
 
function Freeman() {
    this.name = "Gordon Freeman";
    this.character = "Freeman";
    this.game = "Half-Life";
    this.friends = [];
}
 
david = {
    name: "David Rivera",
    character: "jherax",
    friends: [],
    languages: new RegExp(/javascript|jquery|c#|sql|java|vb/i),
    greeting: function() { return "Hi, I am " + this.name },
    info: {
        job: "programmer",
        birth: new Date()
    }
};
 
freeman = new Freeman();
 
//creamos la referencia circular
freeman.friends = [david, "Barney Calhoun"];
david.friends = [freeman, "John Carmack"];
 
//clonamos el objeto @david
var cloned = fnClone(david);
 
//modificamos propiedades del objeto original
david.name = david.name + " (jherax)";
david.friends.push("Jim Rynor");
 
//vemos que @cloned no fue modificado
console.log("original:", david.name, david.friends);
console.log("clonado:", cloned.name, cloned.friends);