Curso javascript nivel medio
En JavaScript, antes de que se introdujeran las clases en ES6 (ECMAScript 2015), los desarrolladores creaban estructuras similares a clases utilizando funciones constructoras. Aunque ahora tenemos una sintaxis más moderna con class, es importante entender cómo se pueden crear clases usando funciones, ya que es una base fundamental del lenguaje.
En librerías o frameworks como react, se usan funciones constructoras para crear componentes (en lugar de clases).
¿Qué es una función constructora?
Una función constructora es una función especial que se usa para crear objetos. Estas funciones actúan como "plantillas" para crear múltiples objetos con la misma estructura y propiedades.
¿Cómo crear una clase con una función constructora?
- Definir la función constructora:
- La función constructora se define como cualquier otra función, pero por convención, su nombre empieza con una letra mayúscula para indicar que es un constructor.
- Dentro de esta función,
thisse refiere al nuevo objeto que se está creando. - Usamos
thispara asignar propiedades al objeto.
Ejemplo de una función constructora:
1function Persona(nombre, edad) { 2 this.nombre = nombre; 3 this.edad = edad; 4} 5 6let persona1 = new Persona("Juan", 30); 7let persona2 = new Persona("Ana", 25); 8 9console.log(persona1.nombre); // Muestra "Juan" 10console.log(persona2.edad); // Muestra 25Salida de Consola!: Juan 25
En este ejemplo:
Personaes una función constructora que define dos propiedades:nombreyedad.persona1ypersona2son objetos creados usandonew Persona(), cada uno con sus propios valores paranombreyedad.
- Agregar métodos a la función constructora:
- Los métodos (funciones que pertenecen a un objeto) pueden ser añadidos a los objetos creados con la función constructora utilizando
this.
- Los métodos (funciones que pertenecen a un objeto) pueden ser añadidos a los objetos creados con la función constructora utilizando
Ejemplo de función constructora con métodos:
1function Persona(nombre, edad) { 2 this.nombre = nombre; 3 this.edad = edad; 4 5 this.saludar = function() { 6 console.log("Hola, mi nombre es " + this.nombre); 7 }; 8} 9 10let persona1 = new Persona("Juan", 30); 11persona1.saludar(); // Muestra "Hola, mi nombre es Juan"Salida de Consola!: Hola, mi nombre es Juan
En este ejemplo:
- La función
saludares un método dePersona. Cada vez que se crea un objetoPersona, ese objeto tendrá su propia copia del métodosaludar.
- Uso del prototipo (
prototype):- Puedes agregar métodos a todos los objetos creados por una función constructora utilizando
prototype. Esto es más eficiente que definir los métodos directamente dentro de la función constructora, ya que todos los objetos comparten la misma función en lugar de tener copias separadas.
- Puedes agregar métodos a todos los objetos creados por una función constructora utilizando
Ejemplo de uso de prototype:
1function Persona(nombre, edad) { 2 this.nombre = nombre; 3 this.edad = edad; 4} 5 6Persona.prototype.saludar = function() { 7 console.log("Hola, mi nombre es " + this.nombre); 8}; 9 10let persona1 = new Persona("Juan", 30); 11let persona2 = new Persona("Ana", 25); 12 13persona1.saludar(); // Muestra "Hola, mi nombre es Juan" 14persona2.saludar(); // Muestra "Hola, mi nombre es Ana"Salida de Consola!: Hola, mi nombre es Juan Hola, mi nombre es Ana
En este ejemplo:
Persona.prototype.saludardefine el métodosaludaren el prototipo, lo que significa que todos los objetosPersonacomparten la misma función, ahorrando memoria.
Resumen
- Funciones constructoras: Son funciones que actúan como plantillas para crear objetos similares. Se usan con la palabra clave
new. - Métodos en constructores: Se pueden definir dentro de la función constructora o en su prototipo para que todos los objetos compartan el mismo método.
- Aunque hoy en día se usa más la sintaxis moderna de
class, entender cómo funcionan las funciones constructoras y el prototipo es fundamental para comprender JavaScript en profundidad.
- Loading...
Objetivo:
Crear una clase
Producto(usando el mecanismo de funciones) que incluya el precio original de un producto y un descuento aplicado por defecto, y utilizarla para calcular el precio final después del descuento.Instrucciones:
Crea una clase llamada
Productocon los siguientes atributos:- precio: El precio original del producto.
- dto: El porcentaje de descuento aplicado al producto.
La clase debe incluir un método llamado calcularPrecioConDescuento que retorne el precio del producto después de aplicar el descuento, puedes usar esta formula para calcular el precio final:
precio - (precio * dto / 100)
Loading...