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?

  1. 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, this se refiere al nuevo objeto que se está creando.
    • Usamos this para 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 25
Salida de Consola!:
Juan
25

En este ejemplo:

  • Persona es una función constructora que define dos propiedades: nombre y edad.
  • persona1 y persona2 son objetos creados usando new Persona(), cada uno con sus propios valores para nombre y edad.
  1. 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.

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 saludar es un método de Persona. Cada vez que se crea un objeto Persona, ese objeto tendrá su propia copia del método saludar.
  1. 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.

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.saludar define el método saludar en el prototipo, lo que significa que todos los objetos Persona comparten 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 Producto con 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...