Programación Orientada a Objetos en JavaScript: Clases y Prototipos

Clase 39 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿Cómo funciona la programación orientada a objetos en JavaScript?

La programación orientada a objetos es crucial para entender cómo JavaScript maneja objetos y prototipos. A diferencia de otros lenguajes que utilizan clases basadas en herencia, JavaScript emplea prototipos para gestionar las propiedades y métodos que se comparten entre objetos. Aquí es donde entra en juego la función constructora o clase constructora. Pero, ¿cómo ocurre esto realmente bajo el capó?

¿Qué es un prototipo en JavaScript?

Un prototipo en JavaScript es un objeto del cual otros objetos heredan propiedades y métodos. Al crear una función constructora (o clase constructora), JavaScript automáticamente genera un prototipo asociado a esa función, que se usa como un "molde" para crear instancias de objetos.

En el siguiente ejemplo, creamos una clase constructora para un objeto Persona:

function Persona(nombre, edad, altura, nacionalidad) {
    this.nombre = nombre;
    this.edad = edad;
    this.altura = altura;
    this.nacionalidad = nacionalidad;
}

Persona.prototype.saludar = function() {
    return `Hola, mi nombre es ${this.nombre}, ¿cómo te llamas tú?`;
};

¿Cómo se crean las instancias de una clase?

Cuando necesitas crear una instancia de un objeto a partir de una clase constructora, llenas este "molde" con los datos específicos. Por ejemplo, al crear una instancia de Persona, como es el caso de José:

var jose = new Persona('José', 30, 1.70, 'colombiano');

¿Qué es la herencia en JavaScript?

La herencia en JavaScript se refiere a la capacidad de un objeto para acceder a propiedades y métodos de otro objeto. Este mecanismo se realiza mediante el uso de prototipos. En el caso anterior, la instancia jose hereda el método saludar del prototipo de Persona.

Al usar el método heredado, el saludo de José se vería así:

console.log(jose.saludar());
// Salida: Hola, mi nombre es José, ¿cómo te llamas tú?

¿Cuál es la ventaja de usar prototipos?

El uso de prototipos en JavaScript permite crear funciones que se comparten entre todas las instancias de una misma clase constructora, evitando así la duplicación y optimizando el uso de memoria. Además, facilita la extensión de objetos sin la necesidad de redefinir métodos para cada instancia nueva.

¿Cómo mejorar la eficiencia en la programación orientada a objetos?

Reutiliza métodos: Aprovechar la herencia de métodos mediante prototipos permite que las instancias compartan métodos sin replicarlos.
Modulariza el código: Dividir el código en funciones y clases separadas hace que sea más fácil de mantener y depurar.
Documenta y comenta: Explicar la lógica de tu código es crucial, especialmente al trabajar con estructuras complejas como la herencia de prototipos.
Experimenta con patrones de diseño: Patrones como el patrón módulo o el patrón fábrica pueden ser útiles para estructurar y gestionar mejor tu código orientado a objetos.

La programación orientada a objetos en JavaScript puede cambiar la forma en que gestionas y utilizas objetos, haciéndola una herramienta poderosa y flexible para cualquier desarrollador que busque optimizar su código y mejorar su flujo de trabajo.

José Mora

student•

Sigue que sí puedes terminar el curso 👏🏻

Aloy Foxy

student•

Gracias por los animos 💜

Calvin Rafael Bobadilla Fernandez

student•

Sencillamente, cuando creamos una clase, se genera tambien un prototipo de la misma, que tiene todas las propiedades y metodos de la clase en la cual se basa ese prototipo. Miralo como un clon.

Dymon Zamora

student•

yo con José:

Petter Joseph Chuquipiondo Robles

student•

Pequeño resumen:

Un prototipo tiene todas las propiedades y métodos que se crearon con una clase o función constructora, que luego se van a compartir o heredar en las instancias que se crearán para dicha clase.

Yimi Alejandro Gaviria Escobar

student•

Prototipo

Es un mecanismo por el cual los objetos en JavaScript pueden heredar propiedades y métodos de otros objetos. Cada objeto en JavaScript tiene una propiedad interna llamada [[Prototype]], que apunta a otro objeto, conocido como su prototipo. Cuando accedes a una propiedad o método en un objeto, JavaScript busca primero en el propio objeto. Si no la encuentra, busca en su prototipo, y así sucesivamente hasta llegar al final de la cadena de prototipos.

