JavaScript y Herencia Basada en Prototipos

Para los programadores que vienen de lenguajes basados en clases, como Java o Ruby, JavaScript puede ser un poco confuso.

A diferencia de estos lenguajes, Javascript es dinámico y no provee una implementación de clase como tal. Para soportar herencia, JavaScript solo tiene un constructo: Object. Cada objeto tiene una referencia a otro objeto, llamado su prototipo.

Aunque esto pueda parecer una debilidad, en realidad este modelo de herencia basada en prototipos es muy poderoso. En este artículo explicaremos como funciona la herencia en JavaScript y la cadena de prototipos.

Herencia de propiedades

Los objetos en JavaScript no son más que estructuras de datos con varias propiedades. Cada objeto tiene una referencia a su objeto padre, o prototipo.

Al intentar acceder una propiedad en un objeto, la propiedad se busca primero en el objeto, y si no se encuentra se procede a buscar la propiedad en el prototipo del objeto original, y si no se encuentra se busca en el prototipo del prototipo, y así subsecuentemente hasta que se encuentre la propiedad o se llegue al final de la cadena.

El listado 1 muestra un ejemplo de este caso.

Listado 1. Herencia de propiedades.

Herencia de “métodos”

En realidad, Javascript no tiene métodos como los de los lenguajes de programación basados en clases. En JavaScript, cualquier función se puede agregar a un objeto como si fuera una propiedad. Estos objetos, y sus respectivas propiedades se asemejan a los pares llave-valor de un Hash.

Listado 2. Función como propiedad.

Como podemos ver, el objeto o tiene dos propiedades: a con el valor 2 y m con valor function(b), que regresa el valor de la propiedad a + 1, que en este caso equivaldría a 3.

Ahora vamos a extender el código anterior para mostrar cómo funciona la herencia basada en prototipos cuando la combinamos con funciones.

Listado 3. Ejemplo extendido.

Como puedes ver, el valor de ‘this’ apunta al objeto heredado, a partir de ahí busca las propiedades. Como en el objeto p se encuentra que a = 12, no es necesario seguir recorriendo la cadena de herencia.

Ahora que entendemos cómo funciona la herencia basada en prototipos, consideremos cómo funcionan los arreglos en JavaScript. Consideremos el siguiente arreglo:

var a = [“hola”, “qué onda”, “?”]

Todos los arreglos en JavaScript heredan de Array.prototype. Es a este nivel donde están definidos métodos como indexOf, forEach, etcétera. La cadena de prototipo es a -> Array.prototype -> Object.prototype -> null.

Clases en ES6

Posiblemente estés enterado de que una de las novedades en EcmaScript 6 es que soporta clases y te preguntes cómo afecta a lo que hemos visto aquí. En realidad, lo único que se ha agregado en ES6 es que se soporta sintaxis similar a la de otros lenguajes basados en clases usando keywords como class, extends y super, pero internamente el comportamiento es el mismo que ya estudiamos en este artículo. El listado 4 muestra el ejemplo de una clase y una subclase usando sintaxis de ES6.

Listado 4. Definición de clases con sintaxis de ES6

Conclusión

Entender cómo funciona la herencia basada en prototipos es clave para poder hacer programación avanzada en JavaScript. Esperamos que estos ejemplos te hayan sido de ayuda.