Función constructora y gestión de instancias en JavaScript

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:35

Función constructora y gestión de instancias en JavaScript

Curso de Fundamentos de JavaScript

Clase 37 de 55

Clase 37 / 55

Comentarios (33)33 comentarios

Carlos G

Hace 2 años

Magistral la forma en la que el profe Diego explica, realmente es clara la estructura, recuerden que es necesario complementar cada lección con otros recursos, libros, artículos, y mucha práctica.

Sandra Rosa Arroyo Paredes

Hace 2 años

Insights:

Todas las funciones tienen la propiedad prototype que permiten compartir y/o heredar propiedades y/o métodos.
Usamos funciones constructoras para instanciar multiples veces diferentes objetos.
Asignando los propiedades y/o métodos al prototype de la función constructora, aseguramos que las diferentes instancias puedan acceder a ellas.

David Elias Gatica Morales

Hace 2 años

Buena sintesis

Jafeth Jesús Sánchez Sánchez

Hace 2 años

Una función constructora es una plantilla que te permite crear múltiples objetos similares. Es una función especial que, al usarla junto con la palabra clave new, construye nuevos objetos que siguen la misma estructura que defines dentro de la función

Se utiliza cuando se necesita crear varios objetos con propiedades y comportamientos comunes, se define la estructura dentro de la función y luego creas instancias con new

// ------ Funcion constructora ------
function Estudiante(nombre,edad,grado){
    this.nombre = nombre;
    this.edad = edad;
    this.grado = grado;
    this.saludar = function(){
        console.log (`Hola, soy ${this.nombre}, tengo ${this.edad} y estoy en ${this.grado}`);
    };
}
const estudiante1 = new Estudiante ("Luis", 24, "11°");
const estudiante2 = new Estudiante ("Maria", 22, "7°");
estudiante1.saludar();
estudiante2.saludar();

Función constructora: La función Estudiante es nuestra plantilla. Dentro de la función, usamos this para asignar los valores que se pasarán como argumentos (nombre, edad, grado).
Método saludar: Cada estudiante tendrá su propio método saludar, que utiliza las propiedades del objeto creado para personalizar el mensaje.
Creación de instancias: Cuando usamos new, creamos nuevos objetos (estudiante1 y estudiante2). Estos objetos heredan las propiedades y métodos de la función constructora, pero los valores de esas propiedades cambian dependiendo de los datos que les pasamos (nombre, edad, grado).

Miguel Jonathan Madrigal González

Hace 2 años

Les quiero compartir un dato curioso, he redactado un resúmen del dato curioso y finalmente use IA para optimizar la legibilidad de mi texto.

DATO CURIOSO:

El orden de creación de instancias no afecta su acceso a los métodos añadidos al prototype de la función constructora. Aunque inicialmente creías que las instancias creadas antes de agregar un nuevo método al prototype no lo contendrían, esto no es cierto. Todas las instancias, sin importar cuándo fueron creadas, acceden automáticamente a los métodos del prototype, ya que están vinculadas dinámicamente a él. Esto también aplica si se eliminan métodos: los cambios en el prototype se reflejan inmediatamente en todas las instancias.

function Estudiante(nombre) {
    this.nombre = nombre;
}

// Creamos la primera instancia
const estudiante1 = new Estudiante('José');

// Agregamos un método al prototype
Estudiante.prototype.saludar = function () {
    console.log(`Hola, me llamo ${this.nombre}`);
};

// Creamos una segunda instancia
const estudiante2 = new Estudiante('María');

// Ambas instancias tienen acceso al nuevo método
estudiante1.saludar(); // Output: 'Hola, me llamo José'
estudiante2.saludar(); // Output: 'Hola, me llamo María'

marco contreras

Hace 2 años

porque no me esta funcionando esto chicos? me sale ese error. si me ayudan no entiendo porque me muestra ese error.

marco contreras

Hace 2 años

ya encontre el error puse dos veces el signo igual xD

Kyb3r Cipher

Hace 2 años

Por el signo igual en el new cuando creas un nuevo object de una classe

Diego Andrés Lopez Rodriguez

Hace 2 años

Mi ejemplo practico de esta clase 🧉

Julio Cardenas

Hace 2 años

En realidad la propiedad telefono existe en cada una de las instancias

Sandra Rosa Arroyo Paredes

Hace 2 años

Si! pero es una propiedad heredada del prototype de la función constructora.
El prototype es una propiedad de la función constructora, es del tipo objeto.
Esta propiedad prototype nos permite compartir propiedades y métodos entre las diferentes instancias (objetos) creadas a partir de la función constructora.

Calvin Rafael Bobadilla Fernandez

Hace 2 años

RESUMEN:

Daniel Vergel

Hace 3 meses

Miguel Angel

Hace 5 meses

Si usas this en una función normal (sin new), this apunta al objeto global (como window en el navegador). Es una trampa peligrosa porque terminas ensuciando el entorno global en lugar de crear un objeto.

Si usas new con una función sin this, simplemente creas un objeto vacío. La función se ejecuta, pero como no asignaste nada a this, no hay propiedades que heredar.

¿Ves por qué new y this son el dúo dinámico para crear objetos?

Stephania Millán

Hace un año

Al decidir entre usar prototype o añadir propiedades directamente en el objeto constructor, considera lo siguiente:

Uso de prototype: Si deseas que todas las instancias compartan el mismo método o propiedad, usa prototype. Esto ahorra memoria, ya que solo se crea una copia de la propiedad o método en el prototipo.
Añadir al objeto constructor: Si necesitas que cada instancia tenga un valor único para esa propiedad, añade la propiedad directamente dentro del constructor. Esto es útil para propiedades específicas de cada objeto, como un nombre o edad diferentes.

Elegir entre ambos depende de si la propiedad o método debe ser compartido entre instancias o si debe ser único para cada instancia.

Daniel stevens Celorio sanabria

Hace 2 años

Para agregar un nuevo parámetro a una función constructora sin modificar la función, puedes usar el prototipo. Primero, agrega la nueva propiedad al prototipo de la función constructora:

Persona.prototype.nuevaPropiedad = valorPorDefecto;

Luego, puedes asignar un valor a esa propiedad en cada instancia después de crearla:

const persona1 = new Persona("Juan", "Pérez", 30);
persona1.nuevaPropiedad = "valor personalizado";

Así mantienes la función constructora intacta y puedes agregar propiedades a las instancias según sea necesario.

Jonathan Jazpi Perez

Hace 10 días

EN esta clase veo que al final utiliza prototype para ingresar un metodo y no utiliza la funcion de flecha, yo lo hice con la funcion de flecha y me da undefined por que si en teoria es lo mismo.

Persona.prototype.saludar2 = function () { console.log(Hola mi nombre es ${this.nombre} ${this.apellido} );} seria esta pero asi: Persona.prototype.saludar2 = () => { console.log(Hola mi nombre es ${this.nombre} ${this.apellido} );}

Las funciones de flecha no tienen su propio this: heredan el contexto del lugar donde fueron creadas (en este caso, el ámbito global), donde tus variables no existen.

Una función tradicional crea su propio this dinámicamente al momento de ejecutarse, apuntando directamente a la instancia que llama al método (como persona1). Por eso al usar function() sí funciona y con la flecha da undefined.

Kenneth Angulo L

Hace 3 meses

debo actualizar las instancias, pero no se como

Para actualizar las instancias ya creadas, tienes dos caminos dependiendo de tu objetivo.

Si quieres que todas las instancias (las 100 viejas y las nuevas) tengan la propiedad, usa NombreConstructor.prototype.propiedad = valor. Esto es como añadir una funcionalidad al "molde" base que todas comparten.

Si solo necesitas actualizar una instancia específica, accedes directamente: instancia1.propiedad = valor.

¿Ves la diferencia entre modificar el prototipo compartido y modificar un objeto individual?

Kenneth Angulo L

Hace 3 meses

¿Por qué es mejor usar funciones constructoras?

Imagina que tienes una fábrica de autos. Si construyes cada auto a mano desde cero, perderás muchísimo tiempo y serás propenso a cometer errores. Las funciones constructoras actúan como los planos de esa fábrica. En lugar de escribir manualmente la estructura de un objeto una y otra vez, defines un molde único. Al usar este molde, puedes generar miles de objetos con la misma estructura en fracciones de segundo, simplemente pasándole los datos específicos a través de parámetros. Esto mantiene tu código DRY (Don't Repeat Yourself), reduce drásticamente el peso de tus archivos y facilita el mantenimiento. Si el día de mañana decides que todos los autos necesitan un número de serie, solo modificas el plano original y el cambio se reflejará en tu lógica de creación, en lugar de tener que buscar y actualizar cientos de objetos dispersos por todo tu código.

David Rangel

Hace un año

Por si tienen curiosidad de saber cómo funcionaría con typescript, les dejo unos ejemplos de algo muy similar a lo visto en clase (si es diferente y hay cosas en js que en ts no se puede hacer):

interface PersonaBase {
  nombre: string;
  apellido: string;
  edad: number;
  telefono?: string;
  nacionalidad?: string;
  saludar?: () => void;
}

interface PersonaIxtendida extends PersonaBase {
  [key: string]: any;
}

class Persona {
  nombre: string;
  apellido: string;
  edad: number;
  telefono?: string;
  nacionalidad?: string;
  saludar?: () => void = () => {};

  constructor({ nombre, apellido, edad }: PersonaIxtendida) {
    this.nombre = nombre;
    this.apellido = apellido;
    this.edad = edad;
  }
}

const personaUno = new Persona({
  nombre: 'Barry',
  apellido: 'Allen',
  edad: 18,
});

console.log(personaUno);

const personaDos = new Persona({
  nombre: 'Bruce',
  apellido: 'Banner',
  edad: 34,
});

console.log(personaDos);

Persona.prototype.telefono = '55-5555-5555';

console.log(personaUno.telefono);

Persona.prototype.nacionalidad = 'Mexicano';

console.log(personaUno.telefono);

// si usas un arrow function no identifica el this

Persona.prototype.saludar = function () {
  console.log(`hola: me llamo: ${this.nombre} ${this.apellido}`);
};

personaUno.saludar!();
personaDos.saludar!();

/*
// esto es lo que ejecuta:

Persona {
  saludar: [Function (anonymous)],
  nombre: 'Barry',
  apellido: 'Allen',
  edad: 18
}
Persona {
  saludar: [Function (anonymous)],
  nombre: 'Bruce',
  apellido: 'Banner',
  edad: 34
}
55-5555-5555

*/

Juan Francisco

Hace un año

 /*ESTRUCTURA BASICA DE UN CONSTRUCTOR FUNCTION, son plantillas para crear objetos
    Se recomienda que el nombre de un constructor function inicie con mayuscula
    Los parametros son las propiedades que tendra el objeto
    */
    function Persona(nombre, apellido, edad) {
        this.nombre = nombre;
        this.apellido = apellido;
        this.edad = edad
    }

    // Instancia de un objeto
    /*  INSTANCIA,  una instancia de un objeto es una copia concreta de un objeto creada a partir de un modelo o        plantilla, como una función constructora o una clase.
        Instanciar es el proceso de crear un nuevo objeto basado en una estructura definida. En JavaScript, esto se hace normalmente con el operador new.
    */
    const persona1 = new Persona('Juan', 'Perez', 30); // El new crea un nuevo objeto vacio y lo asigna al this
    console.log(persona1); // persona1 es una instancia del objeto Persona (modello o plantilla)

    const persona2 = new Persona('Diego', 'De Granda', 35); 
    console.log(persona2);

    const persona3 = new Persona('Ana', 'Gomez', 28, 'Femenino'); // femenino no se asigna porque el constructor solo tiene 3 parametros
    console.log(persona3);

    // Agregar propiedades y metodos a un constructor function
    // Propiedades: son caracteristicas del objeto
    // Metodos: son acciones que el objeto puede realizar

    // Utilizando el prototype para agregar propiedades y metodos a un constructor function

    Persona.prototype.telefono = "555-555-555"; // Agrega la propiedad telefono a todas las instancias de Persona

    // Agregar una propriedad a una instancia en particular

    persona1.nacionalidad = 'Mexicano'; // Agrega la propiedad nacionalidad solo a la instancia persona1

    // Agregar un metodo a todas las instancias de Persona con el prototype

    Persona.prototype.saludar = function() {
        console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
    }

    persona1.saludar(); // Hola, me llamo Juan Perez
    persona2.saludar(); // Hola, me llamo Diego De Granda

    // Los metodos se suelen definir dentro del prototype para que todas las instancias los compartan y no se duplique la memoria.

Fernando Emilio Díaz López

Hace un año

Usar prototype es más eficiente que asignar propiedades manualmente a cada instancia de un objeto. Al definir propiedades y métodos en el prototype, todas las instancias comparten la misma referencia, lo que ahorra memoria y mejora el rendimiento. Asignar manualmente crea copias individuales en cada objeto, aumentando el consumo de recursos. Por lo tanto, para la programación orientada a objetos en JavaScript, se recomienda usar prototype para mantener un diseño limpio y escalable.

Johan Sebastian

Hace un año

Es mejor usar clases, asi es mas complejo

Carlos Manuel Hernandez Vivas

Hace un año

me llevo a recordar Java. jejeje

Recursos

Crear objetos de forma manual está bien cuando necesitas uno o dos, pero cuando el proyecto exige cientos de ellos, copiar y pegar deja de ser una opción viable. Las funciones constructoras en JavaScript resuelven exactamente ese problema: permiten fabricar objetos de manera escalable, reutilizable y organizada.

¿Cómo se crea una función constructora en JavaScript?

Una función constructora es, en esencia, una función cuyo único propósito es construir objetos [0:42]. Su sintaxis es la misma que la de cualquier función, con dos diferencias importantes:

El nombre de la función inicia con mayúscula (por convención). Si queremos crear personas, la función se llama Persona.
Dentro del cuerpo se utiliza la palabra clave this para asignar cada propiedad al objeto que se está construyendo.

javascript function Persona(nombre, apellido, edad) { this.nombre = nombre; this.apellido = apellido; this.edad = edad; }

El this [1:42] hace referencia al objeto concreto que se está creando en ese momento. Así, this.nombre = nombre significa: "la propiedad nombre de este objeto será igual al parámetro que recibimos".

¿Qué es una instancia y cómo se genera?

Cada objeto que nace a partir de una función constructora recibe el nombre de instancia [2:18]. Para crearla se usa la palabra reservada new seguida de la función constructora con sus argumentos:

javascript const persona1 = new Persona('Juan', 'Pérez', 30); const persona2 = new Persona('Diego', 'De Granda', 35);

console.log(persona1); // Persona { nombre: 'Juan', apellido: 'Pérez', edad: 30 } console.log(persona2); // Persona { nombre: 'Diego', apellido: 'De Granda', edad: 35 }

La ventaja es evidente: en lugar de duplicar bloques de código, solo invocas la función con los datos que cambian [3:10]. Incluso podrías automatizar el proceso dentro de un ciclo para generar tantas instancias como necesites.

¿Para qué sirve prototype en una función constructora?

Después de definir la función constructora, es probable que necesites agregar nuevas propiedades o métodos sin modificar el constructor original. Aquí entra en juego el prototype [4:25].

El prototype es un objeto especial que actúa como una copia compartida de la función constructora. Todo lo que agregues al prototype estará disponible para todas las instancias, presentes y futuras.

javascript Persona.prototype.telefono = '555-555-5555';

Al inspeccionar cualquiera de las instancias, esta propiedad no aparece directamente en el objeto, sino dentro de su prototipo [5:08]. JavaScript busca primero en el objeto; si no encuentra la propiedad, la busca en la cadena de prototipos.

¿Cómo agregar una propiedad solo a una instancia específica?

Si la nueva propiedad no necesita compartirse con las demás instancias, se asigna directamente sobre el objeto [5:50]:

javascript persona1.nacionalidad = 'mexicano';

persona1 tendrá la propiedad nacionalidad.
persona2 no la tendrá, porque no se la asignamos.

Esto permite personalizar instancias individuales sin afectar al resto.

¿Cómo se agrega un método a través de prototype?

Los métodos también se añaden al prototype para que todas las instancias los hereden [6:25]. Se define como una función anónima asignada a la propiedad deseada:

javascript Persona.prototype.saludar = function () { console.log(Hola, me llamo ${this.nombre} ${this.apellido}); };

persona1.saludar(); // Hola, me llamo Juan Pérez persona2.saludar(); // Hola, me llamo Diego De Granda

Dentro del método, this vuelve a apuntar a la instancia que lo invoca, lo que permite acceder a sus propiedades particulares. Así, cada persona saluda con su propio nombre y apellido.

¿Cuándo conviene usar funciones constructoras frente a objetos literales?

La regla es sencilla:

Objeto literal → cuando necesitas un solo objeto o unos pocos con estructuras diferentes.
Función constructora → cuando vas a crear múltiples objetos con la misma estructura y quieres mantener el código limpio y escalable.

Combinar la función constructora con el prototype te da la flexibilidad de extender la estructura en cualquier momento, ya sea con propiedades por defecto o con métodos que todas las instancias puedan utilizar. Si quieres profundizar más, prueba a crear tu propia función constructora y experimenta agregando propiedades y métodos tanto al constructor como al prototype. Comparte en los comentarios qué estructura diseñaste y qué resultados obtuviste.

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Función constructora y gestión de instancias en JavaScript