Canal RSS

Herencia en Javascript

Publicado en

Como en normal en Javascript, hay más de una forma de implementar herencia,
esto es debido a que la herencia no es explicita, es emulada. Vamos a ver
los dos métodos mas utilizados.

Object masquerading

Este método hace provecho del comportamiento de la palabra reservada this
dentro de las funciones, más específicamente, dentro de los constructores.
El funcionamiento es el siguiente: Un constructor asigna propiedades y métodos
a un objeto referenciándolo con la palabra clave this, como un constructor es simplemente una función,  se puede usar el constructor de una clase A como método de una clase B.  Tenemos, por ejemplo, el siguiente constructor:

     
      function ClaseA(nombre){

          this.nombre=nombre;

          this.identificarse=function(){

              alert(this.nombre);

          }

      }

Recordemos que en un constructor, this hace referencia al nuevo objeto que será retornado. Pero en un método, this hace referencia al objeto desde el cual fue llamado. Analicemos que pasa si lo usamos dentro de otro constructor como en el caso siguiente:

     
      function ClaseB(nombre){

          this.superClase=ClaseA;

          this.superClase(nombre);

          delete this.superClase;

      }

En el código anterior, el constructor ‘ClaseA’, es llamado como método del nuevo objeto que se esta creando en ‘ClaseB’, por lo tanto, todas las propiedades y métodos que se crean en ClaseA se van a agregar al nuevo objeto de ClaseB.

Quizás el punto mas interesante del Object masquerading, frente a otros métodos
de emular herencia, es que soporta la herencia múltiple,  esto significa que un objeto puede heredar de mas de una clase al mismo tiempo. Solo basta con llamar a cuantos constructores sean necesarios dentro del constructor de la clase hija.

Prototype chaining.

En el post anterior mostré como definir clases utilizando el objeto prototype. Prototype chaining se basa en este paradigma para implementar herencia de una manera muy interesante.

Prototype es una propiedad del objeto Function, que actúa como un template sobre el cual se van a crear nuevos objetos. Mas precisamente, las propiedades y métodos del objeto prototype van a ser pasados a todas las instancias de esa clase.

El ejemplo anterior utilizando prototype chaining quedaría de la siguiente manera:

      function ClassA(){         

      }

      ClassA.prototype.nombre = “”;

      ClassA.prototype.identificarse = function(){

          alert(this.nombre);

      }

      function ClassB(){

      }    

      ClassB.prototype = new ClassA();

La última línea del ejemplo muestra el funcionamiento del prototype chaining. Lo que ocurre es que asignamos al prototipo de ‘ClassB’ una nueva instancia de ‘ClassA’.
De ahora en adelante, todos los objetos creados con ‘ClassB’ van a tener, también, los mismos métodos y propiedades de la instancia de ‘ClassA’. Y si queremos agregar mas métodos y propiedades, lo único que tenemos que hacer es agregárselos al prototype
de ‘ClassB’.

Lo malo de este método para emular herencia, es que no se puede pasar parámetros
a la clase base, como hicimos en el ejemplo de Object masquerading.

Lo bueno,  es que el operador instanceof funciona de una manera única: por cada instancia de ClaseB, instanceof nos retorna true tanto con ‘ClaseA’ como con ‘ClaseB’:

    var miobjeto = new ClassB();  

    alert(miobjeto instanceof ClassB); // true

    alert(miobjeto instanceof ClassA); // true

Conclusión

Estos son solo 2 de las formas utilizadas para emular herencia en Javascript, quizás las más difundidas. Personalmente prefiero el prototype chaining, porque es la recomendada por el Standard ECMA Script, y por el funcionamiento del operador instanceof,
que permite tener un poco mas de control sobre los objetos, algo que se agradece
muchísimo en un lenguaje tan poco tipeado como Javascript. Sin embargo, los
dos métodos son igual de eficaces y cada uno tiene sus ventajas y desventajas,
por lo que la decisión de cual usar, esta en el programador.

»

  1. Muy bueno este articulo. Gracias por poner esta informacion a disposicion de los demas.

    Responder
  2. Existe polimorfismo en JavaScript?

    Responder
  3. pues, se podria decir que si, ya que cualquier objeto podria tener el método que tu quieras agregarle. Pero debes tener en cuenta que en Javascript no existen las Interfaces, por lo que deberias comprobar de otra manera que ese metodo exista en el objeto en cuestión.

    Responder
  4. Buenas tardes, amigo te voy a hechar un cuento a ver si me ayudas, procedo: consegui unas librerias donde se crea la clase y a partir de esta nuevas clases, a su vez se crean otras librerias donde se asigna al prototipo de una clase uno ya existente de la otra libreria, el problema es que luego se crea un metodo de esa nueva clase que hace un llamado por medio de un call al metodo de otra clase de la otra libreria, pero sorpresa ese metodo no existe en esa clase, si no en la clase que es padre de esa clase llamada,si quieres te puedo enviar el codigo para que comprendas, gracias de antemano.

    Responder
  5. Pingback: Arcoe - Tecnología Software » Blog Archive » Herencia en Javascript

  6. Que decepcion la herencia en javascript. No me esperaba esta cosa tan fea.

    Responder
  7. Creo que la primer opción es similar a otros lenguajes. Si no me equivoco jQuery utiliza la segunda.

    Responder
  8. Excelente Aporte este Articulo es valioso me ha servido vastante porque he buscado en la red y no he encontrado algo tan claro como lo explicas

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: