Lecciones: Herencia de Clases en JavaScript para webOS (parte 1 de 3)

Traducir / Translate

Comenzamos esta serie de artículos sobre la herencia de clases en JavaScript para webOS. Realmente trataremos de explicar el manejo de la herencia de forma práctica en Mojo, el framework de JavaScript utilizado en HP webOS. La primera parte mostrará los comandos básicos para crear herencia de clases y el reemplazo de métodos heredados. La segunda parte versará sobre la invocación de métodos de la clase padre y otras operaciones frecuentes en el uso de la herencia. La tercera parte contendrá una serie de advertencias sobre el uso y el abuso de la herencia de clases.

Recordemos que las principales ventajas del uso de la herencia de clases son:

1.- Reutilización y encapsulamiento del código. No hay que reescribir clases parecidas. Tampoco es preciso copiar el código de las clases padre.
2.- Facilita las pruebas del código. Generalmente las clases hijas no necesitan testear tan a fondo el funcionamiento del código que han heredado, reduciendo la cantidad de posibles errores.
3.- Crea el sitio perfecto para documentar las clases y los métodos, fuera de las rutinas principales de ejecución del código.

Dicho todo esto, entramos en materia.

Parte 1: Comandos básicos para crear herencia de clases en Mojo y el reemplazo de métodos heredados.

La forma más primitiva de crear clases en JavaScript es la siguiente:

objeto1 = new Object(); // se crea el objeto
objeto1.propiedad1 = 4; // se define una propiedad
objeto1.metodo1=function(){ this.propiedad1++; } //se define un método
objeto1.metodo1(); //almacena un 5 en propiedad1.


Esto funciona, pero no es recomendable salvo para la creación rápida de clases de poco uso debido a que carece de una definición formal, lo que dificulta su uso, prueba y reutilización.  Utilizando la técnica de los prototipos, siendo más formales en las definiciones e introduciendo el concepto de constructor, llegamos al siguiente ejemplo:


function Clase1(valor1)  { //definimos el constructor de la clase
this.propiedad1 = valor1;
}
//definimos un método
Clase1.prototype.metodo1 = function() { this.propiedad1++; }
objeto1 = new Clase1(10); //nueva instancia de la clase
objeto2 = new Clase1(20); //nueva instancia de la clase
objeto1.metodo1(); //almacena un 11 en propiedad1 de objeto1.
objeto2.metodo1(); //almacena un 21 en propiedad1 de objeto2.


Podemos directamente modificar el objeto2 para crear nuevos métodos, pero seria cometer de nuevo los errores iniciales. En Mojo podemos usar una forma de herencia de clases más práctica. La idea proviene del framework Prototype:


Clase1 = Class.create(); //definimos la clase
Clase1.addMethod( initialize : function ($super, valor1) { 
 //definimos el constructor
$super();
this.propiedad1 = valor1; //definimos la propiedad
}});

Clase1.addMethod( metodo1 : function($super) { 
 //definimos un metodo

$super();

 this.propiedad1++;

}});

objeto1 = new Clase1(10); //nueva instancia de la clase

objeto2 = new Clase1(20); //nueva instancia de la clase

objeto1.metodo1(); //almacena un 11 en propiedad1 de objeto1.

objeto2.metodo1(); //almacena un 21 en propiedad1 de objeto2.

Hay varias cosas importantes aquí:
1.- La creacion de la clase y el constructor están divididas.
2.- La sintaxis del comando addMethod es tipo JSON, es decir, usando llaves.

Ahora vamos a lo interesante, que es la creación de una clase hija:

Clase2 = Class.create(Clase1); //define la clase como hija de Clase1

Clase2.addMethod( initialize : function($super,valor1,valor2) { 
 //definimos el constructor de Clase2

$super(valor1); //esto llama al constructor de la clase padre

this.propiedad2 = valor2; //definimos la propiedad2

}});

Clase2.addMethod( metodo2 : function($super) { 
 //definimos un nuevo metodo

$super();

 this.propiedad2--;

}});

objeto2 = new Clase2(10,20); //nueva instancia de la Clase2

objeto2.metodo1(); //almacena un 11 en propiedad1

objeto2.metodo2(); //almacena un 19 en propiedad2

Ahora vamos a reemplazar el metodo1 en la clase2:

Clase2.addMethod( metodo1 : function($super) { 
 //definimos un nuevo metodo

$super();

 this.propiedad1 = -this.propiedad1;

}});

objeto3 = new Clase2(30,40); //nueva instancia de la Clase2

objeto3.metodo1(); //almacena un -30 en propiedad1 del objeto3

objeto2.metodo1(); //almacena un -11 en propiedad1 del objeto2

Aquí hay más cosas importantes:

1.- Tanto la creación como el reemplazo de métodos se hacen con addMethods, y de la misma forma.

2.- addMethods es dinámico y funciona en todas las instancias de la clase modificada. En el ejemplo se aprecia como el cambio afectó también al objeto2, aún habiendo sido definido antes del cambio de metodo1.
3.- El punto 2 aplica igualmente a modificaciones en clases padres. Todas las clases hijas heredan el cambio, a menos que hayan reemplazado por sí mismas el método heredado.

La sintaxis completa de Class.create y addMethods puede consultarse en Prototype.


Nos vemos en la parte 2!