Prototipos de JavaScript para principiantes

iv

JavaScript es un lenguaje basado en prototipos.basado en prototipos. Vamos a deconstruir la definición de los prototipos en JavaScript.

Cuando empieces a aprender programación orientada a objetos con JavaScript, te encontrarás rápidamente con la herencia prototípica.

Un prototipo es un miembro de un objeto, y puede ser referenciado desde una instancia. Antes de crear nuestro propio prototipo. Veamos un ejemplo rápido de cómo ya estamos tratando con prototipos.

Creemos un array:

let x = 
x.map(a => a + 1) //

x contiene un array. x es una instancia de Array. x tiene una referencia a todas las propiedades del prototipo de Array. Así que podríamos por ejemplo llamar a la función Array.prototype.map() sobre x

¡Empiezo a ver prototipos por todas partes!

Pongamos nuestro propio prototipo:

// Creates a constructor called Country
class Country {
constructor(country) {
this.country = country
}
}// Create a new instance of Country
let sweden = new Country('Sweden')// sweden is now an object called Country
sweden // Country { country: 'Sweden' }

Ahora queremos que sweden salude al mundo. Aquí es donde entran en juego los prototipos y la cadena de prototipos

// Add method to the prototype of the constructor
Country.prototype.helloWorld = function() {
return `I am a country called ${this.country}`
}

Country tiene el método helloWorld como propiedad del prototipo. sweden sigue siendo el mismo objeto pero ahora podemos hacer referencia a helloWorld.

sweden.helloWorld() // 'I am a country called Sweden'

El intérprete busca el helloWorld Si no se encuentra ninguna referencia empezará a saltar por la cadena de prototipos hasta que se satisfaga la petición En este caso helloWorld puede relacionarse con sweden a través de la cadena de prototipos.

Y si creamos un nuevo país:

let canada = new Country('Canada')

Lo mismo ocurre con canada, la nueva instancia de Country también puede acceder a los prototipos. Así es como funciona un prototipo y la cadena de prototipos. Funciona como un enlace entre la función y sus objetos.

¿Quiero compartir el prototipo de mi constructor con otro constructor?

Digamos que queremos añadir el objeto prototipo de PlanetA a PlanetB

// Constructor PlanetA
class PlanetA {
constructor(instance) {
this.instance = instance
}
// prototype method
helloWorld() {
return `I am a instance called ${this.instance}`
}
}let x = new PlanetA('x')x.helloWorld() // I am a instance called x

Para demostrar la flexibilidad de la herencia prototípica vamos a enlazar los prototipos de nuestra instancia de PlanetA a PlanetB. Para ello podemos utilizar Object.setPrototypeOf().

// Constructor PlanetB
class PlanetB {
constructor(instance) {
this.instance = instance
}
}let y = new PlanetB('y')Object.setPrototypeOf(y, x)y.helloWorld() // I am a instance called y

Esta ha sido una introducción básica al concepto de herencia en JavaScript. La clave es saber que tienes la capacidad de instanciar dinámicamente objetos sin ninguna propiedad interna pero pudiendo acceder a los métodos de la cadena de prototipos.

Hay más detalles de los prototipos y formas de manejar la herencia en JavaScript, dependiendo de cómo elijas factorizar tus objetos. La palabra clave es azúcar sintáctico en las funciones del constructor. No hay tal cosa como la herencia de clases en JavaScript, sólo una forma prototípica de herencia.

Espero que hayas encontrado esto útil y que ahora puedas sentirte más cómodo hablando de prototipos y de cómo funciona la POO en JavaScript.

Disfruta de tu código.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *