Clases en JavaScript

Este artículo explica las clases en JavaScript.

YouTube Video

Clases en JavaScript

En JavaScript, una clase incorpora el concepto de programación orientada a objetos y sirve como un modelo para los objetos. Con las clases, puedes definir de forma concisa las propiedades y los métodos de un objeto, mejorando la reutilización y la organización del código. La sintaxis de clases fue introducida en JavaScript con ES6.

Definición de Clases

Una clase se define con la palabra clave class y generalmente se inicializa con un método llamado constructor.

 1class Person {
 2    // Constructor method (called when the class is instantiated)
 3    constructor(name, age) {
 4        this.name = name; // Property definition
 5        this.age = age;
 6    }
 7
 8    // Method definition
 9    greet() {
10        return `Hello, my name is ${this.name}`;
11    }
12}
13
14// Instantiation of the class
15const alice = new Person("Alice", 25);
16console.log(alice.greet()); // Hello, my name is Alice

• Definimos una clase con class Person.
• El constructor es un método especial que se llama automáticamente cuando se crea un objeto.
• La palabra clave this se refiere a la instancia (objeto) de la clase dentro de la clase.

Propiedades y Métodos de Clase

Una clase puede definir propiedades y métodos. Las propiedades representan los atributos de un objeto, y los métodos representan las funciones que tiene.

 1class Car {
 2    constructor(brand, model) {
 3        this.brand = brand;
 4        this.model = model;
 5    }
 6
 7    // Method definition
 8    drive() {
 9        console.log(`Driving a ${this.brand} ${this.model}`);
10    }
11}
12
13const car1 = new Car("Toyota", "Corolla");
14car1.drive(); // Driving a Toyota Corolla

En este ejemplo, se declara una clase Car con las propiedades brand y model y un método drive.

Herencia de Clases

Las clases pueden heredar de otras clases. Mediante la herencia, puedes crear una nueva clase basada en una clase existente y agregarle funcionalidad adicional.

 1class Animal {
 2    constructor(name) {
 3        this.name = name;
 4    }
 5
 6    speak() {
 7        console.log(`${this.name} makes a noise`);
 8    }
 9}
10
11// Inherit from the Animal class
12class Dog extends Animal {
13    constructor(name, breed) {
14        super(name); // Call the constructor of the parent class (Animal)
15        this.breed = breed;
16    }
17
18    // Override the method
19    speak() {
20        console.log(`${this.name} barks`);
21    }
22}
23
24const dog = new Dog("Rex", "German Shepherd");
25dog.speak(); // Rex barks

En este ejemplo, la clase Dog hereda de la clase Animal.

• La palabra clave extends se utiliza para heredar de la clase Animal.
• En el constructor de la clase Dog, se utiliza super() para llamar al constructor de la clase padre. Esto te permite heredar el proceso de inicialización de la clase padre.
• Dentro de la clase heredada, puedes sobrescribir los métodos de la clase padre. En este ejemplo, en lugar de "Rex hace un ruido", se muestra "Rex ladra".

Métodos Estáticos

Cuando defines un método estático dentro de una clase, el método está asociado con la clase en sí misma. Los métodos estáticos pueden ser llamados sin ser instanciados.

1class MathUtils {
2    // Static method
3    static add(a, b) {
4        return a + b;
5    }
6}
7
8console.log(MathUtils.add(5, 10)); // 15

En este ejemplo, la clase MathUtils tiene definido un método estático add.

• La palabra clave static se utiliza para definir un método estático.
• Los métodos estáticos no pertenecen a las instancias de la clase y se pueden llamar directamente desde la clase misma.

Getters y Setters

Al definir getters y setters en una clase, puedes encapsular la obtención y configuración de propiedades.

 1class Rectangle {
 2    constructor(width, height) {
 3        this.width = width;
 4        this.height = height;
 5    }
 6
 7    // Getter
 8    get area() {
 9        return this.width * this.height;
10    }
11
12    // Setter
13    set widthValue(newWidth) {
14        this.width = newWidth;
15    }
16}
17
18const rect = new Rectangle(10, 20);
19console.log(rect.area); // 200
20
21rect.widthValue = 15;
22console.log(rect.area); // 300

En este ejemplo, la clase Rectangle define un getter area y un setter widthValue.

• Getter (get) se llama al obtener el valor de una propiedad.
• Setter (set) se llama al establecer el valor de una propiedad.

Açúcar de sintaxis de clases

En JavaScript, la sintaxis de clases se implementa internamente usando funciones constructoras y prototipos. La sintaxis de clases es azúcar sintáctico para escribir esto de manera más concisa.

 1// Example without using class syntax
 2function Person(name, age) {
 3    this.name = name;
 4    this.age = age;
 5}
 6
 7Person.prototype.greet = function() {
 8    return `Hello, my name is ${this.name}`;
 9};
10
11const person = new Person("Alice", 25);
12console.log(person.greet()); // Hello, my name is Alice

En este ejemplo, se define una función constructora Person y el método greet se define usando un prototipo.

Manejo de this

La palabra clave this dentro de una clase se refiere a la instancia de esa clase. Sin embargo, al trabajar con this en métodos de clase, debes tener en cuenta que su comportamiento puede variar dependiendo del alcance. Pueden surgir problemas especialmente al usar métodos como funciones de callback.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13setTimeout(counter.increment, 1000); // NaN
14// NaN, since this.count is undefined, it becomes NaN after incrementing.

En tales casos, cuando se pasa como callback a setTimeout, la referencia a la que apunta this puede cambiar. Para evitar este problema, se recomienda fijar this usando el método bind o utilizar funciones flecha.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13
14// When using bind
15setTimeout(counter.increment.bind(counter), 1000);
16
17// When using an arrow function
18setTimeout(() => counter.increment(), 2000);

Resumen

• Las clases se usan como modelos para crear objetos, definiendo propiedades y métodos.
• Puedes usar la herencia para extender una clase, utilizando conceptos orientados a objetos.
• Los métodos estáticos pertenecen a la clase misma y pueden usarse sin crear una instancia.
• Puedes encapsular propiedades usando getters y setters.
• La sintaxis de clases de JavaScript es azúcar sintáctico y utiliza internamente la herencia basada en prototipos.

Al usar clases, puedes manejar la programación orientada a objetos de manera más natural y mejorar la reutilización y mantenibilidad del código.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video