43

Tenho um objeto chamado cachorro e gostaria de criar e armazenar uma cópia desse objeto.

Como objetos, vetores, funções e expressões regulares são considerados objetos não consigo fazer uma cópia apenas atribuindo esse objeto a uma outra variável (ex.: var cachorro2 = cachorro;), pois por serem objetos apenas uma referência é passada para a outra variável.

Gostaria de saber se existe algum jeito de fazer um cópia de um objeto, seja lá qual for o seu tipo (objetos, vetores, funções ou expressões regulares)?

8 Respostas 8

37
+50

Copiar um objeto muitas vezes não é uma tarefa simples; existem diferentes técnicas com seus respectivos prós e contras.

É especialmente díficil oferecer uma solução completa em JavaScript. Algumas têm problemas de performance. Outras não funcionam para tipos específicos, como Date. Suportar referência circular é trabalhoso. E quase todas esbarram no problema do prototype (muito bem explicado aqui).

Clone ou cópia?

Uma confusão comum é diferenciar os termos clone e cópia. Em alguns cenários os dois termos são utilizados indistintamente, se referindo ambos a cópia de um objeto. Em outros, clone toma um sentido próprio, significa copiar apenas a estrutura do objeto (no caso, o protótipo).

Fica só a ressalva; não aprofundarei a dicussão e utilizarei o termo mais correto, cópia.

Shallow copy vs deep copy

É importante diferenciar os dois tipos de cópias mais comuns: shallow e deep.

Uma cópia shallow (superficial) realiza uma cópia do objeto original, mas as propriedades do objeto original ainda dividem referência com as do objeto cópia. Entenda como o objeto "pai" é copiado mas divide seus "filhos".

Já a cópia deep (profunda) realiza também a cópia das propriedades; a cópia do objeto pai possui seus próprios filhos (que também são cópias).

Os exemplos que seguem são de deep copy, que é o normalmente desejado.

JSON.stringify & JSON.parse

var copia = JSON.parse(JSON.stringify(original));

O maior problema desse método é que as funções do objeto original não estariam presentes no objeto copiado.

Este é o método que todo mundo acaba utilizando quando a cópia não precisa levar em consideração as várias outras complexidades deixadas para trás.

Cuidado com referências circulares pois este método não as suporta ("TypeError: cyclic object value").

eval & toSource

var copia = eval(original.toSource());

Essa é uma das piores soluções, como sempre, eval is evil, além do método toSource não ser padrão. Fica apenas como curiosidade; não recomendo.

Método do Brian Huisman

function copiarObj(original) {
  var copia = (original instanceof Array) ? [] : {}; // verificando se é um array ou um objeto 'comum' e instanciando a cópia
  for (i in original) { // iterando cada propriedade do objeto original
    if (original[i] && typeof original[i] == 'object') copia[i] = copiarObj(original[i]); // se for um objeto realiza cópia desse objeto (note a recursividade aqui)
    else copia[i] = original[i]; // se não simplesmente copia o valor
  }
  return copia; // retorna a cópia
};

Encurtei levemente o método original para facilitar a didática.

Existem alguns pequenos problemas, como por exemplo não funcionar para objetos do tipo Date, mas no geral ele utiliza um simples loop for..in e acaba sendo bem simples. O segredo para que não seja uma cópia shallow é a recursividade feita.

Tome cuidado novamente com referências circulares, pois note que ela não é tratada no loop (gerando um loop infinito).

jQuery.extend

var copia = $.extend(true, {}, original);

Resolvi dedicar uma parte exclusivamente para jQuery, que, apesar de ser uma biblioteca e não estará disponível em todos cenários, é amplamente utilizada.

O primeiro paramêtro (true) é para que o jQuery faça uma deep copy; o segundo ({ }) é o objeto de destino, no nosso caso um novo objeto (que é retornado pela função).

Soluções mais complexas

Como disse, copiar um objeto no JavaScript de forma correta não é uma tarefa fácil. Procurei oferecer apenas exemplos mais comuns e simples, já que a pergunta não aparenta ser para casos complexos.

Segue alguns links de soluções que tentam ser mais completas: [1], [2], [3], [4].

Utilize seu framework

Se você utiliza um framework de grande porte, assim como jQuery, pode ser que ele lhe ofereça tal função, como o Underscore.js ou o MooTools.

Se você está utilizando Node.js existe o módulo clone (npm, github).

