Clases en JavaScript: Creación y Uso de Objetos con Sintaxis Moderna

Clase 38 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿Cómo han evolucionado las clases en JavaScript desde 2015?

Las clases en JavaScript han experimentado una transformación significativa desde la introducción de la sintaxis actual en 2015. Anteriormente, JavaScript utilizaba funciones constructoras para crear objetos, un método eficaz pero complejo para algunos desarrolladores, especialmente aquellos familiarizados con lenguajes de programación orientados a objetos como Java. La nueva sintaxis de clases no solo simplifica este proceso, sino que también ofrece un "sugar syntax", o sintaxis dulce, que resulta más intuitiva y familiar para los programadores.

¿Qué son las clases en JavaScript?

Una clase en JavaScript actúa como un blueprint o plano para crear objetos. Imagínalo como un molde, a partir del cual se pueden construir múltiples instancias o copias de un objeto. La definición de clase facilita la estructuración y organización de codificaciones, ya que permite separar claramente las propiedades y los métodos que lo caracterizan.

¿Cómo se define una clase con la nueva sintaxis en JavaScript?

La creación de una clase comienza con la palabra reservada class, seguida del nombre de la clase, que por convención, empieza con mayúscula. Después de definir el cuerpo de la clase con llaves {}, se introduce el método constructor. Un ejemplo simple sería una clase Persona con propiedades nombre y edad.

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.`);
  }
}

¿Cómo se crean instancias de una clase en JavaScript?

Una instancia es una manifestación concreta de la clase. Utilizar la palabra new junto con el nombre de la clase permite crear estas instancias. Este proceso activa el constructor, asignando valores a las propiedades definidas.

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

¿Qué beneficios ofrecen las clases en la programación orientada a objetos?

Simplicidad y claridad: La sintaxis de las clases resulta más natural y sencilla para quienes provienen de otros lenguajes de programación orientados a objetos.
Reutilización de código: Los blueprints permiten crear múltiples objetos similares sin necesidad de redefinir sus características cada vez.
Organización del código: Al separar claramente métodos y propiedades, las clases facilitan el mantenimiento y la comprensión del código.
Encapsulamiento: Aunque JavaScript no implementa encapsulamiento de manera robusta como otros lenguajes, las clases permiten una mejor centralización de propiedades y métodos.

¿Cómo se compara esta nueva sintaxis con los métodos previos?

Antes de 2015, las funciones constructoras eran la alternativa principal para emular estructuras de clases. Sin embargo, estas podían resultar menos intuitivas, especialmente para aquellos no acostumbrados al uso detallado de prototipos y this en su implementación. La sintaxis moderna de las clases es más limpia y alineada con otros lenguajes, reduciendo barreras para quienes migran de plataformas más antiguas.

JavaScript se sigue reinventando constantemente, y la habilidad para adaptarse a estas evoluciones permite a los desarrolladores crear aplicaciones más robustas y eficientes. Aprender sobre clases no solo abre la puerta a un código más estructurado, sino que también refuerza la base de conocimientos en programación orientada a objetos. ¡Sigue explorando y fortaleciendo tus habilidades en JavaScript y más allá!

Ecsar García Sandoval

student•

Mini resumen: Es mejor entoces utilizar clases en lugar de funciones constructoras pues eso es del pasado pero se ven para entender código más moderno, ambas generan el prototipo.

David Elias Gatica Morales

student•

Al final del día es lo mismo solo que uno lo ves con sugar syntax

Jafeth Jesús Sánchez Sánchez

student•

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.

Facundo Peralta

student•

La verdad que diego explica como los mismísimos dioses.

Sandra Rosa Arroyo Paredes

student•

Estructura de una clase:

Nos permite definir las propiedades de mi objeto (constructor).

Definición de métodos a compartir entre las instancias a crear.

class Objeto {
  constructor(var1, var2) {
    this.key1 = var1;
    this.key2 = var2
  }
  metodo(){
    // detalle de la funcion
  }
}

Calvin Rafael Bobadilla Fernandez

student•

RESUMEN:

Alejandro Sánchez Yalí

student•

JavaScript moderno utiliza clases para crear objetos con propiedades y métodos. Veamos un ejemplo simple:

class Coche {
  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
  }

  describir() {
    return `Este coche es un ${this.marca} ${this.modelo}`;
  }
}

Puntos clave:

constructor: Inicializa las propiedades del objeto.
this: Se refiere a la instancia actual del objeto.
Métodos: Funciones asociadas a la clase (como describir()).

Uso:

const miCoche = new Coche("Toyota", "Corolla");
console.log(miCoche.describir()); // "Este coche es un Toyota Corolla"

Las clases simplifican la creación de múltiples objetos con estructura similar, mejorando la organización y reutilización del código.

Miguel Jonathan Madrigal González

student•

Esto es un blue print:

Edinson Parra Bahos

student•

si quiero agregarle atributos a la clase también utilizo el método "prototype" o solo funciona para funciones constructoras?

en caso negativo los atributos se tendrían que agregar a la clase directamente?

Platzi

student•

Los atributos se agregan directamente a la clase, no a través del método 'prototype', que se usa para funciones constructoras.

Miguel Jonathan Madrigal González

student•

Para agregar atributos no se hace através de .prototype, se hace directamente a la clase.

Pero si quieres agregar un nuevo método entonces si necesitas usar prototype.

Gabriel Adid Cabrera Olmedo

student•

Sugar syntax

El término "syntactic sugar" (o "azúcar sintáctica") se refiere a características en el lenguaje de programación que no añaden nuevas funcionalidades al lenguaje, pero hacen que el código sea más fácil de leer y escribir. Estas características ayudan a que el código sea más claro, conciso y, a menudo, más elegante.

Manauri Brazoban

student•

<// aqui estare trabajando con el metdo de clases class Persona{ constructor (nombre , apellido, edad, direccion){ this.nombre = nombre this.apellido = apellido this.edad = edad this.direccion = direccion } saludar(){ console.log(Hola mi nombre es: ${this.nombre}, mi apellido es: ${this.apellido} y mi edad ${this.edad} y yo vivo en ${this.direccion} bye.) }}

// instacia de la persona const persona1 = new Persona("Lucas", "German",45,"Santo domingo barrio peligro") console.log(persona1)console.log(persona1.nombre) persona1.saludar()

Persona.prototype.trabajo = "Trabajador">

Santiago Alvarez Grisales

student•

Se me pareció mucho java

Jorge Ivan Martinez Guerra

student•

const persona1 es una instancia (objeto) de la clase Persona. La clase actúa como un molde para crear objetos, y persona1 es un ejemplo específico creado a partir de esa clase. En resumen, Persona es la clase y persona1 es el objeto.

Jorge Ivan Martinez Guerra

student•

Un "Blueprin" es un término que se usa en programación orientada a objetos para referirse a un "molde" o "plantilla" que define cómo crear objetos. En el contexto de JavaScript, una clase actúa como un blueprint. Define propiedades y métodos que las instancias de la clase tendrán. Al igual que un plano arquitectónico, permite construir múltiples objetos a partir de una única definición. Este concepto es clave en la POO, facilitando la organización y reutilización del código.

Jorge Ivan Martinez Guerra

student•

La "sugar syntax" o "sintaxis azucarada" se refiere a una forma de escribir código que es más legible o fácil de entender, pero que no introduce nuevas funcionalidades al lenguaje. En JavaScript, la sintaxis de clases es un ejemplo de sugar syntax, ya que simplifica la creación de objetos y clases en comparación con las funciones constructoras tradicionales. Esto facilita el trabajo de los desarrolladores al hacer que el código sea más claro y conciso, sin perder la funcionalidad subyacente.

Carlos Andres Arteaga escobar

student•

ok cada ves esta mejorando // esta es una clase es algo mas moderno con funcion y con class function Persona2(nombre,edad) { this.nombre = nombre; this.edad = edad;}const persona6 = new Persona2(34,"katy")console.log(persona6); Persona2.prototype.saludar = function(){ console.log(hola me llamo ${this.edad} y tengo ${this.nombre} años);}persona6.saludar();

class Persona { constructor(nombre, edad) { this.edad = edad; this.nombre = nombre; } saludar() { console.log(hola mi nombre es ${this.nombre} y tengo ${this.edad} años como estan ) }}const persona3 = new Persona("CARLOS",34)const persona4 = new Persona("diego",24) console.log(persona3);console.log(persona4);

Carlos Andres Arteaga escobar

student•

excelente clase me encanta class Persona { constructor(nombre, edad) { this.edad = edad; this.nombre = nombre; } saludar() { console.log(hola mi nombre es ${this.nombre} y tengo ${this.edad} años como estan ) }}const persona3 = new Persona("CARLOS",34)const persona4 = new Persona("diego",24) console.log(persona3);console.log(persona4);

Kyb3r Cipher

student•

Me gusta este sweet code y esta sintaxis es mas legible y segue estandares de otros lenguages. Que bueno que JavaScript ultimamente se adapta a los estandares!

Miguel Jonathan Madrigal González

student•

El azúcar sintáctico, o syntactic sugar en inglés,es un concepto de programación que permite hacer que la sintaxis de un lenguaje sea más legible y simple, sin alterar su funcionalidad.

En la imagen de arriba menciona algunas propiedades:

Legible
Limpio
Conciso
Seguro
Uso amigable

Miguel Jonathan Madrigal González

student•

Class es la versión sugar syntax de lo que ya conocemos nos permite generar objetos como la función constructora

Andrés Soret Chacin

student•

Introducción a las clases en JavaScript

A partir de 2015, JavaScript presentó una nueva forma de definir estructuras orientadas a objetos.
No es algo completamente nuevo, sino una forma más cercana a otros lenguajes orientados a objetos, como Java.
Esta nueva estructura de clases es similar a una función constructora con una sintaxis diferente.

Definición de clases

Una clase es un "molde" para crear objetos.
Se define usando la palabra reservada class seguida del nombre de la clase.
El nombre de la clase debe comenzar con una letra mayúscula.

Ejemplo de clase en 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.); } }

En este ejemplo, se define una clase llamada Persona con un constructor y un método saludar.
El constructor recibe dos parámetros: nombre y edad.
El método saludar imprime un mensaje utilizando las propiedades de la clase.

Crear instancias de una clase

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

const persona1 = new Persona('Mariana', 25); persona1.saludar();

En este ejemplo, se crea una instancia de la clase Persona llamada persona1.
La instancia se inicializa con los valores 'Mariana' y 25 para las propiedades nombre y edad.
El método saludar se llama en la instancia persona1, imprimiendo el mensaje correspondiente.

Beneficios de usar clases

La sintaxis de clases en JavaScript permite definir objetos de manera más estructurada y clara.
Facilita la creación de múltiples instancias con propiedades y métodos comunes.
Alinea la sintaxis de JavaScript con otros lenguajes orientados a objetos, facilitando el aprendizaje y la migración de desarrolladores entre lenguajes.

Próximos pasos

Practicar creando y utilizando clases en JavaScript para familiarizarse con la sintaxis y las funcionalidades.
Explorar la documentación oficial de JavaScript para profundizar en conceptos avanzados de clases, como herencia y métodos estáticos.
Aplicar el uso de clases en proyectos reales para aprovechar las ventajas de la programación orientada a objetos.

Juan Francisco

student•

/*clase, Una clase en JavaScript es un molde o blueprint para crear objetos. Se define con la palabra reservada class y normalmente incluye un método constructor que establece las propiedades del objeto. A partir de una clase, puedes crear múltiples instancias de objetos, cada uno con sus propias propiedades y métodos
*/

class Persona {
    constructor (nombre, edad) { // Metodo constructor, aqui se inicializan las propiedades del objeto 
        this.nombre = nombre; // this hace referencia a la instancia que se esta creando
        this.edad = edad; // this.edad es una propiedad del objeto y hace referencia al parametro edad
    }// this.nombre es el atributo o propiedad del objeto, y nombre es el parametro que se pasa al constructor.

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

/*
Persona.saludar(); // Error, no se puede llamar al metodo saludar desde la clase, se debe llamar desde una instancia.
*/

// Crear una instancia de la clase Persona, con la palabra reservada new seguido del nombre de la clase y los parametros que recibe el constructor
const persona1 = new Persona('Mariana', 25); // Instancia de la clase Persona
persona1.saludar(); // Hola, mi nombre es Mariana y tengo 25 años.



// EXPLICACION DE LOS PARAMETROS, THIS. E LA ASIGANCION DE PROPIEDADES

/* 🧩 1. nombre y edad (entre paréntesis)
Estos son parámetros del constructor. Cuando creas una nueva instancia de la clase Persona, puedes pasarle valores:
Aquí "Ana" se asigna al parámetro nombre, y 25 al parámetro edad.

🧠 2. this.nombre y this.edad
Estos hacen referencia a las propiedades del objeto que estás creando. El prefijo this significa “este objeto en particular”. Entonces, this.nombre es el nombre guardado dentro del objeto, no el parámetro.

🔗 3. this.nombre = nombre
Aquí estás diciendo:

“La propiedad nombre de este objeto (this.nombre) debe tomar el valor del parámetro nombre que recibí.”

Lo mismo con this.edad = edad.

🧠 ¿Por qué no usar solo nombre = nombre?
Porque sin this, estarías asignando el parámetro a sí mismo, lo cual no tiene efecto. this.nombre te permite guardar ese valor dentro del objeto, para que puedas accederlo más tarde.

- this le dice a JavaScript:

“Estoy hablando del objeto que se está creando en este momento.”

Sin this, los valores se quedan en el aire y no se guardan en el objeto.

*/