8

No angular, para estender um objeto, costumo usar `angular.exted

var obj = {nome: "wallace"}
angular.extend(obj, {idade: 26})

Resultado:

Object {nome: "wallace", idade: 26}

Porém, percebi que, ao usar angular.merge, o resultado é o mesmo:

angular.merge(obj, {idade: 26})

Resultado:

Object {nome: "wallace", idade: 26}

Qual é a diferença entre ambos?

1

2 Respostas 2

11

As duas funções fazem a mesma coisa com uma sútil diferença. Ambas copiam as propriedades de um ou mais objetos fontes para um objeto destino.

A diferença

angular.merge

Faz uma cópia "profunda" (cópia recursiva) das propriedades, ou seja, propriedades que são objetos serão re-criadas de forma que não apontem para as mesmas referências da(s) base(s).

angular.extend

Faz uma cópia simples (ou rasa) das propriedades, ou seja, as propriedades que são objetos apontarão para a mesma referência da(s) base(s).

Exemplo:

angular.module('app', []);

angular.module('app').controller('mainController', mainControllerFn);

function mainControllerFn(){
  /* ***** merge ***** */
  
  var mPessoa1 = { nome: 'Joaquim', email: '[email protected]' };
  var mPessoa2 = { sobrenome: 'Soares', usuario: {username: 'joaquim1', isAdmin: false } };
  
  angular.merge(mPessoa1, mPessoa2);
  
  console.log(mPessoa1);
  console.log(mPessoa1.usuario === mPessoa2.usuario); 
  // mPessoa1.usuario e mPessoa2.usuario não apontam para a mesma referência
  
  /* ***** extend ***** */
  
  var ePessoa1 = { nome: 'Joaquim', email: '[email protected]' };
  var ePessoa2 = { sobrenome: 'Soares', usuario: {username: 'joaquim1', isAdmin: false } };
  
  angular.extend(ePessoa1, ePessoa2);
  
  console.log(ePessoa1);
  console.log(ePessoa1.usuario === ePessoa2.usuario); 
  // ePessoa1.usuario e ePessoa2.usuario apontam para a mesma referência
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="mainController as mainCtrl">
  </div>
</div>

1
  • Cara, então é muito sério a escolha de qual usar. O framework que eu uso trabalha relacionamentos como "subobjetos" (objetos dentro do outro). Então em alguns casos, vai ser preferível usar merge, para não ter problema com referências de objetos. Commented 10/10/2016 às 12:41
3

Extend:

angular.extend(dst, src1, src2, ...) is to shallow copy the properties of the source objects from right to left, all the way to the destination object.

Traduzindo: angular.extend(dst, src1, src2, ...) é a cópia simples das propriedades dos objetos de origem da direita para a esquerda, todo o caminho para o objeto de destino.

var src1 = { name: 'David', age: 30 }; // source 1
var src2 = { age: 26, skill: {} }; // source 2
var dst = {}; // destination

console.log(angular.extend(dst, src1, src2));
// Output: { name: 'David', age: 26, skill: {} }

console.log(src2.skill === dst.skill);
// Output: true
// src2 and dst share the same skill object due to shallow copy.


Merge:

angular.merge is an Angular 1.4+ API that is to deep (recursively) copy the properties of the source objects to the destination object.

Traduzindo: angular.merge é profunda (de forma recursiva), copia as propriedades dos objetos de origem para o objeto de destino.

Aqui usamos mesmo exemplo substituindo angular.extend por angular.merge:

var src1 = { name: 'David', age: 30 };
var src2 = { age: 26, skill: {} };
var dst = {};

console.log(angular.merge(dst, src1, src2));
// Output: { name: 'David', age: 26, skill: {} }
// It seems to the same result as the previous example's, however, ...

console.log(src2.skill === dst.skill);
// Output: false
// src2.skill and dst.skill point to different skill objects due to deep copy.

Referência: Copy vs. Extend vs. Merge

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 .