Clases y herencia con javascript

Vamos a ver un poquito de clases y herencia en javascript.

Clases

Cualquier función de javascript se puede tratar como una clase en el sentido de que se puede instanciar (hacer un new de ella). Lo que esa función defina con this., la clase lo tendrá.

function UnaClase () {
   this.unParametro = 3;
   this.unaFuncion = function() {
      return("hola");
   }
}

a = new UnaClase;
alert(a.unParametro);
alert(a.unaFuncion());

Para un constructor con parámetros, basta con ponerlos en la función.

function UnaClase (par) {
   this.unParametro = par;
   this.unaFuncion = function() {
      return(this.unParametro);
   }
}

a = new UnaClase(11);
alert(a.unParametro);
alert(a.unaFuncion());

No nos vamos a meter ahora con esto, pero podrías declarar Atributos publicos privados y estaticos en una clase Javascript

Herencia

Todas las clases javascript tienen una cosa que se llama prototype que de alguna forma, es la clase padre por defecto. Para hacer que una clase herede de otra, hay que cambiar el prototype de la clase hija para que sea una instancia de la padre.

function Padre() {
   this.atributoPadre=3;
}

function Hijo() {
   this.atributoHijo=4;
}
Hijo.prototype = new Padre;

a = new Hijo;
alert (a.atributoPadre);
alert (a.atributoHijo);

Constructores padre con parámetros

Si el constructor de la clase padre tiene parámetros, podemos llamarlo desde la clase hija usando la funcion call() que tienen definidas las clases por defecto

function Padre(attPadre) {
   this.atributoPadre=attPadre;
}

function Hijo(attHijo, attPadre) {
   Padre.call(this,attPadre);
   this.atributoHijo=attHijo;
}
Hijo.prototype = new Padre;

a = new Hijo(2,3);
alert (a.atributoPadre);
alert (a.atributoHijo);

Agrupando las clases por paquetes/namespaces

Desgraciadamente las funciones tal cual las hemos declarado quedan como variables globales en la página y puede haber problemas de nombres en un proyecto grande con mucho código javascript. Una solución es intentar agruparlas. Se puede hacer así

paquete = {
  
   Padre : function (attPadre) {
      this.atributoPadre=attPadre;
   },

   Hijo : function (attHijo, attPadre) {
        paquete.Padre.call(this,attPadre);
        this.atributoHijo=attHijo;
   }
}
paquete.Hijo.prototype = new paquete.Padre;

a = new paquete.Hijo(2,3);
alert (a.atributoPadre);
alert (a.atributoHijo);

de esta forma, lo único global será "paquete", que podría ser, por ejemplo, el nombre de nuestro proyecto/librería. Podemos también añadir los niveles que queramos y agrupar como más nos guste. Ese "paquete" no es más que un objeto estándar de javascript que puede contener atributos, funciones ... y clases.

paquete = {
  
   Padre : function (attPadre) {
      this.atributoPadre=attPadre;
   },

   subpaquete : {
      Hijo : function (attHijo, attPadre) {
         paquete.Padre.call(this,attPadre);
         this.atributoHijo=attHijo;
      }
   }
}
paquete.subpaquete.Hijo.prototype = new paquete.Padre;

a = new paquete.subpaquete.Hijo(2,3);
alert (a.atributoPadre);
alert (a.atributoHijo);