4
  • 2
    JSON.stringify lança uma exceção se o objeto tem referencia circular.
    – BrunoLM
    Commented 22/12/2013 às 19:53
  • Boa observação, adicionarei à resposta.
    – talles
    Commented 22/12/2013 às 19:55
  • 1
    Método de Brian Huisman causa um loop infinito em referencia circular, teste: jsfiddle.net/gB55W
    – BrunoLM
    Commented 22/12/2013 às 20:05
  • Dependendo da situação Object.assign pode resolver o problema, mas ele copia apenas propriedades enumeráveis e próprias de um objeto de origem para um objeto destino. Isso pode fazê-lo impróprio para combinar novas propriedades com um prototype se os objetos de origem contiverem getters. Para copiar definições de propriedades, incluindo sua enumerabilidade, para prototypes Object.getOwnPropertyDescriptor() e Object.defineProperty() devem ser utilizadas no lugar. developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/… Commented 30/08/2019 às 14:08
13

Copiar um objecto (com todos os seus atributos e métodos/funções) não é uma tarefa de resposta unica.

No caso de objectos mais complexos recomendo a utilização de uma biblioteca como o Mootools que tem uma função/método específico para isto: var clone = Object.clone(obj);

Aqui fica um exemplo para copiar um objecto simples com javascript:

Objecto:

var obj = {
    ano: 2013,
    param2: ['a', 'b', 'c', 'd', 'c']
};

Uma função que percorre as suas propriedades e faz uma cópia para um objecto temporário

function copiarObjecto(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    var temp = obj.constructor();
    for (var key in obj) {
        temp[key] = copiarObjecto(obj[key]);
    }
    return temp;
}

Atribuir a resposta da função quando se passa um objecto como parametro

var objCopia = copiarObjecto(obj);

Exemplo:

var obj = {
    ano: 2013,
    param2: ['a', 'b', 'c', 'd', 'c']
};

function copiarObjecto(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    var temp = obj.constructor();
    for (var key in obj) {
        temp[key] = copiarObjecto(obj[key]);
    }
    return temp;
}
var objCopia = copiarObjecto(obj);
objCopia.ano = 2014;

console.log(obj);
console.log(objCopia);

2
  • 4
    Boa resposta, simples e concisa, utilizando JavaScript puro! Só é preciso ter cuidado com objetos que contenham ciclos (i.e. referências pra si próprios). Veja uma solução alternativa para esses casos.
    – mgibsonbr
    Commented 22/12/2013 às 18:54
  • 1
    var temp = obj.constructor(); pode causar problemas se o construtor depender da passagem de parâmetros (e não faltou um new?). Talvez seja mais seguro algo como function F(){}; F.prototype = Object.create(obj); var temp = new F(); para garantir a herança - se o objetivo era esse.
    – bfavaretto
    Commented 22/12/2013 às 19:30
9

A maneira mais "segura" (i.e. menos sujeita a erros) de se clonar um objeto é utilizando uma biblioteca/framework já existente que suporte essa função, uma vez que clonar em teoria é simples (ver resposta do @Sergio, por exemplo) mas na prática existem detalhes e edge cases (casos incomuns) que podem trazer um resultado incorreto e/ou fazer a operação falhar.

Um exemplo é o de um objeto com ciclos (i.e. contendo uma referência pra si próprio):

var obj = { x:42 };
obj.y = [obj];

A maioria das bibliotecas populares não dão suporte à clonagem desses objetos:

// Mootools
console.log(Object.clone(obj)); // Uncaught RangeError: Maximum call stack size exceeded

// jQuery
console.log($.extend(true, {}, obj)); // Uncaught RangeError: Maximum call stack size exceeded 

// Underscore.js (Não dá suporte a cópias profundas)
console.log(_.clone(obj).y[0] === obj); // true

Nesse caso, uma solução seria usar o utilitário cycle.js da biblioteca JSON-js:

var clone = JSON.decycle(obj); // Remove os ciclos
clone = $.extend(true, {}, clone); // Faz a clonagem de fato (pelo método de sua escolha)
clone = JSON.retrocycle(clone); // Refaz os ciclos

