Prototipos y herencia en JavaScript

La herencia es un concepto de la programación orientada a objetos, a pesar de que JavaScript apoya plenamente la herencia entre padres e hijos, el trabajo está lejos de la programación tradicional orientada a objetos, es porque todo en JavaScript está asignado en el constructor primitivo Objeto (OBJETO CON UN CAPITAL O) por eso también se conoce como el objeto maestro. No malinterpreten este objeto maestro con el objeto de tipo de datos.

JavaScript a menudo se malinterpreta como un Olenguaje orientado a Bject pero en realidad, eso no es cierto; JavaScript es un lenguaje basado en prototipos. La herencia en JavaScript se logra por algo llamado Herencia prototípica. Para comprender eso, primero debemos estar familiarizados con cómo funciona un constructor en JavaScript, cómo se crea un objeto contra un constructor y qué es prototipo de encadenamiento.

Este es uno de los temas avanzados de JavaScript y lo llevaremos muy lento e intentaremos explicar cada pequeño información junto con los fragmentos, comencemos.

¿Cómo funciona un constructor en JavaScript?

Convencionalmente, constructores son funciones especiales que se ejecutan cada vez que se crea un objeto contra una clase; en JavaScript, Cada expresión de funciones es un constructor. Ahora, si viene de un lenguaje de programación trivial y tiene algunos antecedentes con la programación orientada a objetos, entonces se confundirá. Por lo tanto, trate de no comparar los conceptos de JavaScript con la programación trivial orientada a objetos.

Aunque con la llegada de la versión ES 6 de JavaScript la palabra clave "Clase"Se agregó a JavaScript, pero eso no se utiliza para implementar el concepto de herencia. En JavaScript, puede crear objetos mapeados en la función, Sí - funciones.

Imagine una función creada con el siguiente código:

var persona = function ()

Como se mencionó anteriormente, que cada expresión de funciones es un constructor, esto se puede probar utilizando las siguientes líneas dentro de la función:

var persona = function (nombre)
este.nombre = nombre;
este.Edad = 20

Ahora, como puede ver, estamos creando una función y dentro del cuerpo de la función, estamos definiendo e inicializando las propiedades del objeto, tal como lo hacemos en cualquier constructor convencional normal. Ahora, creemos algunos objetos asignados a esto Persona Función de constructor con las siguientes líneas de código:

var p1 = nueva persona ("John");
var p2 = nueva persona ("Albert");

Ahora, estamos creando objetos, pero no tenemos ningún método dentro de los objetos que nos devuelvan el nombre de la persona que acabamos de crear, así que creemos esa función dentro del constructor del Persona objeto.

var persona = function (nombre)
este.nombre = nombre;
este.edad = 20;
este.getName = function ()
regresar (esto.nombre)

Ahora, necesitamos llamar a esta función desde cada objeto individual utilizando las siguientes líneas de código:

consola.Log (P1.getName ());
consola.Log (P2.getName ());

Después de ejecutar todo este fragmento, obtenemos la siguiente salida en la consola:

Ahora aquí está el problema principal con el uso de este tipo de plantilla, imagine que tiene 100 objetos de Persona, Estos 100 objetos tendrán su propio 100 diferentes nombre() Funciones:

Esto se debe a que estos objetos son las instancias del Persona, haciéndolo así redundante en la memoria. Aquí es donde el Propiedad prototipo entra en juego.

La propiedad prototipo

Cada función y cada objeto tienen una propiedad nombrada Prototipo, Este prototipo contiene métodos y propiedades de una función, y esta propiedad prototipo se comparte entre todas las instancias/objetos que se asignan a la función, eche un vistazo a este fragmento:

Si tuviéramos que crear algunos objetos basados ​​en esta función "X", Heredarían los métodos y propiedades dentro del"prototipo"De la función. En nuestro ejemplo, la función principal sería la Persona y los objetos son P1, p2, como:

Uso de la propiedad prototipo para crear herencia prototípica

Nuestro principal problema con el enfoque trivial fue que cada objeto tenía su propio nombre() funciones, cuanto más sean los objetos, más es el número de nombre() funciones en la memoria. Para eliminar esto, escribimos el función getName () Fuera de la expresión del constructor y dentro de la propiedad prototipo utilizando la sintaxis:

nombre del objeto.prototipo.MethodName

Nuestro código cambia a:

var persona = function (nombre)
este.nombre = nombre;
este.edad = 20;

persona.prototipo.getName = function ()
devolver esto.nombre;

var p1 = nueva persona ("John");
var p2 = nueva persona ("Albert");
consola.Log (P1.getName ());
consola.Log (P2.getName ());

La salida es exactamente la misma que la última vez:

Pero la diferencia esta vez es que en lugar de que cada objeto tenga su propio nombre() función, cada objeto está accediendo a la nombre() función en su padre y usando esa función para ejecutar la instrucción que se le da. Se llama "Herencia prototípica"En JavaScript. Finalmente, no hacerlo redundante en la memoria.

Objeto maestro

Todo en JavaScript es esencialmente un objeto, esto significa que todo en JavaScript se basa en Objeto (con un capital o).

Para explicar esto, use las siguientes líneas de código y abra la consola del navegador.

var demo = function ()

consola.dir (demostración);

Estás creando una función con un constructor vacío y el consola.prostituta() Muestra los detalles de manifestación() Definición de función en la consola, verá esto:

Expandir la pequeña punta de flecha y examinar el __proto__ propiedad de esta función, el __proto__ La propiedad nos dice qué objeto estaba asignado esta función, verá esto:

Ahora, creemos una instancia de esta función de demostración y examinemos su __proto__ como:

var demo = function ()

Sea x = nueva demostración ();
consola.dir (x);

Después de ejecutar este código, debería ver la siguiente salida en la consola:

Expanda esto y examine el constructor en el que se asignó la instancia "X", verá:

Que significa ese objeto X tiene la demostración de los padres, y ya sabemos que el demostración de funciónestá asignado en el objeto JavaScript. Esto crea una cadena de prototipos como:

El objeto "X"Puede acceder a los métodos y propiedades del objeto maestro, creando así una cadena de herencia.

Si miramos en nuestra consola por última vez, podemos examinar que el objeto maestro tiene este método en su propiedad prototipo que es Encadenar() como:

Y llamamos a esta propiedad en el objeto "X"Y en la función manifestación que creaste como:

consola.Log (x.Encadenar());
consola.registro (demostración.Encadenar());

Obtienes la salida como:

Puede ver, tanto el objeto como la función pudieron acceder a este método a pesar de que no se definió dentro de ellos.

Así es como funciona la herencia en JavaScript a través de prototipos.

Conclusión

La herencia en JavaScript es muy diferente de nuestra definición convencional de herencia en la programación orientada a objetos. En JavaScript, logramos herencia utilizando una propiedad llamada prototipo. Aprendiste cómo funciona un constructor en JavaScript, ¿qué es el prototipo propiedad, cómo todo dentro de JavaScript es un objeto al aprender sobre Objeto maestro. Además, aprendió sobre la herencia prototípica y el encadenamiento del prototipo, y pudo acceder a los métodos y propiedades del Objeto maestro utilizando el objeto que creaste.