Sintaxis de clases (vista previa): constructor, métodos, static y extends
Explore de forma sencilla la sintaxis de clases: constructor, métodos de instancia, utilidades static y herencia básica con extends.
Sintaxis de clases (vista previa): constructor, métodos, static y extends es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 2. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 2 lecciones en total.
Introducción a la sintaxis de clases
Objetivo: Comprender cómo la sintaxis de clases se relaciona con los prototipos.
- constructor para la configuración inicial
- methods en el prototipo
- Ayudantes static en la clase
- extends para una herencia sencilla
Constructor y método
El constructor se ejecuta con new. Los métodos del cuerpo de la clase se comparten entre todas las instancias (prototipo).
// Class with a constructor and an instance method
class Counter {
constructor(start = 0) {
// Initialize fields
this.value = start;
}
// Instance method (lives on the prototype)
inc() {
this.value = this.value + 1;
console.log("Now:", this.value);
}
}
const c = new Counter(1);
c.inc();
c.inc();
Uso compartido del prototipo
Los métodos de instancia de la sintaxis de clases son métodos del prototipo, por lo que se reutiliza la misma función.
// Prototype sharing demo
class Greeter {
say(name) {
console.log("Hello,", name);
}
}
const g1 = new Greeter();
const g2 = new Greeter();
// Same function reference for both instances
console.log("Same method?", g1.say === g2.say);
Conceptos básicos de los métodos static
Los métodos static se invocan en la propia clase, no en las instancias.
// Static method: lives on the class, not instances
class MathBox {
static double(n) {
return n * 2;
}
}
console.log("Static call:", MathBox.double(4));
const m = new MathBox();
// @ts-ignore (conceptually): next line would be undefined in JS
console.log("Instance has static?", typeof m.double);
Herencia sencilla
extends configura la cadena de prototipos; utilice super para llamar al método de la clase padre.
// Inheritance with extends and super
class Animal {
speak() {
console.log("...");
}
}
class Dog extends Animal {
speak() {
// Optionally call parent method
super.speak();
console.log("Woof");
}
}
const d = new Dog();
d.speak();
Consejos para las clases
Consejos:
- Mantenga las clases pequeñas: un par de campos y métodos.
- Prefiera los métodos de instancia en el cuerpo de la clase (compartidos mediante el prototipo).
- Utilice static para ayudantes puros que no estén vinculados a una instancia.
Cuestionario sobre la ubicación de los métodos de clase
Comprobación rápida: Ubicación de un método compartido.
Repaso
Repaso: Creó una clase con un constructor, escribió métodos de instancia compartidos, añadió un ayudante static y extendió una clase base con super.
Preguntas frecuentes
¿La lección «Sintaxis de clases (vista previa): constructor, métodos, static y extends» es gratis?
Sí — el texto completo de «Sintaxis de clases (vista previa): constructor, métodos, static y extends» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 2 lecciones en total.
¿Qué aprenderé en «Sintaxis de clases (vista previa): constructor, métodos, static y extends»?
Explore de forma sencilla la sintaxis de clases: constructor, métodos de instancia, utilidades static y herencia básica con extends. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 2.
¿Cuánto tiempo toma la lección «Sintaxis de clases (vista previa): constructor, métodos, static y extends»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Conozca los fundamentos de la cadena de prototipos; compruebe las propiedades propias y heredadas; use Object.create y establezca descriptores sencillos.
- Sintaxis de clases (vista previa): constructor, métodos, static y extends