Herencia

En JavaScript se refiere al proceso mediante el cual un objeto puede adquirir las propiedades y métodos de otro objeto.

Andrés Soret Chacin

student•

Programación orientada a objetos en JavaScript

JavaScript funciona con objetos y prototipos, y la programación orientada a objetos se basa en el concepto de herencia.
Entender cómo funcionan los prototipos y la herencia es crucial para trabajar con clases y funciones constructoras en JavaScript.

Clases y funciones constructoras

Una clase o función constructora actúa como un molde para crear objetos.
Estas estructuras definen propiedades y métodos que se utilizarán para crear instancias con información específica.

Prototipos en JavaScript

Las funciones constructoras generan automáticamente un prototipo.
El prototipo contiene todas las propiedades y métodos que se compartirán o heredarán en las instancias creadas a partir de la clase principal.

Ejemplo de clase y herencia

class Persona { constructor(nombre, edad, altura, nacionalidad) { this.nombre = nombre; this.edad = edad; this.altura = altura; this.nacionalidad = nacionalidad; }

saludar() { console.log(Hola, mi nombre es ${this.nombre}, ¿cómo te llamas tú?); } }

En este ejemplo, se define una clase Persona con un constructor y un método saludar.
El constructor recibe cuatro parámetros: nombre, edad, altura, y nacionalidad.

Crear instancias de una clase

Para crear una instancia de una clase, se utiliza la palabra reservada new.

const jose = new Persona('José', 30, 1.70, 'Colombiano'); jose.saludar();

En este ejemplo, se crea una instancia de la clase Persona llamada jose.
La instancia se inicializa con los valores 'José', 30, 1.70, y 'Colombiano' para las propiedades nombre, edad, altura, y nacionalidad.
El método saludar se llama en la instancia jose, imprimiendo el mensaje correspondiente.

Beneficios de la herencia y los prototipos

Los prototipos permiten que las instancias hereden propiedades y métodos definidos en la clase principal.
Esto facilita la reutilización de código y la creación de objetos con funcionalidades compartidas.

Próximos pasos

Practicar creando y utilizando clases y funciones constructoras en JavaScript para familiarizarse con la sintaxis y las funcionalidades.
Explorar la documentación oficial de JavaScript para profundizar en conceptos avanzados de prototipos y herencia.
Aplicar el uso de clases y herencia en proyectos reales para aprovechar las ventajas de la programación orientada a objetos.

Juliana Rios

student•

Miguel Jonathan Madrigal González

student•

Les recomiendo el siguiente video, es muy bueno para profundizar en el concepto del objeto prototype.

https://youtu.be/a2tp64Vtzxs?si=GuEC8mPUC6Ad4hGX

Voy a dejar unos datos interesantes que se hablan en el video:

Todo JavaScript está compuesto por objetos
Los arrays, funciones, métodos, strings, booleans, numbers tienen su propio prototype. Puedes revisar el prototype del tipo de dato con el siguiente código: Object.getPrototypeOf(tipoDeDato)
Puedes heredar el prototype de una estancia a otra con Object.getPrototypeOf(estanciaObjetivo, estanciaQueHereda)
Otra manera de heredar prototypes: estancia.__proto__ = estancia2.prototype. Esto no es recomendado, puede generar conflictos y lacks de rendimiento.
Como ejemplo hablemos unicamente de un objeto, cuando creas un nuevo objeto si o si este ya tiene acceso al prototype de código nativo, el cuál ya cuenta con metodos como .toString(), entre otros.
Hablando del punto anterior pero ahora sobre arrays, al crear un array este tiene acceso al prototype base el cual contiene métodos de array como filter, findIndex, map, splice, slice, etc.

Fernando Emilio Díaz López

student•

En sintesis, al crear una instancia de una clase, esa instancia hereda las propiedades definidas en el constructor, las cuales se rellenan con valores únicos para cada objeto, y a su vez accede a los métodos definidos en el prototipo de la clase. Gracias a la cadena de prototipos, estos métodos no se duplican por instancia, pero se pueden invocar directamente (por ejemplo, instancia.metodo()) para ejecutar su comportamiento.

