• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 6/12/20

Objetos I

Log in or subscribe for free to enjoy all this course has to offer!

 

¿Qué es un objeto?

Antes de hablar de qué es un objeto en el mundo de la programación, piensa en un objeto real, por ejemplo un bolígrafo. ¿Cuáles son sus características? El color en el que escribe, la marca, el material del que está hecho (plástico o metal). Sin olvidar lo mas importante: podemos escribir con él. Un bolígrafo posee ciertas propiedades que le caracterizan.

Ahora pensemos en cómo llevar a la práctica la idea de trabajar con objetos en nuestro programa. En JavaScript un objeto es una entidad que posee ciertas propiedades y que puede realizar ciertas acciones. Cada propiedad define una característica del objeto, por ejemplo el color del bolígrafo. Además, el objeto puede tener una o varias funcionalidades, por ejemplo, un bolígrafo puede escribir.

La programación orientada a objetos (POO) es una manera de desarrollar programas utilizando objetos. Cuando utilizamos la POO, buscamos representar los elementos que componen el programa bajo la forma de objetos. Esto se acerca más a cómo funcionan las cosas en el mundo real, por lo que ayuda al desarrollador a resolver problemas complejos.

Hasta ahora has aprendido a crear programas basados en funciones: lo que se llama programación funcional. Ahora vamos a crear programas basándonos en objetos.

Los objetos en JavaScript

Como en otros lenguajes de programación, JavaScript permite programar utilizando objetos. JavaScript nos proporciona una serie de objetos que podemos utilizar en nuestros programas, y además, podemos crear nuestros propios objetos. Veamos cómo.

Creación de un objeto literal

El siguiente ejemplo representa en JavaScript un objeto bolígrafo de la marca Bic que escribe en azul.

var boligrafo = {
    material: "plastico",
    color: "azul",
    marca: "Bic"
};

En JavaScript podemos crear objetos definiendo sus propiedades como un conjunto de nombres y de valores separados por dos puntos, en el interior de un par de llaves. A esta forma de crear objetos se le llama sintaxis literal. 

El código previamente analizado define una variable llamada  boligrafo cuyo valor es un objeto. Para simplificar, nos referimos a  boligrafo  como un objeto. Este objeto posee tres propiedades: material, color y marca. Cada propiedad está constituida por un nombre y un valor y, salvo la última, separada de la siguiente por una coma. Una propiedad puede verse como una especie de variable ligada a un objeto.

Creación de un objeto con ayuda de un constructor

 Otra forma de crear objetos en JavaScript consiste en utilizar un constructor. Un constructor es una función particular que tiene el cometido de iniciar un nuevo objeto. Su nombre comienza por convención por una letra mayúscula aunque no es obligatorio.

A la creación de un objeto a partir de un constructor se le llama instanciación. Se efectúa con ayuda de la palabra reservada "new". Existen, varias formas de crear objetos, por lo que de momento, no utilizaremos esta forma.

 

Utilización de un objeto

Una vez has creado el objeto, puedes acceder al valor de sus propiedades de la siguiente forma:  nombreObjeto.nombrePropiedad  

Propiedades del objeto boligrafo
Propiedades del objeto bolígrafo

 

El acceso a una propiedad de un objeto es una expresión que produce un valor. Podemos incluir este valor en otras expresiones más complejas. Por ejemplo, podemos concatenar los valores obtenidos de las propiedades de un objeto con una cadena de texto.

var boligrafo = {
    material: "plastico",
    color: "azul",
    marca: "Bic"
};

console.log("Mi bolígrafo es de " + boligrafo.material + ", de la marca " + boligrafo.marca + " y escribe de color " + boligrafo.color);

 

Concatenando las propiedades de un objeto con una cadena de texto
Concatenando las propiedades de un objeto con una cadena de texto

 

Modificación de un objeto

Una vez que un objeto ha sido creado, podemos modificar los valores de sus propiedades con la sintaxis siguiente:  nombreObjeto.nombrePropiedad = nuevoValor .

var boligrafo = {
    material: "plastico",
    color: "azul",
    marca: "Bic"
};

