Clases y objetos en JavaScript: introducción a la POO (ES6)

En el capítulo anterior vimos cómo trabajar con los eventos en JavaScript. En este capítulo nos vamos a centrar en las clases y los objetos.

Conviene entender las clases y los objetos en JavaScript porque permiten crear estructuras de datos más complejas y organizar mejor el código. Antes de meterte con las clases y los objetos, es recomendable conocer las bases de la programación orientada a objetos.

¿Qué es una clase en JavaScript?

Una clase es un molde que sirve para crear objetos. Define las propiedades y los métodos que tendrán esos objetos. Con las clases puedes crear varios objetos que comparten las mismas propiedades y los mismos métodos, algo muy práctico en un montón de casos.

Declarar una clase

Para crear una clase en JavaScript puedes usar esta sintaxis:

class MaClasse {
  // Constructor de la clase
  constructor() {
    // Inicialización de las propiedades y los métodos de la clase
  }

// Métodos de la clase
  maMethode() {
    // Código del método
  }
}

Constructor y métodos de una clase

La definición de una clase en JavaScript incluye su constructor, un método especial que sirve para crear e inicializar un objeto a partir de esa clase.

El constructor de una clase se define con la palabra clave «constructor». Por ejemplo:

// Constructor de la clase
constructor() {
// Inicialización de las propiedades y los métodos de la clase
}

Los métodos de una clase se definen igual que las funciones, salvo que no se usa la palabra clave «function».

// Métodos de la clase
maMethode() {
 // Código del método
}

A los métodos de un objeto se accede igual que a las propiedades, con esta sintaxis: miObjeto.miMetodo();

const monObjet = new MaClasse();
monObjet.maMethode();

Herencia con las clases

La herencia es un concepto clave de la programación orientada a objetos (POO). Consiste en crear una clase nueva a partir de una clase existente, heredando sus propiedades y sus métodos. Eso permite reutilizar código y organizar mejor la aplicación.

En JavaScript se puede usar la herencia con las clases gracias a la sintaxis «extends». Este es un ejemplo de una clase «Enfant» que hereda de una clase «Parent»:

class Parent {
  constructor(nom) {
    this.nom = nom;
  }

saluer() {
    console.log(Bonjour, je suis ${this.nom});
  }
}

class Enfant extends Parent {
  constructor(nom, age) {
    super(nom);
    this.age = age;
  }
}

const enfant1 = new Enfant('Marie', 7);
enfant1.saluer(); // Hola, soy Marie

Uso del método super

El método super sirve para llamar a un método de la clase padre desde una clase hija. Por ejemplo, si tienes una clase Animal con un método «move()» que define cómo se desplazan los animales, y tienes una clase Chat que hereda de la clase Animal, puedes usar el método super para llamar al método «move()» de la clase Animal desde la clase Chat. Este es un ejemplo de código:

class Animal {
  move() {
    console.log('Je me déplace');
  }
}

class Chat extends Animal {
  move() {
    console.log('Je me déplace en sautant');
    super.move();
  }
}

const monChat = new Chat();
monChat.move();
// muestra "Je me déplace en sautant" y luego "Je me déplace"

Métodos estáticos

Los métodos estáticos son métodos que pertenecen a la clase en sí, no a sus instancias. Se pueden llamar sin instanciar la clase. Por ejemplo, puedes definir un método estático «getAnimalType()» en la clase Animal que devuelva el tipo de animal. Este es un ejemplo de código:

class Animal {
  static getAnimalType() {
    return 'Animal';
  }
}

console.log(Animal.getAnimalType()); // muestra "Animal"

Los métodos estáticos no se pueden llamar sobre instancias de la clase. Por ejemplo, si intentas llamar al método «getAnimalType()» sobre una instancia de la clase Animal, obtendrás un error.

¿Cómo manipular las propiedades de nuestro objeto?

También puedes pasar parámetros al constructor de la clase para inicializar las propiedades del objeto:

class MaClasse {
  constructor(param1, param2) {
    this.param1 = param1;
    this.param2 = param2;
  }
}
const monObjet = new MaClasse("Valeur de param1", "Valeur de param2");

Para acceder a una propiedad de un objeto puedes usar esta sintaxis:

monObjet.maPropriete;

Para modificar una propiedad de un objeto puedes usar esta sintaxis:

monObjet.maPropriete = "Nouvelle valeur";

Para eliminar una propiedad de un objeto puedes usar el operador «delete», así:

delete monObjet.maPropriete;

No puedes eliminar una propiedad de un objeto si está definida en el prototipo del objeto. Para saber cómo gestionar las propiedades heredadas, consulta la sección siguiente sobre la herencia con los objetos.

Añadir getters y setters a nuestra clase

Los getters y los setters son métodos que permiten leer y modificar las propiedades de un objeto de forma controlada. Se usan a menudo cuando quieres añadir una lógica concreta al leer o al modificar una propiedad.

Este es un ejemplo de uso de getters y setters en una clase:

class MonObjet {
  constructor(propriete) {
    this._propriete = propriete;
  }

// Getter
  get propriete() {
    return this._propriete;
  }

// Setter
  set propriete(value) {
    this._propriete = value;
  }
}

const objet = new MonObjet('valeur initiale');
console.log(objet.propriete); // muestra 'valeur initiale'

objet.propriete = 'nouvelle valeur';
console.log(objet.propriete); // muestra 'nouvelle valeur'

Los getters y los setters son métodos, no propiedades. Por eso tienes que usar la sintaxis objet.propriete() para acceder a su valor, y no objet.propriete (sin paréntesis).

En el ejemplo anterior hemos usado un getter para leer el valor de la propiedad _propriete y un setter para modificarla. También hemos definido una propiedad _propriete con la palabra clave this en el constructor de la clase. Esa propiedad es privada y solo se puede modificar a través de los getters y setters.

class MonObjet {
  constructor(valeur) {
    this._maPropriete = valeur;
  }

get maPropriete() {
    return this._maPropriete;
  }

set maPropriete(valeur) {
    if (typeof valeur === 'string') {
      this._maPropriete = valeur;
    } else {
      console.log('La valeur doit être une chaîne de caractères');
    }
  }
}

const monObj = new MonObjet('ma valeur');
console.log(monObj.maPropriete); // Muestra 'ma valeur'
monObj.maPropriete = 42; // Muestra 'La valeur

Conclusión

Hemos visto cómo usar las clases y los objetos en JavaScript para estructurar y organizar el código de forma más eficaz, y después cómo crear y manipular objetos a partir de clases usando el constructor y los métodos. También hemos abordado la herencia con las clases con el método super y los métodos estáticos. Por último, hemos hablado de los getters y setters, que permiten controlar el acceso a las propiedades de un objeto y su modificación.

En el capítulo siguiente veremos cómo gestionar los errores y depurar el código con try-catch y las herramientas de depuración del navegador. Eso nos permitirá entender mejor lo que pasa en nuestro código y corregirlo si hace falta.