Método jQuery extend()

En la publicación de hoy, aprenderemos sobre el método extender() en jQuery, que fusiona las propiedades de dos o más objetos.

extender() en jQuery

jQuery proporciona un método integrado .extend() que fusiona el contenido de dos o más objetos en el objeto de destino. Las propiedades de todos los objetos se agregan al objeto de destino si se pasan dos o más objetos como argumento a .extend().

Los argumentos Nulo o indefinido se ignoran al fusionar los objetos.

Sintaxis:

jQuery.extend(deep, target, [object1])

1. El profundo es un parámetro booleano. La combinación se vuelve recursiva si se especifica como verdadera.
2. El objetivo es un objeto que recibirá las nuevas propiedades.
3. El objeto1 es un objeto que contiene propiedades adicionales para fusionar.

Si solo se pasa un argumento en $.extend(), indica que se omite el argumento objetivo. En tal caso, el propio objeto jQuery se convierte en el objeto de destino.

Esta funcionalidad le permite incluir nuevas capacidades/funcionalidades en el espacio de nombres de jQuery. Esto puede beneficiar a los autores de complementos que necesitan agregar nuevos métodos a jQuery.

De forma predeterminada, $.extend() realiza una fusión no recursiva. Supongamos que una propiedad del objeto de destino es en sí misma un objeto o una matriz.

En ese caso, será anulado por completo por una propiedad con la clave idéntica en el segundo objeto o en los subsiguientes.

Al pasar true como primer argumento a la función $.extend(), fusiona recursivamente los objetos. Sin embargo, se copian las propiedades heredadas del prototipo del objeto.

Las propiedades que son un objeto creado a través de nuevo MyCustomObject(args) o tipos de JavaScript incorporados como Date o RegExp no se vuelven a crear y aparecen como objetos simples en el objeto o matriz resultante.

Tratemos de entenderlo con el ejemplo simple a continuación.

const firstObj = {
  name: 'John Doe',
  address: {city: 'Banglore', country: 'India'},
  age: 25
};
const secondObj = {
  address: {country: 'United Kingdom'},
  phone: '7878954123'
};
console.log($.extend(true, firstObj, secondObj));
console.log($.extend(false, firstObj, secondObj));

En el ejemplo anterior, hemos definido dos objetos con diferentes propiedades. Cuando llama al método extender, con el primer parámetro como true, que es un parámetro profundo, las propiedades del primer objeto se actualizarán recursivamente por las propiedades del segundo objeto.

En nuestro caso, el segundo objeto solo actualizará el país y se agregarán otras propiedades.

En el segundo caso, cuando llame al método extender con el segundo parámetro false, reemplazará las propiedades del primer objeto con las propiedades del segundo objeto.

Si existen propiedades similares, las propiedades del primer objeto se reemplazarán con las propiedades del segundo objeto; de lo contrario, se crearán nuevas propiedades del segundo objeto.

Intente ejecutar el fragmento de código anterior en cualquier navegador que admita jQuery, que mostrará el resultado a continuación.

{
  address: {
    city: "Banglore",
    country: "United Kingdom"
  },
  age: 25,
  name: "John Doe",
  phone: "7878954123"
}
{
  address: {
    country: "United Kingdom"
  },
  age: 25,
  name: "John Doe",
  phone: "7878954123"
}

Manifestación