console.log("Mi bolígrafo es de " + boligrafo.material + ", de la marca " + boligrafo.marca + " y escribe de color " + boligrafo.color);

boligrafo.color = "rojo";

console.log("Mi bolígrafo es de " + boligrafo.material + ", de la marca " + boligrafo.marca + " y escribe de color " + boligrafo.color);

 

Reasignación del valor de una propiedad del objeto bolígrafo
Reasignación del valor de una propiedad del objeto bolígrafo

 

En JavaScript se pueden también añadir nuevas propiedades de forma dinámica a un objeto ya creado.

var boligrafo = {
    material: "plastico",
    color: "azul",
    marca: "Bic"
};

boligrafo.precio = 1.5;

console.log("Mi bolígrafo es de " + boligrafo.material + ", de la marca " + boligrafo.marca + " y escribe de color " + boligrafo.color + ". Cuesta " + boligrafo.precio + " €");

 

Añado la propiedad
Añado la propiedad "precio" después de haber creado el objeto

 

Ejemplo: Un mini juego de rol

La mayoría de cursos de programación orientada a objetos utilizan ejemplos que crean objetos de animales o coches. Vamos a hacer algo un poco más divertido: desarrollemos un mini juego de rol utilizando objetos.

En un juego de rol, cada personaje tiene unas características y unas habilidades diferentes.

Creación de un personaje

var personaje = {
    nombre: "Héroe",
    vida: 100,
    fuerza: 10
};

El personaje "Héroe" está representado por un objeto personaje que contiene tres propiedades: nombre, vida y fuerza. Cada propiedad tiene un valor definido que definen el estado de nuestro personaje en un momento concreto.

Ahora que nuestro personaje tiene una serie de propiedades, ciertos valores como por ejemplo, la vida puede modificarse si el personaje es atacado, o quizás la fuerza pueda aumentar si añadiésemos una propiedad experiencia que aumentase con el tiempo.

var personaje = {
    nombre: "Héroe",
    vida: 100,
    fuerza: 10
};

console.log(personaje.nombre + " tiene " + personaje.vida + " puntos de vida y " + personaje.fuerza + " de fuerza");

personaje.vida = personaje.vida - 20;

personaje.fuerza = personaje.fuerza + 10;

console.log(personaje.nombre + " tiene " + personaje.vida + " puntos de vida y " + personaje.fuerza + " de fuerza");

Podemos modificar los valores de vida y fuerza del personaje accediendo a sus propiedades y actualizando sus valores.

Mostramos por consola los valores de vida y fuerza
Mostramos por consola los valores de vida y fuerza

 

Veamos cómo perfeccionar la manera de modificar el estado de nuestro objeto a través de funciones, también llamadas métodos.

Los métodos

En el ejemplo anterior, hemos utilizado la instrucción console.log() para mostrar el estado del personaje en dos ocasiones, cosa nada recomendable (recuerda, nunca repitas código). Como ya sabes, podemos crear una función que describa el estado del personaje. Podremos entonces llamar a esa función cada vez que queramos saber cómo se encuentra el personaje.

Añade un método a un objeto

Observa el siguiente ejemplo, sin copiarlo en tu código.

// Retorna la descripción de un personaje
function describir(personaje) {
    var descripcion = personaje.nombre + " tiene " + personaje.vida + " puntos de vida y " + personaje.fuerza + " de fuerza";
    return descripcion;
}

console.log(describir(personaje));

Hemos creado una función que se encargue de describir el estado del personaje.

La función  describir() utiliza las propiedades de un personaje que pasamos como parámetro. En lugar de definir una función externa al objeto, podemos añadir esta función de forma interna, como una nueva propiedad del objeto. 

var personaje = {
    nombre: "Héroe",
    vida: 100,
    fuerza: 10,

    // Retorna la descripción del personaje
    describir: function () {
        var descripcion = this.nombre + " tiene " 
                        + this.vida + " puntos de vida y " 
                        + this.fuerza + " de fuerza";
        return descripcion;
    }

};

console.log(personaje.describir());

// Aurora est blessée par une flèche
personaje.vida = personaje.vida - 20;

// Aurora trouve un bracelet de force
personaje.fuerza = personaje.fuerza + 10;

