Cómo construir objetos en JavaScript

¡Comparte nuestro contenido!

En una ocasión anterior, vimos como crear elementos HTML desde cero con JavaScript. Ahora, vamos a aprender a crear objetos en este mismo lenguaje. Para esto, recordemos que un objeto es un elemento o entidad que puede representar un “algo” sea real o no. Como en cualquier lenguaje de programación, los objetos tienen atributos o propiedades y métodos que representan las acciones que se pueden realizar.

¡Construyamos objetos desde cero!

En JavaScript, tenemos 3 formas diferentes de crear un objeto. La primera forma consiste en definir la variable y asignarle elementos dentro de un par de llaves. Observe el ejemplo:

var persona = {
   Nombre: "Juan Carlos",
   Edad: 25
};

La segunda manera de crear un objeto es a través de las palabras reservadas new y Object. Esto nos obliga a declarar sus atributos por fuera:

var mascota = new Object();
mascota.Nombre = "Rufus";
mascota.Especie = "Perro";

La tercera forma consiste en crear una función constructora que nos permita definir los atributos del objeto y asignarlos de manera indirecta, luego creamos el objeto con la palabra reservada new e invocando a la función recién creada.

function vehiculo(tipo, llantas){
   this.Tipo = tipo;
   this.Llantas = llantas;
}
var carro = new vehiculo("Motocicleta", 2);

Definiendo los atributos del objeto

Los atributos son las características o propiedades que definen al objeto. Como vimos más arriba, la forma de definirlos depende de que método hayamos usado para crear el objeto. Por ejemplo, para añadir un nuevo atributo al objeto persona, sólo necesitamos crear una pareja del tipo atributo:valor, observe el ejemplo:

var persona = {
   Nombre: "Juan Carlos",
   Edad: 25,
   Ocupacion: "Taquero",
   EdoCivil: "Soltero"
};

Pero si usamos la segunda forma, entonces tendremos que usar la forma; objeto.atributo = valor, por ejemplo:

var mascota = new Object();
mascota.Nombre = "Rufus";
mascota.Especie = "Perro";
mascota.Edad = 2;
mascota.Color = "pardo";

Ahora bien, en el caso de la tercera forma, notemos el uso de this para añadir nuevos atributos al objeto que dependerán de la cantidad de parámetros en la función constructora, por ejemplo:

function vehiculo(tipo, llantas, marca, modelo){
   this.Tipo = tipo;
   this.Llantas = llantas;
   this.Marca = marca;
   this.Modelo = modelo;
}
var carro = new vehiculo("Motocicleta", 2, "Honda", "Cargo 150");

¿Cómo acceder a los atributos?

Para tener acceso a los atributos de un objeto, tenemos dos maneras:

• A través de la forma objeto.atributo, por ejemplo: persona.Nombre
• A través del uso de corchetes, por ejemplo: mascota[“Color”]

Probemos entonces:

console.log("Me llamo " + persona.Nombre);
persona.Nombre = "Carlos";
console.log("Prefiero que me llamen " + persona["Nombre"]);
console.log("Tengo un cachorro llamado " + mascota.Nombre + " y es de color " + mascota["Color"]);
vehiculo.Tipo = "Moto";
console.log("Le encanta subirse a mi " + vehiculo["Tipo"]);

Con el siguiente resultado.

¡Los objetos realizan acciones!

Como se dijo al principio, todos los objetos tienen un conjunto de acciones que realizan, estas acciones no son otra cosa que funciones y reciben el nombre de métodos. Para entender mejor esto, hagamos un método llamado saludar para nuestro objeto persona:

Saludar: function(){
   alert("¡Hola! Me llamo " + this.Nombre);
}

Igual que los atributos, hemos definido el método Saludar como una función anónima. Para utilizarla basta con hacer:

persona.Saludar();

Y obtendremos el siguiente resultado.

Hagamos ahora un método para preguntarle algo al usuario:

Preguntar: function(){
   return prompt("¿Cómo te llamas?");
}

Observemos el uso de la palabra reservada return para regresar un valor como resultado de la función. Ahora, usemos el método recién creado.

var respuesta = persona.Preguntar();

Finalmente, respondamos a la pregunta con otro método que nos permita hacerlo al obtener el nombre de la persona como un parámetro.

Responder: function(respuesta){
   alert("¡Mucho gusto, " + respuesta + "!");
}

Llamemos la función Responder.

persona.Responder(respuesta);

Podemos ver el resultado final

Prueba el código

¡Y eso es todo por hoy, amigos! Puedes probar el código en JSFiddle, editarlo o ajustarlo a tus necesidades ¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

Xamus Dyson

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

www.cablenaranja.com

¡Comparte nuestro contenido!