Hasta ahora, el único tipo de animal que hemos definido es un gato (a través de la clase ‘Gato’). Nuestra clase ‘Gato’ también requiere que nombremos a nuestros gatos. Finalmente, nuestra clase ‘Cat’ realiza la representación en la página web. Sin embargo, ¿y si quisiéramos introducir otros animales? ¿Cómo deberíamos implementar perros, pandas y rinocerontes?
Si bien la respuesta simple es que podemos simplemente copiar, pegar y modificar nuestro código de Cat.jspp a Dog.jspp, Panda.jspp y Rhino.jspp, esto generalmente no es una buena programación. En cambio, podríamos notar que hay mucha repetición en el diseño; todos los animales necesitan un nombre, todos los animales deben mostrarse en nuestra página web y todos los animales se pueden categorizar juntos. Por lo tanto, podemos definir los comportamientos que necesitamos para los animales en general (como renderizar en una página web) y hacer que todas nuestras clases de animales «hereden» este comportamiento común. Además, algunos animales pueden no necesitar nombres; por ejemplo, los animales domésticos como gatos y perros pueden necesitar nombres, pero es posible que no queramos nombrar a nuestros pandas y rinocerontes.
Primero, comencemos examinando Cat.jspp. ¿Qué datos o comportamiento en Cat.jspp deberían ser comunes a todos los animales?
Por lo que hemos definido hasta ahora, solo debería ser el método render(). Lo usaremos como base para comprender la herencia. Anteriormente, creamos un archivo Animal.jspp. Actualmente está vacío, así que ábralo y definamos una clase ‘Animal’:
external $;
module Animals
{
class Animal
{
var $element = $(
"""
<div class="animal">
<i class="icofont icofont-animal-cat"></i>
</div>
"""
);
void render() {
$("#content").append($element);
}
}
}
Esto funciona bien como una plantilla básica. Sin embargo, un observador entusiasta notará que tenemos un problema: el campo $element siempre mostrará un icono de gato. Volveremos a esto más tarde, pero, primero, cambiemos Cat.jspp para heredar de nuestra nueva clase ‘Animal’:
external $;
module Animals
{
class Cat : Animal
{
string _name;
Cat(string name) {
_name = name;
}
}
}
Eliminamos el campo $element y el método render() de Cat.jspp y agregamos esto a la declaración de clase:
class Cat : Animal
La sintaxis de dos puntos especifica la relación de herencia. En este caso, nuestra clase ‘Gato’ hereda de la clase ‘Animal’. En otras palabras, nuestra clase ‘Gato’ extiende la clase ‘Animal’; todo lo que pertenece a la clase ‘Animal’ (campos, captadores/establecedores, métodos, etc.) también pertenece a la clase ‘Gato’.
En herencia, nuestra clase ‘Gato’ se conoce como la «subclase» o «clase derivada» de ‘Animal’. «Animal» puede denominarse «superclase» o «clase base».
Si intenta compilar su código en este momento, aún verá los gatos representados en la página exactamente como antes, pero si pasa el mouse sobre cualquiera de los gatos, no verá su nombre respectivo. El método render() en ‘Gato’ ahora se deriva de la clase ‘Animal’. Dado que nuestra clase ‘Animal’ no toma nombres (ya que queremos poder generalizar la clase para animales salvajes como pandas y rinocerontes), su método render() tampoco muestra el atributo HTML ‘título’ necesario para mostrar un nombre el ratón por encima. Sin embargo, podemos hacer posible este comportamiento. Para hacer eso, requiere una explicación de los modificadores de acceso, que ahora cubriremos.