Merge?

O recurso de merge de objetos é muito utilizado em construtores e métodos de configuração. Provavelmente você já deve ter usado algum plugin jQuery que aceita parâmetros opcionais. Falando a nossa lingua você pode "mergear" objetos utilizando o próprio jQuery ou recursos do ES6, claro nem todo IE, ops! navegador, aceita o ES6, porém estamos na era da "transpilação" onde quase tudo é possível.

Merge com jQuery.

Além do jQuery proporcionar recursos de manipulação do DOM, existem recursos que são úteis para manipulação de objetos por ex: $.each é o $.extend.

O método $.extend possui duas sobrecargas possíveis veja no link de referências.

Segue um exemplo de implementação realizando o merge de prototypes:

var Animal = function Animal(){};
Animal.prototype = {
  setResult: function setResult(message){
   var result = document.createElement('p');
   result.innerHTML = message + '<br/>Strength: ' + String(this.strength);
   document.getElementById("results").appendChild(result);
  }
};

var Lion = function Lion(){};
Lion.prototype = {
  strength: 10,
  name: 'Lion',
  roar: function roar(){
   this.setResult(this.name + ' Rooooaaarrrrrr.');
  }
};

var Falcon = function Falcon(){};
Falcon.prototype = {
  strength: 2,
  name: 'Falcon',
  fly: function fly(){
   this.setResult(this.name + ' flying.');
  }
};

var LionFalcon = function LionFalcon(){};

$.extend(Lion.prototype, new Animal());
$.extend(Falcon.prototype, new Animal());
$.extend(LionFalcon.prototype, new Falcon(), new Lion(), new Animal());

//Ajustando nova classe
LionFalcon.prototype.name = 'Lion Falcon';

var lion = new Lion();
var falcon = new Falcon();
var lionFalcon = new LionFalcon();


(function(){
	function roar(){
  	for(var i=0, c=arguments.length; i<c; i++){
    	if(arguments[i].roar){
      	arguments[i].roar();
      }
    }
  }
  
  function fly(){
    for(var i=0, c=arguments.length; i<c; i++){
    	if(arguments[i].fly){
      	arguments[i].fly();
      }
    }
  }
  
  roar(lion, falcon, lionFalcon);
  fly(lion, falcon, lionFalcon);
})();

JsFiddle: https://jsfiddle.net/willsenabr/xwnm2o62/

Merge com ES6

Com a utilização do método *Object.assign também é possível receber o mesmo resultado, veja:

  • Este exemplo ficaria melhor se fosse escrito totalmente em ES6, com class, lambdas e etc.., porém o foco é demonstrar a utilização do Object.assign!
var Animal = function Animal(){};
Animal.prototype = {
  setResult: function setResult(message){
   var result = document.createElement('p');
   result.innerHTML = message + '<br/>Strength: ' + String(this.strength);
   document.getElementById("results").appendChild(result);
  }
};

var Lion = function Lion(){};
Lion.prototype = {
  strength: 10,
  name: 'Lion',
  roar: function roar(){
   this.setResult(this.name + ' Rooooaaarrrrrr.');
  }
};

var Falcon = function Falcon(){};
Falcon.prototype = {
  strength: 2,
  name: 'Falcon',
  fly: function fly(){
   this.setResult(this.name + ' flying.');
  }
};

var LionFalcon = function LionFalcon(){};

Lion.prototype = Object.assign({}, Lion.prototype, Animal.prototype);
Falcon.prototype = Object.assign({}, Falcon.prototype, Animal.prototype);
LionFalcon.prototype = Object.assign({}, LionFalcon.prototype, Falcon.prototype, Lion.prototype, Animal.prototype);

//Ajustando nova classe
LionFalcon.prototype.name = 'Lion Falcon';

var lion = new Lion();
var falcon = new Falcon();
var lionFalcon = new LionFalcon();

(function(){
	function roar(){
  	for(var i=0, c=arguments.length; i<c; i++){
    	if(arguments[i].roar){
      	arguments[i].roar();
      }
    }
  }
  
  function fly(){
    for(var i=0, c=arguments.length; i<c; i++){
    	if(arguments[i].fly){
      	arguments[i].fly();
      }
    }
  }
  
  roar(lion, falcon, lionFalcon);
  fly(lion, falcon, lionFalcon);
})();

https://jsfiddle.net/willsenabr/j994ef2f/

Onde usar o merge de objetos?

O merge de objetos é muito útil em um cenário de parâmetros opcionais ou até mesmo para seguir outros padrões como heranças por concatenação, veja mais informações na parte de referências, você encontrará artigos que abortam este padrão.

Até a próxima

Usar o merge de objetos seguindo o padrão ES6 é o melhor caminho visto que este é um recurso já implementado pelos navegadores atualizados, que estão afim de ajudar em nosso mundo frontend, oops desculpe Internet Explorer, já no mundo backend Node.js esse recurso pode ser utilizado tranquilamente.

Referências