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. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> /** 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); <!-- end snippet -->