Crysfel's Blog - Blog geek

JavaScript es un excelente lenguaje para programar orientado a objetos, conocido también como JSON (JavaScript Object Notation), con JavaScript podemos hacer herencia, tanto de propiedades como de métodos, algunos desarrolladores no toman muy en serio este lenguaje como OPP, pues están acostumbrados a escribir clases estilo C# y Java.

Pero, ¿Qué beneficio tiene programar orientado a objetos? ¿Qué es lo grandioso de esto? Bueno, existen muchas ventajas, una de ellas es el encapsulamiento, la abstracción, reutilización de código, herencia simple, sobre escritura de métodos, por citar algunas.

En este artículo pretendo explicar y mostrar la forma en que personalmente escribo mis aplicaciones, pues a lo largo de mi corta experiencia he encontrado ciertos beneficios.

JavaScript Object Notation (JSON)
A continuación muestro la manera en que se escribe un objeto o instancia, es importante mencionar que esto no es una clase, sino un objeto, una instancia, cuando trabajamos con AJAX es así como puedes enviar la información del servidor, en futuros artículos hablaré al respecto:
[code lang="javascript"]
var myObjeto = {
nombre: "Crysfel",
apellido: "Villa",
edad: 23,
intereses:["Programar","Musica","Peliculas","Series"],
dormir:function(){
alert("zzzZZZzzzzz ZZZzzzzzZZZ");
}
}

alert(myObjeto.nombre);

myObjeto.intereses.each(
function(value,i){alert("interes"+i+": "+value);}
);

myObjeto.dormir();
[/code]
Es importante mencionar que después de cada propiedad o método es necesario poner una coma simple, de lo contrario habrá un error de sintaxis.

Constructores
Ahora si voy a tratar el tema de las clases, recordar que lo anterior era una instancia y no una declaración de clase, una clase consta de un constructor, y se hace así:
[code lang="javascript"]
//Sin argumentos
function Foo(){
this.propiedad = "Ok";
this.propiedad2 = 12;
alert("Soy un nuevo Foo!");
}

var foo = new Foo();
alert(foo.propiedad);

//Constructores con argumentos
function Foo2(arg1,arg2){
this.propiedad = arg1;
this.propiedad2 = arg2;
alert("Soy un nuevo Foo2!");
}

var foo2 = new Foo2("Hola",34);
alert(foo2.propiedad);
[/code]

Si eres observador, habrás notado que las propiedades se les anteponen la palabra reservada this, esto es muy importante hacerlo.

Herencia simple
Voy a mostrar como realizar la herencia simple, primero la clase Bebida, de esta extienden dos clases, una es Soda y la otra es Jugo, a manera de comentario, es una buena práctica poner en Mayúscula la primera letra del nombre de la clase, esto no es una regla, pero es una recomendación, un estándar entre desarrolladores.
[code lang="javascript"]
//Paso 1, superclase
function Bebida(){
this.cantidad = 600;
this.unidad = "ml";
this.dulzura = 0;

this.endulzar = function(){
this.dulzura++;
}

this.setCantidad = function(cant){
this.cantidad = cant;
}

this.getCantidad = function(){
return this.cantidad;
}

this.setUnidad = function(u){
this.unidad = u;
}

this.getUnidad = function(){
return this.unidad;
}

this.setDulzura= function(d){
this.dulzura = d;
}

this.getDulzura = function(){
return this.dulzura;
}
}

//Paso 2, subclases
function Soda(m){
this.fabricante = "Coca Cola"; //propiedades propias de la subclase
this.precio = 6.50;
this.marca = m;
this.gas = 40;
this.dulzura = 10; //Modificar propiedad heredada

//metodo propio de la subclase
this.agitar = function(){
this.gas--;
}

//sobre escitura de metodos
this.endulzar = function(){
this.dulzura+= 10;
alert("Metodo sobreescrito 'endulzar': "+this.dulzura);
}

}

function Jugo(){
this.sabor = "Naranja"; //propiedades propias de la subclase
this.estado = "reciente";
this.dulzura = 3; //Modificando propiedad de la superclase

//metodos propios de la subclase
this.tomar = function(){
this.cantidad = 0;
}
}

//Paso 3, haciendo la herencia
Soda.prototype = new Bebida();
Jugo.prototype = new Bebida();

//Paso 4, Creando instancias
var sprite = new Soda("Sprite");
var manzana = new Soda("Manzana Lift");
var jugo = new Jugo();

alert("Propiedad heredada 'cantidad': "+sprite.getCantidad());
alert("Propiedad heredada modificada 'dulzura': "+sprite.getDulzura());
sprite.endulzar();

alert(manzana.getDulzura());

alert("Jugo dulzura:"+jugo.getDulzura());
jugo.endulzar();
alert("Jugo dulzura:"+jugo.getDulzura());
[/code]
En el paso 1, se declara la superclase con sus propiedades y métodos necesarios, cabe señalar que los métodos get y set, no son necesarios, pero es una buena costumbre ponerlos para acceder a las propiedades, todos los métodos y propiedades serán heredados a las subclases.

En el paso 2, se crean las subclases, la subclase Soda, modifica la propiedad heredada dulzura, y sobre escribe el método endulzar, además de que agrega propiedades y métodos propios de ella, la subclase Jugo, solamente modifica la propiedad heredada dulzura, y agrega sus métodos y propiedades.

En el paso 4, se realiza la herencia, esto utilizando la sentencia prototype, es importante mencionar que antes de realizar la herencia la superclase y las subclases deben ser declaradas.

En el paso 5 se crean las instancias, se modifican ejecuta el método que se sobrescribió y tiene comportamiento diferentes sobre las subclases Jugo y Soda, la subclase Jugo no modifica el método que heredó, mientras que la subclase Soda si modificó el método endulzar y por lo tanto tiene otro comportamiento.

Conclusión
Es muy importante entender los conceptos de la POO en JavaScript, existen algunas otras formas de realizar la herencia, y de crear objetos, pero de manera personal esta es mi preferida, una de las ventajas es que el código es muy claro y limpio.

Referencias
http://www.javascriptkit.com/javatutors/oopjs2.shtml
http://www.webreference.com/js/column79/4.html

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.