console.log(clone === clone.y[0]); // true
2
  • Interessante que na minha reprodução do extend parece funcionar direitinho e não da o problema de Maximum call stack. Exemplo: jsfiddle.net/2Q4Xd
    – BrunoLM
    Commented 23/12/2013 às 0:32
  • @BrunoLM Experimenta console.log(copia === copia.y[0]); // false e console.log(original === copia.y[0]); // true. Não analisei seu código a fundo pra saber onde é o problema, mas o fato é que ele nao está realmente fazendo uma cópia profunda (uma vez que copia contém uma referência para original).
    – mgibsonbr
    Commented 23/12/2013 às 9:40
8

Creio que o caminho mais moderno (que funciona em todos navegadores modernos) seria usar Object.assign() que pode tornar tudo mais simples e eficiente, ao invés de usar loops ou JSON.parse() e muito menos jQuery ou qualquer lib externa, um exemplo bem simples:

var original = {
    "foo": "bar"
};

var copia = Object.assign({}, original);
copia.foo = "Olá, Stack Overflow";

//O original não é afetado, pois não é mais uma referencia
console.log("original:", original);

//Exibe o copia
console.log("copia:", copia);

Se tentar setar diretamente, ocorre de referenciar, o que vai afetar o original:

var original = {
    "foo": "bar"
};

var copia = original;
copia.foo = "Olá, Stack Overflow";

//O original não é afetado, pois não é mais uma referencia
console.log("original:", original);

//Exibe o copia
console.log("copia:", copia);


Compatibilidade

Conforme o MDN, os navegadores suportados são:

  • Chrome 45+
  • Edge
  • Firefox 34
  • Safari 9

Todavia existe um "Polyfill" para navegadores antigos sugerido pela propria MDN que permite usar em navegadores um pouco mais antigos:

