JavaScript orientado a objetos

La programación orientada a objetos o POO (OOP en inglés Object Oriented Programming) es una forma de realizar aplicaciones. Javascript por defecto no es un lenguaje orientado a objetos, pero gracias a Prototype es posible usarlo de esta forma. En este tutorial veremos cómo aplicar Javascript orientado a objetos.

En este tutorial doy por supuesto que se tiene una noción básica de POO.

Objetos en Javascript

En JS un objeto es un tipo de variable que se define de la siguiente manera:

var objeto = { Propiedad: "valor", Propiedad2: "valor2" };

Cuando se hace POO con JS se usan funciones (ya que JS es una lenguaje orientado a funciones) de la siguiente manera:

var miFuncion = function(parametro1, parametro2) {
  this.parametro1 = parametro1;
  this.parametro2 = parametro2;
};

Luego cuando se quiere crear el nuevo objeto basado en la función definida se usa:

var miObjeto = new miFuncion("valor1", "valor2");

Y para obtener los valores usados se hace de esta forma:

return miObjeto.parametro1;
return miObjeto.parametro2;

Eso regresaría ‘valor1′ y ‘valor2′. Hasta ahí es fácil, sin embargo esto solo no es bastante útil, ya que solo definimos propiedades al objeto y no métodos. Para definir un método se realiza con funciones dentro del objeto.

var miOtraFuncion = function(parametro1) {
  this.parametro1 = parametro1;
  this.miMetodo = function() {
    return this.parametro1;
  };
};

Y se llama al método de la siguiente manera:

var miOtroObjeto = new miOtraFuncion("Hola mundo");
miOtroObjeto.miMetodo();

Lo que regresaría ‘Hola mundo’. Una función puede tener tantos métodos y parámetros como se quiera. Ahora veamos un ejemplo un poco más útil.

var persona = function(nombre, edad, altura, peso) {
  this.nombre = nombre;
  this.edad = edad;
  this.altura = altura;
  this.peso = peso;
  this.mostrarDatos = function() {
    alert(
      "Nombre: " +
        this.nombre +
        " | Edad: " +
        this.edad +
        " | Altura: " +
        this.altura +
        "m | Peso: " +
        this.peso +
        "kg."
    );
  };
  this.mayoriaEdad = function() {
    if (this.edad >= 18) {
      alert(this.nombre + " es mayor de edad.");
    } else {
      alert(this.nombre + " es menor de edad.");
    }
  };
};
var johnDoe = new persona("John Doe", 25, 1.7, 72);
var janeDoe = new persona("Jane Doe", 16, 1.63, 59);
johnDoe.mostrarDatos(); //esto muestra un alert con el siguiente contenido: "Nombre: John Doe | Edad: 25 | Altura: 1.7 | Peso: 72kg.".
janeDoe.mayoriaEdad(); //este otro muestra un alert que dice: "Jane Doe es menor de edad.".

Este código permitiría crear tantas personas como se deseen, imprimir sus datos y comprobar si es mayor de edad. La POO como se puede ver es muy útil si se la sabe aprovechar y permite ahorrarse mucho código ya que con definir una vez el tipo de objeto (persona) luego es cuestión de crear tantos objetos de estos como se quiera, con sus parámetros y métodos ya creador.

Ahora para finalizar un último ejemplo de JSOO más avanzado.

var caja = function(alto, ancho, largo, contenido) {
  this.alto = alto;
  this.ancho = ancho;
  this.largo = largo;
  this.contenido = contenido || "";
  this.meterCosas = function(objeto) {
    if (
      objeto.alto <= this.alto &&
      objeto.ancho <= this.ancho &&
      objeto.largo <= this.largo &&
      this.contenido === ""
    ) {
      this.contenido = objeto;
    } else {
      alert("La caja no es suficientemente grande.");
    }
  };
  this.verContenido = function() {
    if (this.contenido === "") {
      alert("La caja esta vacía.");
    } else {
      alert("La caja contiene " + this.contenido.nombre);
    }
  };
  this.vaciarCaja = function() {
    this.contenido = "";
  };
};
var objeto = function(alto, ancho, largo, nombre) {
  this.alto = alto;
  this.ancho = ancho;
  this.largo = largo;
  this.nombre = nombre;
};
var miCaja = new caja(50, 50, 50);
var miObjeto = new objeto(30, 40, 10, "libro");
var miOtroObjeto = new objeto(40, 15, 52, "dvd");
miCaja.meterCosas(miObjeto);
miCaja.verContenido();
miCaja.vaciarCaja();
miCaja.meterCosas(miOtroObjeto);
miCaja.verContenido();

Como se puede ver en este ejemplo más avanzado tenemos una caja de 50x50x50 y dos objetos un libro de 30x40x10 y un dvd de 40x15x52 (tamaños raros, lo se). Lo primero que hacemos es guardar el libro en la caja, luego vemos si esta guardado, vaciamos la caja, tratamos de meter el dvd, no nos deja porque es muy grande y volvemos a ver el contenido y nos dice que está vacía.