Herencia en Javascript - El Mundo de Angular

Herencia en Javascript

Javascript, como muchos otros lenguajes de programación, usa la herencia, pero a diferencia de otros lenguajes (como pueden ser Java o C++), la herencia que usa Javascript es un poco particular. ¡Qué raro!

Herencia:  es el mecanismo que se utiliza para que un objeto comparta sus propiedades y los métodos con otros objetos.  El objeto que comparte sus propiedades o métodos suele llamarse «padre» y a los objetos que tienen acceso a los atributos y métodos del «padre», se los suele llamar «hijos».

En el gráfico podemos ver un ejemplo de herencia clásica, donde un objeto base o «padre» tiene propiedades y métodos que comparte con sus descendientes (hijos). Todos los objetos que hereden de esa clase «padre» tendrán acceso a sus propiedades y métodos.. Los objetos que heredan de otros objetos, se llaman clases «hijas». Como podés ver en el gráfico, en la clase padre irán métodos y propiedades comunes a ambas clase hijas.

Pero… a diferencia de otros lenguajes de programación, el mecanismo de herencia de Javascript es un poco diferente, y es llamado «Herencia de prototipos«.

 

Pero… ¿qué es un prototipo?

Todos los objetos de Javascript tienen algo llamado prototipo,  inclusive las funciones. Básicamente, todos los objetos Javascript tienen una referencia a un objeto particular llamado __proto__ (su prototipo).

Lo que hace este objeto (__proto__) es definir propiedades y métodos específicos de un tipo de dato en particular. Por ejemplo, el prototipo del tipo Object tiene los métodos: toStringhasOwnProperty. Las funciones tienen prototipos que incluyen los métodos call, bind y apply -que vimos en otro post- entre otros. Y el prototipo del tipo Array tiene los metodos push, lenght y map, además de otros.

Nota: este objeto __proto__ nunca, nunca, nunca de los nuncas debe modificarse directamente, ya que podrías afectar el rendimiento de tu programa.

 

¿Cómo funciona el mecanismo de los prototipos?

Pero, ¿cómo funciona este mecanismo de prototipos? ¿como sabe Javascript que una variable de tipo array tiene el método push?

Cuando en el código queremos acceder a una propiedad o un método, lo que hace Javascript es buscar en las propiedades y métodos del objeto; si no encuentra la propiedad o el método buscado, se mete en su prototipo (el objeto __proto__) y se fija si éste tiene el atributo o método buscado.

 

Esto que vemos en el grafico es lo que se lo conoce como prototype chain o cadena de prototipos

Prototype chain o Cadena de prototipos

La cadena de protototipos (Prototype chain) de Javascript, es una forma de acceder a las propiedades y métodos del prototipo de un Objeto (recordemos que el prototipo de un objeto es también un objeto);  y si la propiedad o método que estamos buscando no está en ese prototipo, se buscará en el prototipo del prototipo, y así sucesivamente hasta que se encuentre el/la propiedad/método, o hasta que lleguemos al final de la cadena:

Por ejemplo, si tengo el código:

miObjeto.f2();

Si el objeto “__proto__” (el segundo objeto en el gráfico) tiene un método llamada f2, cuando el objeto quiere acceder al método f2:

  1. lo busca en el objeto miObjeto, si lo encuentra, joya.
  2. si no lo encuentra, lo busca en el prototipo; si lo encuentra, joya.
  3. si no lo encuentra en el prototipo, lo busca en el prototipo del prototipo; si lo encuentra, joya.
  4. así hasta que no haya mas prototipos.

Esta forma de acceder a la propiedad se llama prototype chain

 Prototype chain o Cadena de Prototipos es el mecanismo que usa Javascript para acceder a las propiedades y métodos de un objeto. Si no se encuentra una determinada propiedad o método, se sigue buscando en su prototipo hasta encontrarlo o retornar «undefined»

 

El mismo mecanismo se usa para acceder tanto a las propiedades como a los métodos de los objetos en Javascript.

 

Herencia de prototipos:

 

Una de las características de Javascript es que, un segundo objeto, puede apuntar directamente al mismo prototipo que está apuntando el objeto 1. Esto quiere decir que ambos objetos acceden a las mismas propiedades y métodos del mismo prototipo.

Como se puede ver, tanto el objeto objeto1 como el objeto objeto2 tienen el mismo prototipo y, por ende, comparten las mismas propiedades y métodos del prototipo prototipo.

Es mas, el gráfico es el mismo que mostramos al inicio, pero… ¡dado vuelta!

 

Esto es muy potente ya que, si se modifica el prototipo de un objeto se modifica el prototipo (propiedades y métodos) de todos los objetos que apuntan a ese prototipo.

 Herencia de prototipos es el mecanismo de herencia que se lleva a cabo usando prototipos

 

Conclusión

La herencia de Javascript es mucho más simple que la «clásica», con menos combinaciones y cosas para aprender, pero no por eso menos efectiva, sólo es diferente, como muchas de las cosas en Javascript. Si te quedaste con ganas de la herencia mas clásica, esperá a mi siguiente post, en donde voy a explicar cómo funciona la herencia en Typescript.

 

About the Author

Mi nombre es Gustavo Hernán Dohara, soy Ingeniero en Sistemas y, sobre todas las cosas, soy un apasionado por la tecnología; tengo más de 10 años de experiencia en diferentes tecnologías y he decidido compartir mis conocimientos y experiencias con cualquiera que desee aprender: alumnos, empleados, freelancers y vos. Al ritmo que cada uno pueda, en el horario en que cada uno pueda y en el lugar que cada uno elija.