Fernando Emilio Díaz López

student•

El prototipo en JavaScript es un mecanismo que permite la herencia de propiedades y métodos entre objetos. Cada objeto puede tener un prototipo, que actúa como una plantilla o molde; si un objeto no encuentra una propiedad o método en sí mismo, busca en su prototipo. Esto permite compartir características y comportamientos sin duplicar código, facilitando la creación de instancias y la organización del código en la programación orientada a objetos.

Fernando Emilio Díaz López

student•

Al crear instancias tenemos, propiedades únicas por objeto (valores distintos en this) y métodos compartidos en el prototipo (ahorrando memoria y garantizando consistencia).

Fernando Emilio Díaz López

student•

Al crear instancias en JavaScript, cada objeto puede tener propiedades únicas definidas en su contexto (usando this), permitiendo que cada instancia mantenga sus propios valores. Los métodos compartidos en el prototipo permiten que todas las instancias de esa clase accedan a la misma funcionalidad sin necesidad de recrear el método en cada instancia, lo que optimiza el uso de memoria y asegura que todas las instancias tengan acceso a las mismas operaciones. Esto es fundamental en la programación orientada a objetos, promoviendo la reutilización de código y la consistencia en el comportamiento de los objetos.

Fernando Emilio Díaz López

student•

Sí, en JavaScript, el prototipo actúa como una plantilla. Contiene propiedades y métodos que pueden ser heredados por las instancias creadas a partir de una clase. Al definir una clase, el prototipo se utiliza para compartir funcionalidades entre las instancias, lo que permite una eficiente reutilización del código. Así, cada instancia no necesita definir sus propios métodos, sino que puede acceder a ellos a través del prototipo.

Fernando Emilio Díaz López

student•

Sí, las instancias heredan todas las propiedades y métodos de la clase constructora a través del prototipo. Al crear una instancia, como en el ejemplo de "José", puedes acceder a las propiedades que rellenaste y a los métodos definidos en la clase, como "saludar". Esto permite que cada instancia utilice la funcionalidad de la clase sin necesidad de definirla nuevamente.

Eduardo Enrique Morales Martínez

student•

Es como una herencia de todo de la clase constructora?

David Elias Gatica Morales

student•

Eso entendi y ademas se crea un clon llamado prototipo y al hacer una instancia este se extiende de la clase padre

Miguel Fernando Chanduvi Varas

student•

En JavaScript, casi todo es un objeto, y todos los objetos (excepto null) tienen una referencia interna llamada [[Prototype]], que apunta a otro objeto llamado prototype. Actua como un enlace. Este prototype contiene métodos y propiedades compartidas por otros objetos. Cuando tú usas una función constructora o una clase, se crea un **nuevo objeto prototype** (como un "molde") que contiene los métodos y properties definidos ahí.Entonces, todas las instancias creadas con esa clase heredan esos métodos desde ese prototype. Cuando accedes a una propiedad o método en un objeto, JavaScript primero lo busca en el objeto directamente. Si no lo encuentra, sigue el enlace al **prototype**. Si el prototype tampoco lo tiene, sigue subiendo por la cadena (prototype chain)hasta llegar al final. Solo las **funciones constructoras** tienen una propiedad explícita llamada .prototype. Los objetos creados con ellas usan ese .prototype como su [[Prototype]].

Esaú Maximino

student•

Las instancias son objetos creados a partir de una clase en programación orientada a objetos. En JavaScript, cuando defines una clase y la usas para crear un objeto, ese objeto se considera una instancia de la clase. Cada instancia puede tener diferentes valores para las propiedades definidas en la clase, pero comparte los métodos y comportamientos definidos en ella a través del prototipo. Esto permite organizar y reutilizar código de manera eficiente.

Matias Ezequiel Rivero

student•

Referido a la clase anterior y actual. Entonces suponiendo que tengo una clase Products y varias instancias. Es posible desde un método de la clase por ej. updatePrice() actualizar los precios un cierto porcentaje?

Esto sería una caso correcto de uso en la vida real ??

Muchas gracias.

Kyb3r Cipher

student•

Me gustaron las descripciones graficas lo hace mas sencillo y entiendo que es como un "molde"

Kyb3r Cipher

student•

Gracias por las explicaciones