Facundo Peralta
La verdad que diego explica como los mismísimos dioses.
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
thisdentro de una clase?thisapunta a la instancia que se está creando. Cuando escribesthis.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.
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();
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).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.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
La verdad que diego explica como los mismísimos dioses.
Sandra Rosa Arroyo Paredes
Estructura de una clase:
class Objeto { constructor(var1, var2) { this.key1 = var1; this.key2 = var2 } metodo(){ // detalle de la funcion } }
Calvin Rafael Bobadilla Fernandez
RESUMEN:
David Rangel
Hola equipo, para quienes les de curiosidad cómo se debe de realizar esto en Typescript, deben de saber que al declarar el objeto este cambia un poco, quedaría algo así:
class Persona { nombre: string; edad: number; constructor(nombre: string, edad: number) { this.nombre = nombre; this.edad = edad; } saludar() { console.log(`Hola, mi nombre es ${this.nombre} y mi edad es: ${this.edad}`); } } const PersonaUno = new Persona('Miri', 26); PersonaUno.saludar();
Alfonso Galeano Conde
Ah ok, se debe asignar por obligación el tipo de dato a cada variable, perfecto.
Muchas gracias!!!
Alejandro Sánchez Yalí
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.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
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:
Miguel Jonathan Madrigal González
Class es la versión sugar syntax de lo que ya conocemos nos permite generar objetos como la función constructora
Gabriel Adid Cabrera Olmedo
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.
Miguel Jonathan Madrigal González
Esto es un blue print:
Edinson Parra Bahos
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
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
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.
Manauri Brazoban
<// 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">
Daniel Vergel
Daniel Fernando Reyes Vasquez
¿Cuándo debo usar el método constructor?
Debes usar el método constructor en el momento exacto en que necesites que tus objetos nazcan con características únicas y personalizadas. Piensa en el constructor como el formulario de registro de un usuario nuevo. Si tu clase es Usuario, el constructor es el encargado de recibir el correo, la contraseña y el nombre en el instante de la creación. Si no defines un constructor, JavaScript asume uno vacío por defecto, lo que significa que todos los objetos creados a partir de esa clase nacerán idénticos y sin datos iniciales. Por lo tanto, utilízalo siempre que tu molde requiera recibir parámetros externos para configurar el estado inicial de la instancia mediante la palabra this. Es el primer bloque de código que se ejecuta al instanciar.
Santiago Alvarez Grisales
Se me pareció mucho java
Jorge Ivan Martinez Guerra
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
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
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
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
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);