Programación Orientada a Objetos con JavaScript

La programación orientada a objetos vino a innovar la forma de programar. Vino a pasar de una estructura confusa y saltos de código innecesarios a una forma mas fácil de estructurar y compartir código.

La POO (Programación Orientada a Objetos) es un paradigma de programación basado en la comparación de una clase como lo haríamos en la vida real. Estas clases contienen atributos (Características de la clase) y métodos (Acciones que puede realizar una clase).

JavaScript al tener un paradigma de programación Basada en Prototipos su programación es distinta a la de lenguajes de programación Orientados a Objetos. Pero con el avance del lenguaje en el estándar EcmaScript 6 se adopto esta Forma.

Pero antes de entrar en materia tenemos que entender un par de términos.

  • Instancia: Es un objeto de la clase.
  • Método: Es alguna acción que puede realizar el Objeto.
  • Propiedad: Características del objeto.
  • Herencia: Propiedades y Métodos que se "heredan" o se obtienen de otra clase.
  • Encapsulamiento: Determinar que propiedades y métodos se usan dentro de la clase o fuera de ella.
Vamos a empezar.

Antes declarar una clase para un objeto se declaraba asi:


  function Vehiculo() {}

Y para asignar un método se hacia por prototipos.

  Vehiculo.prototype.Arrancar = function() {
    return console.log("Estoy Arrancando");
  };

Claro esta forma de POO no dejo de ser usada y hay quienes prefieren usarla.

Pero con el estándar EcmaScript 6 las cosas se parecen mas a la POO de otros lenguajes. El mismo ejemplo pero en ES6.

  class Vehiculo {
    Arrancar() {
      console.log("Estoy Arrancando");
    }
  }

Un poco mas limpio y si parece POO.

En ambas tenemos una clase llamada "Carro" que tiene un método llamado "Arrancar". Pero con ES6 esto se hace mas claro. Ahora vamos a continuar con el ejemplo.

  class Vehiculo {
    constructor(){
      this.ruedas = "4";
      this.motor = "v8";
    }
    Arrancar() {
      console.log("Estoy Arrancando con " + this.ruedas);
    } 
    Frenar() {
      console.log("Estoy frenando");
    }
  }

Ahora tenemos este código. Pero ahora añadimos 2 propiedades "ruedas" y "motor". Vamos a aclarar, para quienes no sepan la variable "this" se refiere a la misma clase. Ademas añadimos un "constructor" este determina el estado inicial de un objeto. Ahora vamos a añadir abajo las siguientes lineas de código.

  var Mazda = new Vehiculo();

  Mazda.Arrancar();

  Mazda.Frenar();

La variable "Mazda" es una instancia de la clase "Vehiculo". Para comprender mejor: La clase "Vehiculo" es como un plano de construcción, y la instancia seria el objeto construido.

Vamos a imaginar que el siguiente código es un constructor de carros. Donde la clase "Vehiculo" es el modelo y "Mazda" el objeto final con las características del modelo o clase.

Ahora vamos a aprender un poco a usar el constructor y las propiedades. En el constructor añadan:

  constructor(color){
    this.ruedas = "4";
    this.motor = "v8";
    this.color = color;
  }

Y añadan 2 métodos mas:

  MostrarColor() {
    console.log("Soy un vehiculo de color: " + this.color);
  }
  CambiarColor(color) {
    this.color = color;
  }

Ahora vamos a cambiar la forma de instanciar la clase.


  var Mazda = new Vehiculo("Blanco");

Y vamos a añadir las siguientes lineas después de la instancia.


  Mazda.MostrarColor();

  Mazda.CambiarColor("Azul");

  Mazda.MostrarColor();

¡Ahora a Explicar!. No es complicado el código. Primero creamos la clase con 3 propiedades y una es pasada a través del constructor. Agregamos 2 métodos uno para cambiar y otro para mostrar el color. Estos métodos se llaman "getters" (para cambiar) y "setters" (retornar). Pero esto lo explicare en otro post.

Después mostramos el color inicial. Lo cambiamos. Y mostramos el nuevo color. Hasta los momentos sencillo ¡¿no?!. Pudimos aprender acerca de clases, métodos, propiedades, instancia, y algo breve acerca de métodos getters y setters.

Pero como siempre el aprendizaje viene de la practica y de comprender lo que se esta aprendiendo. No solamente memorizar. Una vez uno comprende estos términos Programar Orientado a Objetos se hace mas sencillo.

Y les dejo una de mis citas favoritas.

"Nunca Pares de Aprender" Platzi.

Comentarios

Entradas populares de este blog

ExpressJS - Crea Aplicaciones Web Robustas y de Calidad

Mejora la reputación online de tu marca - Importancia del sitio web

Diseño mas allá de lo visual - ¿Que es diseño?