5.1 Declaración de clase
Con la introducción de ECMAScript 6 (ES6) en JavaScript, apareció una nueva estructura para crear objetos y gestionar la herencia —
la palabra clave class. Las clases proporcionan una sintaxis más conveniente y comprensible para crear
objetos y trabajar con prototipos.
Clases en JavaScript — son un azúcar sintáctico sobre el sistema de herencia prototípico existente. Hacen que la creación y gestión de objetos sea más comprensible y estructurada.
Declaración de clase
Una clase en JavaScript se declara usando la palabra clave class, seguida del nombre de la clase.
El cuerpo de la clase se encierra entre llaves {}.
Ejemplo:
class Person {
// Método de la clase
greet() {
console.log('Hello!');
}
}
// Creación de una instancia de clase
const person = new Person();
person.greet(); // Mostrará: Hello!
Expresión de clase
Las clases pueden ser declaradas tanto a través de una declaración como de una expresión. Las expresiones de clase pueden ser nominadas o anónimas.
Ejemplo de clase nominada:
const Person = class PersonClass {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // Mostrará: Hello!
Ejemplo de clase anónima:
const Person = class {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // Mostrará: Hello!
5.2 Campos y métodos de clases
Atributos de clases
Los atributos de clases en ES6 solo pueden ser declarados dentro del constructor. Sin embargo, en versiones más recientes de JavaScript (ES2022) se introdujeron campos de clase, permitiendo declarar atributos fuera del constructor.
Ejemplo de uso de atributos en el constructor:
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
Ejemplo de uso de campos de clase (ES2022):
class User {
username = 'default_username';
email = 'default@example.com';
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
Explicación:
- En el primer ejemplo, los atributos
usernameyemailse declaran e inicializan dentro del constructor - En el segundo ejemplo, los atributos
usernameyemailse declaran fuera del constructor como campos de clase
Métodos de clase
Una clase puede contener métodos, que se definen dentro del cuerpo de la clase. Estos métodos se añaden automáticamente al prototipo de los objetos creados.
Ejemplo de métodos de clase:
class Animal {
speak() {
console.log('Animal speaks');
}
eat() {
console.log('Animal eats');
}
}
const animal = new Animal();
animal.speak(); // Mostrará: Animal speaks
animal.eat(); // Mostrará: Animal eats
3.3 Ejemplos de uso de clases
Creación de objetos complejos
Las clases permiten crear objetos complejos con diferentes métodos y atributos.
Ejemplo:
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
startEngine() {
console.log(`${this.brand} ${this.model} engine started.`);
}
stopEngine() {
console.log(`${this.brand} ${this.model} engine stopped.`);
}
}
const myCar = new Car('Toyota', 'Camry');
myCar.startEngine(); // Mostrará: Toyota Camry engine started.
myCar.stopEngine(); // Mostrará: Toyota Camry engine stopped.
GO TO FULL VERSION