console.log(personaje.describir());

 El objeto personaje posee una nueva propiedad llamada describir. El valor de esta propiedad es una función que retorna el estado del personaje en forma de texto.

Una propiedad cuyo valor es una función se llama método. Un método permite definir una acción para un objeto. Se puede expresar también como que un método añade un comportamiento al objeto.

 

 

Llamada de un método sobre un objeto

Para obtener la descripción de un personaje, utilizamos ahora la expresión  personaje.describir() en lugar de  describir(personaje) . Esta diferencia es esencial.

  •  describir(personaje)  llama a una función externa pasándole un objeto personaje como parámetro.

  •  personaje.describir() llama a la función interna al objeto personaje. En este caso, la función forma parte de la definición del objeto: es un método.

Para llamar a un método la sintaxis es  nombreObjeto.nombreMetodo() .

La palabra clave this

Observa el cuerpo del método  describir() . Aparece una palabra clave que no habíamos visto hasta ahora: this. La palabra clave this representa al objeto dentro del cual se encuentra el método. En este caso, la palabra this, hace referencia al objeto  personaje .

El método  describir() no toma ningún personaje como parámetro: utiliza this para acceder a las propiedades del objeto sobre el cual ha sido llamado.

Objetos predefinidos de JavaScript

El lenguaje JavaScript pone a disposición de los programadores un cierto número de objetos con una serie de propiedades y métodos. Hemos utilizado ya algunos:

  • El objeto console da acceso a la consola del navegador. Por ejemplo, podemos escribir un mensaje en la consola haciendo uso del método log() del objecto console ->  console.log(); 

  • El objeto Math contiene métodos para realizar operaciones matemáticas. Por ejemplo, Math.random() retorna un número aleatorio entre 0 y 1.

 Balance

Los conceptos más importantes que debes recordar de este capítulo son los siguientes:

  • En JavaScript, un objeto está constituído por un conjunto de propiedades.

  • Una propiedad es una asociación entre un nombre y un valor.

  • Cuando el valor de una propiedad es una función, decimos que ésta es un método del objeto.

En el próximo capítulo, ampliaremos nuestro pequeño juego de rol y aprovecharemos par descubrir otras posibilidades que ofrece la utilización de objetos en JavaScript.

 

Practica tú mismo

Crea el objeto coche

Crea un objeto llamado coche que tenga algunas características como el color, marca, modelo y si está encendido o apagado. Crea un método que modifique este último valor y que permita arrancar o apagar el coche.

var coche = {
  // añade aquí las propiedades y el método_arrancar
}

console.log(coche.color);
console.log(coche.marca);
console.log(coche.modelo);
console.log(coche.arrancado);
console.log('-------------')
console.log(coche.arrancar());

 

Resultado mostrado en la consola
Resultado mostrado en la consola

 

Modelización de una cuenta bancaria

Escribe un programa que cree un objeto "cuenta" con las siguientes propiedades:

  • Una propiedad titular con el valor "Alex".

  • Una propiedad saldo, teniendo como valor inicial 0.

  • Un método ingresar() que permita añadir dinero a la cuenta, pasando la cantidad como parámetro

  • Un método extraer() que permita retirar la cantidad pasada como parámetro.

  • Un método informar() que retorne la información del estado de la cuenta. 

Utiliza este objeto para mostrar la descripción, ingresar y extraer dinero y volver a mostrar la descripción del estado de la cuenta.

var cuenta = {
  // añade aquí las propiedades y métodos 
}

console.log(cuenta.titular);
console.log(cuenta.saldo);
console.log('-------------')
console.log(cuenta.ingresar(80));
console.log(cuenta.extraer(20));

console.log(cuenta.informar());

 

Resultado mostrado por consola por el objeto cuenta
Resultado mostrado por consola por el objeto cuenta

Solución de los ejercicios

Intenta primero resolver los ejercicios propuestos por ti mismo. Si ves que te bloqueas, suele venir bien cambiar de actividad y volver a intentarlo más tarde. Si no lo consigues, puedes consultar las soluciones aquí

 

 

 

Example of certificate of achievement
Example of certificate of achievement