if (typeof Object.assign != 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { // .length of function is 2
      'use strict';
      if (target == null) { // TypeError if undefined or null
        throw new TypeError('Cannot convert undefined or null to object');
      }

      var to = Object(target);

      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) { // Skip over if undefined or null
          for (var nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}
5

Eu acredito que você possa fazer assim, caso esteja utilizando jQuery:

var cachorro2 = $.extend(true, {}, cachorro);

ou então com Underscore:

var cachorro2 = _.clone(cachorro);

Alterações posteriores a cachorro2 não alterarão mais o objeto cachorro e vice-versa.


Infelizmente estas soluções não funcionam com RegEx, Data, etc... Portanto, o método mais elegante de fazer isto é criando uma função como esta chamada extend:

function extend(from, to) {
  if (from == null || typeof from != "object") return from;
  if (from.constructor != Object && from.constructor != Array) return from;
  if (from.constructor == Date || from.constructor == RegExp || from.constructor == Function ||
      from.constructor == String || from.constructor == Number || from.constructor == Boolean)
      return new from.constructor(from);

  to = to || new from.constructor();

  for (var name in from) {
    to[name] = typeof to[name] == "undefined" ? extend(from[name], null) : to[name];
  }

  return to;
}

E você pode utiliza-la assim:

var cachorro2 = extend(cachorro);

Veja o exemplo.

2
  • Não conheço underscore e lodash, mas se não me engano li que o clone do underscore não é deep copy, já no lodash tem isso. Saberia confirmar?
    – BrunoLM
    Commented 23/12/2013 às 0:26
  • @BrunoLM Sim, diferente do Underscore, o Lodash tem o cloneDeep além do clone. lodash.com/docs#cloneDeep Commented 23/12/2013 às 0:55
3

Uma cópia isolada do método extend do jQuery seria da seguinte maneira:

Primeiramente é necessário uma função para ver se o objeto deve ser clonado ou não

// para evitar loops infinitos o jQuery clona apenas objetos simples
// objetos complexos ele mantem a referencia

// este método verifica se um objeto é simples ou se é uma instancia
function isPlainObject(obj)
{
    if (typeof (obj) !== "object" || obj.nodeType || (obj instanceof Window))
        return false;

    try
    {
        if (obj.constructor &&
            !({}).hasOwnProperty.call(obj.constructor.prototype, "isPrototypeOf"))
        {
            return false;
        }
    }
    catch (e)
    {
        return false;
    }

    return true;
}

E a função para clonar:

function extend(deep, target, source)
{
    var copy, original, clone;
    for (var attr in source)
    {
        copy = target[attr];
        original = source[attr];

        if (target === original)
            continue;

        // se for uma cópia profunda e o objeto for simples
        if (deep && original && isPlainObject(original))
        {
            // obtem um objeto simples vazio para ser estendido

            if (original instanceof Array)
            {
                clone = copy && (copy instanceof Array) ? copy : [];
            }
            else
            {
                clone = copy ? copy : {};
            }

            // recursivamente estende o objeto interno 
            target[attr] = extend(deep, clone, original);
        }
        else if (original !== undefined)
        {
            // copia o valor para o objeto de destino
            // caso o objeto seja uma referencia o valor não é clonado
            target[attr] = original;
        }
    }

    // retorna o objeto estendido
    return target;
}

Para testar

function Pessoa(params)
{
    this.id = params['id'];
    this.nome = params['nome'];
    this.pai = null;
    this.toString = function () { return this.nome };
}

var luke = new Pessoa({ id: 1, nome: 'Luke' });
var vader = new Pessoa({ id: 2, nome: 'Darth' });
luke.pai = vader;
vader.pai = luke; // haha

var copia = extend(true, {}, luke);
luke.nome = "Luke Skywalker";

console.log(luke.nome);  // Luke Skywalker
console.log(copia.nome); // Luke

Criei um exemplo para demonstrar o funcionamento no jsFiddle.

Nota: Fiz algumas modificações e não garanto compatibilidade com browsers antigos.

-1

Uma alternativa para para criar um Objeto cuja seu protótipo herda outro Objeto é a função desenvolvida por Douglas Crockford:

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}
newObject = Object.create(oldObject);

A referência se encontra aqui.

1
  • Isso não está copiando o objeto. Apenas criando um novo objeto cujo [[Prototype]] é o objeto que se quer copiar. Como as referências serão mantidas, a cópia, de fato, não ocorreu. Fora que o polyfill está incorreto, uma vez que Object.create aceita dois argumentos. Commented 13/03/2021 às 14:11
-1

Atualmente existem duas formas nativas bem simples de copiar um objeto. você pode copiar utilizando o operador spread (...).

const obj = {propriedade1: 'a', propriedade2: 'b', metodo: function(){...}}
const obj_copy = {...obj}

O spread consegue copiar Arrays, basta substituir as chaves por colchetes:

const array = [1, 2, 3, 4, 5];
const array_copy = [...array];

Porém, ao utilizar o spread, os atributos de suas propriedades não serão copiados, eles serão todos defaults.

Se quiser copiar um objeto exatamente igual, inclusive os atributos de suas propriedades, basta utilizar esse método que desenvolvi:


    function copy(object, copy) {
    const names = Object.getOwnPropertyNames(object)
    names.map( ell => {
        if(ell in copy) return;
        let descriptor = Object.getOwnPropertyDescriptor(object, ell)
        Object.defineProperty(copy, ell, descriptor)
        })    
    }
    

Aqui demonstro como utilizar o método

const obj = Object.defineProperties({}, {
    name: {value: 'diego', writable: true, enumerable: true, configurable: true},
    greeting: {value: function() {return this.name}, enumerable: true}
})

let obj2 = {}
copy(obj, obj2)

Criei uma função estática chamado 'copy' que pode ser utilizada para copiar objetos normais (que não são arrays), para copiar um array basta utilizar o spread normal

Para utilizá-lo basta declarar um objeto vazio, chamar a função copy, passar o objeto a ser copiado como primeiro parâmetro e o objeto vazio como segundo parâmetro.

9
  • @AugustoVasques inclusvse esse capítulo que citou nem existe no livro "9.8.2 Defining Immutable Classes" talvez exista em versões mais antigas e ultrapassadas dele... Commented 24/04/2022 às 17:45
  • @AugustoVasqueseu adicionei o método no protótipo como exemplo, mas se quiser colocar esse método num objeto novo, com um objeto protótipo novinho em folha, é escolha dele, minha solução vai funcionar da mesma forma... Commented 24/04/2022 às 17:48
  • @AugustoVasques se eu tirar o método do protótipo e criar um método novinho você desnegativa minha resposta? Commented 24/04/2022 às 17:49
  • @AugustoVasques vou tirar do protótipo então, mas espero uma setinha para cima para compensar. Commented 24/04/2022 às 17:50
  • @AugustoVasques ao invés de colocar o método do protótipo fiz uma função própria, estática e sem graça para ver se te agrado (apesar se não ver problema algum de inseri-la no protótipo de Object), estou esperando meu upvote, ebaa. Commented 24/04/2022 às 18:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .