Clases en JavaScript con sintaxis moderna

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:006:17

Clases en JavaScript con sintaxis moderna

Curso de Fundamentos de JavaScript

Clase 38 de 55

Clase 38 / 55

Recursos

Las clases en JavaScript llegaron en 2015 como una nueva forma de construir objetos con una sintaxis más limpia, parecida a lenguajes como Java. Si ya trabajas con funciones constructoras, esta guía te muestra cómo migrar a la sintaxis moderna que domina hoy la programación orientada a objetos en JS.

¿Qué es una clase en JavaScript y para qué sirve?

Una clase funciona como un blueprint, es decir, un molde a partir del cual vas a construir diferentes objetos con la misma estructura. No es una característica completamente nueva del lenguaje: es lo que se conoce como sugar syntax, una capa más amigable encima de las funciones constructoras que ya existían.

¿Qué es sugar syntax? Es una sintaxis más legible que hace lo mismo que el código original por debajo. En este caso, las clases siguen creando objetos como las funciones constructoras, pero se leen mejor.

La idea central es simple: defines una vez la estructura y luego generas tantas instancias como necesites, cada una con sus propios valores.

¿Cómo se declara una clase y su método constructor?

Para empezar usas la palabra reservada class, seguida del nombre que iniciará con mayúscula por convención. Dentro de la clase, lo primero que defines es el método constructor, que se encarga de configurar las propiedades de cada objeto que nazca del molde.

El constructor recibe los argumentos que personalizan cada instancia y los asigna a la clase usando la palabra reservada this, que hace referencia al objeto que se está creando en ese momento.

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

saludar() { console.log(Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años); } }

¿Qué diferencia hay entre propiedades y métodos dentro de una clase?

Las propiedades son los datos que describen al objeto, como nombre y edad. Los métodos son funciones que viven dentro de la clase y definen comportamientos, como saludar. Ambos conviven dentro del mismo bloque, pero cumplen roles distintos: uno guarda información, el otro la usa.

¿Qué hace this dentro de una clase? this apunta a la instancia que se está creando. Cuando escribes this.nombre, le estás diciendo: "esta propiedad pertenece al objeto actual".

¿Cómo creo una nueva instancia con la palabra reservada new?

Una clase por sí sola no hace nada, es solo el molde. Si llamas un método sin instanciar antes, vas a recibir undefined porque las propiedades no tienen valores asignados todavía. Para darle vida necesitas crear instancias con new.

La palabra reservada new conecta con el constructor y le pasa los valores que rellenan las propiedades. Cada instancia es independiente y guarda sus propios datos.

javascript const persona1 = new Persona("Mariana", 25); persona1.saludar(); // Hola, mi nombre es Mariana y tengo 25 años

En este ejemplo, persona1 es una instancia de la clase Persona. Los argumentos "Mariana" y 25 viajan al constructor y se convierten en el valor de this.nombre y this.edad. Cuando llamas persona1.saludar(), el método ya tiene datos reales con los que trabajar.

¿Por qué usar clases en lugar de funciones constructoras?

Las dos opciones generan objetos, pero las clases ganan en legibilidad y se alinean con la forma en que otros lenguajes orientados a objetos estructuran el código. De aquí en adelante, casi todo lo que veas en programación orientada a objetos en JavaScript va a usar esta sintaxis: class, constructor, métodos y new para instanciar.

Si quieres practicar, intenta crear una clase distinta, por ejemplo Producto con propiedades nombre y precio, y un método que muestre la información. ¿Qué clase se te ocurre construir primero? Cuéntalo en los comentarios.

Jafeth Jesús Sánchez Sánchez

Hace 2 años

Las clases en JavaScript son una forma moderna y más sencilla de crear objetos y manejar herencia. Son una "envoltura" para las funciones constructoras tradicionales que proporciona una sintaxis más clara y concisa. Aunque las clases son en realidad funciones en el trasfondo, hacen que el código sea más fácil de entender y de mantener.

¿Cómo se utiliza? Las clases se utilizan para crear objetos con propiedades y métodos de manera más estructurada. Dentro de una clase, se define un método especial llamado constructor, que es donde inicializamos las propiedades del objeto (es decir, aquí es donde la función constructora se integra). Luego, podemos crear instancias de la clase usando la palabra clave new, similar a cómo lo hacíamos con las funciones constructoras.

// Creacion de una clase con su constructor
class Auto {
    // Definicion del constructor
    constructor(marca,modelo,año){
        this.marca = marca;
        this.modelo = modelo;
        this.año = año;
    }
    // Creacion de metodo
     tocarBocina(){
        console.log(`Bepp Beep soy ${this.marca} ${this.modelo} del año ${this.año}`);
     }

}
let auto1 = new Auto ("toyota","Corolla",2001);
const auto2 = new Auto("Honda", "Civic", 2018);
auto1.tocarBocina();
auto2.tocarBocina();

Clase Auto: Creamos una clase llamada Auto, que contiene un constructor. El constructor es como la función constructora que vimos antes, donde definimos las propiedades que tendrá cada objeto que creemos a partir de esta clase (marca, modelo, año).
Método tocarBocina: Dentro de la clase también definimos un método llamado tocarBocina, que accede a las propiedades del objeto usando this y emite un mensaje personalizado.
Creación de instancias: Luego, creamos dos autos (auto1 y auto2) usando new Auto(), cada uno con diferentes valores para las propiedades marca, modelo, y año. Al llamar al método tocarBocina en cada instancia, obtenemos un mensaje único para cada auto.

Comentarios (25)25 comentarios

Ecsar García Sandoval

David Elias Gatica Morales

Facundo Peralta

Sandra Rosa Arroyo Paredes

Calvin Rafael Bobadilla Fernandez

David Rangel

Hace un año

Alfonso Galeano Conde

Hace 8 meses

Alejandro Sánchez Yalí

Miguel Jonathan Madrigal González

Gabriel Adid Cabrera Olmedo

Edinson Parra Bahos

Platzi

Manauri Brazoban

Daniel Vergel

Hace 3 meses

Daniel Fernando Reyes Vasquez

Hace 6 meses

Santiago Alvarez Grisales

Jorge Ivan Martinez Guerra

Carlos Andres Arteaga escobar

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

Clases en JavaScript con sintaxis moderna