Método jQuery.extend()

  • Por
Uno de los métodos del paquete utilities de jQuery, que sirve para extender el contenido de dos o más objetos en uno de ellos.
Vamos a ofrecer una referencia rápida para el método jQuery.extend(), que nos ofrece una utilidad para mezclar mezclar varios objetos en uno, es decir, colocar los contenidos de todos esos objetos en uno de ellos.

El método extend pertenece a la clase jQuery, y se invoca directamente sobre ella, como si fuera un método estático de programación orientada a objetos. Como en jQuery la variable $ es un atajo de la variable jQuery, podríamos invocar a este método con estas dos posibilidades de código:

jQuery.extend(x, y, z);

O bien:

$.extend(x, y, z);

Estos dos ejemplos de código harían exactamente lo mismo, colocar en el objeto "x" todos los contenidos de los objetos "x", "y" y "z". El método extend() puede recibir cualquier número de parámetros y siempre pondrá todos los contenidos de los objetos en el objeto recibido en el primer parámetro.

Ejemplo de extend() de jQuery

Veamos cómo funciona jQuery.extend() a través de un sencillo ejemplo.

var a = {
   uno: "hola",
   otro: "adios"
};
var b = {
   uno: "otra cosa",
   dos: "loquesea"
};
jQuery.extend(a, b);

En este caso extend() recibe dos parámetros, que son dos objetos. Por tanto, mete las opciones del segundo objeto en el primero. Después de la llamada a extend(), el objeto del primer parámetro tendrá sus propiedades más las propiedades del objeto del segundo parámetro. Si alguna de las opciones tenía el mismo nombre, al final el valor que prevalece es el que había en el segundo parámetro.

Así pues, después de su ejecución, el objeto definido en la variable "a" tendrá estos datos:

{
   uno: "otra cosa",
   otro: "adios",
   dos: "loquesea"
}

Esto quizás parezca que no sirve para mucho, pero en jQuery se utiliza bastante por ser una manera cómoda de mezclar dos cosas en una. El caso más claro es mezclar los objetos de "options" para configurar un plugin, pero realmente es una acción que encontraremos por ahí varias veces. De alguna manera, hacer un extend() es como hacer que un objeto herede las cosas de otro, lo que lo convierte en un mecanismo que podrá venir bien en diversos contextos.

Para ver otros ejemplos de extend() consultar el Manual de jQuery, en la sección donde se habla de la configuración de opciones en plugins en jQuery.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

shidalgo

07/3/2011
Buen tutorial
Gracias. Hoy he terminado los 48 artículos. Estos han sido muy útiles y explicativos.

luismi84

18/8/2011
Codigo ejemplo completo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Método jQuery CSS</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script language="javascript">
$(document).ready(function(){

var bici = {
clase: "bici",
marca: "sin marca"
};
var color = {
marca: "orbea",
color: "roja"
};

$("#texto").html("Mi " + bici.clase + " es " + bici.color + " y es " + bici.marca);

jQuery.extend(bici, color);

$("#boton").click(function(e){
$("#texto").html("Mi " + bici.clase + " es " + bici.color + " y es " + bici.marca);
});
})
</script>
</head>

<body>
<p>Extender mediante el metodo extend()</p>
<button id="boton" value="extender">Pulsa para extender</button>
<p><div id="texto"></div></p>
</body>
</html>

Ariii

25/8/2014
Gracias
Muchas gracias !! Excelente las explicaciones, como siempre, este es como el 4to manual que estoy estudiando de desarrolloweb.com, y realmente son muy buenos, he aprendido un montón.