JavaScript Prototypal Inheritance

Resumen: en este tutorial, aprenderás cómo funciona la herencia prototípica de JavaScript.

Introducción a la herencia prototípica en JavaScript

Si has trabajado con otros lenguajes de programación orientados a objetos como Java o C++, estarás familiarizado con el concepto de herencia.

En este paradigma de programación, una clase es un plano para crear objetos. Si quieres que una nueva clase reutilice la funcionalidad de una clase existente, puedes crear una nueva clase que extienda la clase existente. Esto se llama herencia clásica.

JavaScript no utiliza la herencia clásica. En su lugar, utiliza la herencia prototípica.

En la herencia prototípica, un objeto «hereda» propiedades de otro objeto a través de la vinculación del prototipo.

JavaScript herencia prototípica y __proto__

Vamos a poner un ejemplo para que el concepto quede más claro.

Lo siguiente define un objeto person:

Code language: JavaScript (javascript)

El objeto person tiene dos propiedades:

• nameque contiene un valor de cadena.
• greetque contiene un valor que resulta ser una función. El greet se conoce como un método del objeto person.

Por defecto, JavaScript le proporciona una función Object() y un objeto prototipo que se puede acceder a través de la propiedad prototype de la función Object():

Cuando se utiliza la sintaxis literal de objeto para definir un objeto, el objeto es una instancia del Object. Por lo tanto, la expresión person instanceof Object devuelve true:

Code language: JavaScript (javascript)

Salida:

Code language: JavaScript (javascript)

El objeto person también se vincula con el Object.prototype a través del enlace ].

En otras palabras, puede acceder a cualquier propiedad del objeto Object.prototype a través del objeto person. Por ejemplo:

Code language: JavaScript (javascript)

Salida:

Code language: JavaScript (javascript)

El es la conversión por defecto de un objeto a cadena.

Cuando se llama al método toString() en el objeto person, JavaScript no lo encuentra. Así que JavaScript sigue la cadena de prototipos y busca el método en el objeto Object.prototype. JavaScript puede encontrar el método toString() en el objeto Object.prototype y lo ejecuta.

Para acceder al prototipo del objeto person, puede utilizar su propiedad __proto__:

Code language: JavaScript (javascript)

Salida:

Code language: JavaScript (javascript)

A continuación se define otro objeto llamado teacher. El objeto teacher tiene el método teach():

Code language: JavaScript (javascript)

Si quieres que el objeto teacher acceda a todas las propiedades del objeto person, puedes establecer el prototipo del objeto teacher al objeto person:

Code language: JavaScript (javascript)

Tenga en cuenta que nunca debe utilizar el __proto__ en el código de producción. Esto es sólo para fines de aprendizaje y comprensión.

Ahora, el objeto teacher puede acceder a la propiedad name y al método greet() desde el objeto person a través de la cadena de prototipos:

Code language: JavaScript (javascript)

Salida:

Code language: JavaScript (javascript)

Cuando llamas al método greet() en el objeto teacher, JavaScript lo encuentra en el objeto teacher primero.

Como JavaScript no puede encontrar el método en el objeto teacher, sigue la cadena de prototipos y busca el método en el objeto person. Esta vez, JavaScript puede encontrar el método en el objeto person y ejecuta el método greet().

En JavaScript, decimos que el objeto teacher hereda propiedades del objeto person. Y esto es la herencia prototípica.

Una forma estándar de implementar la herencia prototípica en ES5

ES5 proporcionó una forma estándar de trabajar con la herencia prototípica utilizando el método Object.create().

Nota que ahora debes utilizar las palabras clave más nuevas de ES6 class y extends para implementar la herencia. Es mucho más simple.

El método Object.create() crea un nuevo objeto y utiliza un objeto existente como prototipo del nuevo objeto:

Code language: JavaScript (javascript)

El método Object.create() acepta dos argumentos:

• El primer argumento (proto) es un objeto utilizado como prototipo del nuevo objeto.
• El segundo argumento (propertiesObject), si se proporciona, es un objeto opcional que define propiedades adicionales para el nuevo objeto.

Suponga que tiene un objeto person:

Code language: JavaScript (javascript)

Lo siguiente crea un objeto teacher vacío con el __proto__ del objeto person:

Code language: JavaScript (javascript)

Después, puede definir propiedades para el objeto teacher:

Code language: JavaScript (javascript)

O puede hacer todos estos pasos en una sola declaración como sigue:

Code language: JavaScript (javascript)

ES5 también introdujo el método Object.getPrototypeOf() que devuelve el prototipo de un objeto. Por ejemplo:

Code language: JavaScript (javascript)

Salida:

Code language: JavaScript (javascript)

Resumen

• La herencia permite que un objeto utilice las propiedades y métodos de otro objeto.
• JavaScript utiliza la herencia prototípica lograda a través de la vinculación de prototipos.