3

Tengo una función en JavaScript a la que le paso un objeto con valores. Ese objeto "coincide" con otro objeto que defino en la función (con valores de configuración) y que quiero extender (literalmente como el extend de jQuery).

Algo como esto:

function miFuncion(nuevaConfiguracion) {

  var miConfiguracion = {
    color: "blue",
    mostrar: true,
    fuente: "Arial"
  };

  // qué debo hacer aquí:
  miConfiguracion.extend( nuevaConfiguracion );

  // para que el resultado sea 
  // miConfiguracion = { color:"red", mostrar: false, fuente: "Arial" }

}

configuracion = {
  color: "red",
  mostrar: false
}

miFuncion( configuracion );

¿Existe alguna función nativa a JavaScript que haga lo que busco? Había pensado que quizás podría hacer un bucle que atravesara y actualizara los valores de segundo objeto al que quiero extender, pero estaba buscando una solución más sencilla.

No estoy utilizando jQuery ni ninguna otra biblioteca de JavaScript, estoy buscando una solución en JavaScript puro.

5 respuestas 5

4

Puedes usar la propiedad Object.assign() del método Object.

El primer parámetro es el objecto base, y el segundo, el objeto el cual se combinará con el objeto base.

var miConfiguracion = {
    color: "blue",
    mostrar: true,
    fuente: "Arial"
  };
  
var nuevaConfiguracion = {
    fuente: "Tahoma"  
}

var newCfg = Object.assign(miConfiguracion, nuevaConfiguracion);

console.log(newCfg);

3

Desde la especificación EcmaScript 6, existe la función Object.assign() la cual hace precisamente lo que tú buscas:

Object.assign(miConfiguracion, nuevaConfiguracion);

Nótese que dicha función recibe una cantidad indeterminada de parámetros, lo que equivale a hacer sucesivos assign, los cuales se aplicarán en el orden en que los envías, siempre sobre el objeto recibido en el primer parámetro.

3

Puedes extender un POJO de dos o más formas:

Object.assign

Cuidado: si por alguna razón tienes propiedades no enumerables o no propias del objeto, no serán copiadas.

Lo que hace éste método es simplemente copiar las propiedades de un objeto en otro y devolver el objeto destino.

function extend(newConfig) {
  let _default = {
    color: "blue",
    mostrar: true,
    fuente: "Arial"
  };

  return Object.assign(_default, newConfig);
}

let configuration = extend({
  color: "red",
  mostrar: false
});

console.log('Configuration:', configuration);

Object.create

Este método es similar pero la diferencia está en que el primer parámetro viene a ser el prototipo del nuevo objeto y, el segundo parámetro las propiedades del objeto. Este método es bastante útil cuando se quiere extender un objeto añadiendo propiedades personalizadas que pueden ser o no ser enumerables, configurables o editables.

function extend(properties) {
  let _default = {
    color: "blue",
    mostrar: true,
    fuente: "Arial"
  };

  return Object.create(_default, properties);
}

let configuration = extend({
  color: {
    value: 'red',
    writable: true,
    enumerable: true,
    configurable: true
  },
  mostrar: {
    value: false,
    writable: true,
    enumerable: true,
    configurable: true
  }
});

console.log('Configuration:', configuration);

2

A partir de ECMAScript 2018 se puede utilizar el operador de propagación (spread operator)

La sintaxis extendida permite que una iteración como una expresión de matriz o cadena se expanda en lugares donde se esperan cero o más argumentos (para llamadas a funciones) o elementos (para literales de matriz), o una expresión de objeto para expandirse en lugares donde cero o más se esperan pares clave-valor (para literales de objeto).

Ejemplo:

var configuracion = {
  color: "red",
  mostrar: false,
};
var miConfiguracion = {
  color: "blue",
  mostrar: true,
  fuente: "Arial",
    ...configuracion
};

console.log(miConfiguracion);

0

Te puede funcionar Object.prototype, en el enlace esta esta un ejemplo de como implementarlo:

var Person = function() {
    this.canTalk = true;
    this.greet = function() {
        if (this.canTalk) {
            console.log("Hola, Soy " + this.name);
        }
    };
};

var Employee = function(name, title) {
    this.name = name;
    this.title = title;
    this.greet = function() {
        if (this.canTalk) {
            console.log("Hola, Soy " + this.name + ", el " + this.title);
        }
    };
};
Employee.prototype = new Person();

var Customer = function(name) {
    this.name = name;
};
Customer.prototype = new Person();

var Mime = function(name) {
    this.name = name;
    this.canTalk = false;
};
Mime.prototype = new Person();

var bob = new Employee('Bob','Constructor');
var joe = new Customer('Joe');
var rg = new Employee('Red Green','Manitas');
var mike = new Customer('Mike');
var mime = new Mime('Mime');
bob.greet();
joe.greet();
rg.greet();
mike.greet();
mime.greet();

1
  • 2
    Recomiendo que agregues un ejemplo, ya que los enlaces externos tienden a fallar el 16 feb. 2017 a las 19:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.