Una de las ventajas de la programación orientada a objetos es la creación de clases extendiendo las clases que ya tenemos. Por ese método podemos crear clases que heredan las propiedades y métodos (es decir, los atributos y funcionalidades) de otras clases. Todo esto tiene como ventaja que podremos reutilizar código y hacer cosas más complejas basándonos en trabajos realizados anteriormente, por nosotros o por otros programadores.

En este artículo del manual de Mootools de DesarrolloWeb.com vamos a ver cómo extender clases, utilizando Extends.

Qué es la extensión de clases

Para comprender los mecanismos o las ventajas de la extensión de clases podemos verlo con un ejemplo típico. Por ejemplo, pensemos en los animales. Si tuviéramos que modelizar en programación orientada a objetos la clase animal, le asignaríamos unas propiedades y métodos cualesquiera que necesitásemos.

Otro día podríamos querer definir la clase mamífero (es un animal que tiene unas características específicas). Entonces tendríamos la posibilidad de reescribir todo el comportamiento definido para los animales y añadirle todo el comportamiento o características de los mamíferos. Pero eso no sería totalmente óptimo, porque con ello estaríamos reescribiendo el mismo código que se había programado ya para los animales. Estaríamos haciendo el trabajo dos veces y eso es algo que la programación orientada a objetos trata de evitar.

La programación orientada a objetos permite la herencia o extensión de clases que en estos casos nos viene como anillo al dedo. Debido a que un mamífero es un animal que tiene unas particularidades especiales, lo interesante es definir los mamíferos como una extensión de los animales. Es decir, hacer una clase mamífero que herede las propiedades y métodos de los animales. Con ello sólo tendríamos que definir los comportamientos y características propias de los mamíferos, apoyándonos en el trabajo realizado anteriormente para la modelización de los animales.

Así mismo, si definiésemos la clase reptil, pues también podríamos ayudarnos extendiendo la clase animal. Es decir, modelizaríamos el reptil a partir del animal (extendiendo la clase animal) y añadiendo los métodos y propiedades de los reptiles.

El esquema de herencia se puede llevar hasta donde sea necesario. Si algún día necesitamos definir la clase perro, pues podríamos hacerlo extendiendo la clase mamífero. O si definimos la clase Dogo Alemán podríamos hacerlo a través de extender la clase perro. Etc etc…

Esto tiene varias ventajas. Una es la reutilización de código, como ya hemos dicho. Otra ventaja sería la encapsulación. Dado que sabemos que la clase perro funciona tal cual queremos, pues podemos crear todas clases con distintas las razas de perros sin preocuparnos de cómo funcionan los perros, ni como funcionan los mamíferos, ni los animales, porque todas esas clases fueron creadas como un paquete que se comprobó que funcionaba correctamente. Pero si algún día detectamos que una de nuestras clases funciona mal, o se le desea añadir una funcionalidad, simplemente tenemos que editarla y automáticamente ese cambio se trasladará a todas las clases que la extiendan.

Con la herencia, como se puede entender, ganamos en reusabilidad, facilidad de mantenimiento y creación del código. Ahora que ya tenemos unas ideas básicas sobre la herencia, vamos a continar este artículo de desarrolloweb .com, con unas explicaciones para aprender a implementarla en Mootools.

Extends en Mootools 1.2

La versión de Mootools 1.2 tiene una manera nueva de realizar la extensión de clases, es decir, clases que heredan propiedades y métodos de otras clases.

Tenemos que crear la clase que va a heredar como cualquier otra clase (con el correspondiente new Class), y dentro de la propia clase especificaremos que se desea extender otra clase con la palabra Extends: y el nombre de la clase de la que pretendemos heredar.

Por ejemplo, tenemos aquí una clase "Animal" de ejemplo:

var Animal = new Class({
   initialize: function(nombre){
      this.nombre = nombre;
   },
   tenerHijo: function(){
      alert("Se produce un nuevo " + this.nombre);
   }
});

Y ahora vamos a hacer una clase llamada "Mamifero" que hereda de "Animal".

var Mamifero = new Class({
   Extends: Animal,
      initialize: function(nombre, sexo, semanas_gestacion){
         this.parent(nombre);
         this.sexo = sexo;
         this.semanasGestacion = semanas_gestacion;
      },
   tenerHijo: function(){
      if (this.sexo = "hembra"){
         alert("Pasan " + this.semanasGestacion + " semanas de gestación... y llega el parto");
         this.parent();
      }
   },
});

Como se puede ver, creamos la clase como cualquier otra, con la palabra new Class

var Mamifero = new Class({
   ....
});

Ahora tenemos que prestar atención al uso de la palabra Extends: para indicar la clase de la que queremos heredar.

Extends: Animal,

Eso quiere decir que vamos a extender la clase Animal, definida anteriormente. Al final lleva una coma porque vamos a seguir definiendo métodos y/o propiedades específicas de los mamíferos, que son las que van a extender la clase "Animal" para crear la clase extendida "Mamifero".

Ahora en este ejemplo vamos a redefinir el constructor. La clase "Animal" ya tenía su propio constructor, pero como los mamíferos son más complejos que los animales, tenemos que redefinir el constructor para realizar la inicialización completa de los mamíferos.

