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.
Y para asignar un método se hacia por prototipos.
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.
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.
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.
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:
Y añadan 2 métodos mas:
Ahora vamos a cambiar la forma de instanciar la clase.
Y vamos a añadir las siguientes lineas después de la instancia.
¡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.
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:
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
Publicar un comentario