En el constructor, no obstante, se puede aprovechar el constructor de la clase de la que se hereda. Es decir, en el constructor del mamífero podemos hacer uso del constructor del animal, para incializar las características de los animales. Para ello utilizamos esta línea de código:

this.parent(nombre); Este parent es una llamada al constructor de la clase padre, es decir, de la clase que estamos heredando. Con ello podemos hacer uso del constructor definido anteriormente para la clase "Animal", de modo que esa parte del código no tiene por qué ser escrita de nuevo.

Cabe decir que el mencionado parent se puede utilizar en cualquier método que se haya reescrito en la case que hereda. Por ejemplo, la clase "Mamifero" en este ejemplo refefine el método "tenerHijo" y dentro del código de este método, como se puede ver, también se hace uso de parent para llamar al método "tenerHijo" pero de la clase de la que hereda ("Animal").

Para utilizar esta clase "Mamifero" podríamos utilizar este código:

var miMamifero = new Mamifero("perro", "hembra", 9);
miMamifero.tenerHijo();

Este ejemplo se puede ver en marcha.

Con esto ya sabemos extender clases en Mootools, pero para completar este artículo de desarrolloweb.com, vamos a presentar otro ejemplo de herencia, que nos va a venir bien para seguir aprendiendo sobre programación orientada a objetos.

Cómo se realiza un extend en Mootools 1.1

Ahora vamos a ver unas notas sobre extend en Mootools 1.1, ya que la herencia se implementa de una manera distinta en esta versión del framework Javascript. Ahora bien, incluso utilizando Mootools 1.2 vendrá bien echar un vistazo a este ejemplo para dar un impulso a nuestros conocimientos, de cara a dominar la programación orientada a objetos.

En Mootools existe la instrucción extend, que se aplica sobre clases para extender o generar una clase a partir de otra.

Para la clase que comentábamos antes de los animales, podríamos tener:

var Animal = new Class({
   //propiedades y métodos de los animales
});

Ahora los mamíferos se crearían así:

var Mamifero = Animal.extend({
   //propiedades y métodos de los mamíeros
});

Después de este código, el mamífero sería la suma de las propiedades y métodos de los animales (esas propiedades y métodos estarían heredadas de los animales) y las propiedades y métodos propios de los mamíferos.

Ejemplo completo de herencia o extensión de clases en Mootools

Vamos a hacer un ejemplo sencillo de herencia en Mootools. En el ejemplo vamos a tener una clase que servirá de punto de partida, llamada InstrumentoMusical, que modeliza cualquier instrumento musical. Luego tendremos varios instrumentos musicales que crearemos extendiendo la clase InstrumentoMusical.

Haríamos la clase InstrumentoMusical de la siguiente forma:

var InstrumentoMusical = new Class({
   initialize: function(tipo){
      this.tipo = tipo;
   }
});

Como vemos simplemente hemos creado un constructor, que recibe el tipo de instrumento (si es de cuerda, percusión, viento, etc) y lo introduce en una propiedad del objeto llamada tipo.

Luego podríamos crear la clase guitarra de esta manera:

var Guitarra = InstrumentoMusical.extend({
   
   initialize: function(cuerdas){
      this.parent("instrumento de cuerda");
      this.numCuerdas = cuerdas;
   },
   
   sonar: function(){
      alert("tran tran tran");
   }
});

Como se puede ver, la clase guitarra está extendiendo la clase InstrumentoMusical.

A la clase guitarra le hemos incorporado un constructor que recibe un parámetro que es el número de cuerdas que va a tener la guitarra. En dicho constructor estamos haciendo una línea que cabría explicar:

this.parent("instrumento de cuerda");

Con esta línea estamos llamando al método initialize de la clase padre que se está extendiendo (el constructor de la clase InstrumentoMusical) pasándole "instrumento de cuerda" como parámetro. Luego las guitarras creadas tendrán como siempre tipo de instrumento el valor "instrumento de cuerda".

Además hemos hecho un métido llamado sonar en la clase guitarra que hace que la guitarra suene.

Posteriormente podríamos crear la clase batería, que es otro instrumento musical compuesto por varios elementos de percusión.

var Bateria = InstrumentoMusical.extend({

   initialize: function(numeroElementos){
      this.parent("instrumento de percusion");
      this.numeroElementos = numeroElementos;
   },
   
   sonar: function(){
      for (i=1; i<=this.numeroElementos; i++){
         alert ("Sonando elemento " + i);
      }
   }
});

La batería tiene sus propias particularidades, pero se basa en la clase InstrumentoMusical para funcionar. Igual que ocurría con la guitarra, extiende la clase InstrumentoMusical.

Luego la batería tiene un método sonar, que hace ruido, pero este es diferente del de la guitarra.

Para utilizar estas dos clases podríamos hacer algo como esto:

var miGuitarra = new Guitarra(6);
alert(miGuitarra.tipo);
miGuitarra.sonar();

var miBateria = new Bateria(3);
alert(miBateria.tipo);
miBateria.sonar();

Podemos ver el ejemplo en marcha en una página aparte.