Clase — JS: Introducción a la POO

• Propiedades
• Trampas
• ¿Cómo usar las clases correctamente?

Prototipos, por un lado, son un mecanismo poderoso, pero por otro lado, son de bajo nivel. En otras palabras, al usar prototipos, tendrás que escribir bastante código repetitivo, especialmente para implementar cadenas. Por esta razón, los desarrolladores de JavaScript introdujeron el concepto de Clase en el lenguaje, como algo más familiar y comprensible para la mayoría de los desarrolladores. Con la aparición de las clases, programar en JavaScript se volvió realmente más fácil, pero las clases en JavaScript tienen diferencias muy importantes con las clases de muchos otros lenguajes. Comencemos con un ejemplo. A continuación se muestra el código de una abstracción común en JavaScript:

function Company(name, email) {
  this.name = name;
  this.email = email;
};

Company.prototype.getName = function getName() {
  return this.name;
}

Company.prototype.getEmail = function getEmail() {
  return this.email;
}

Company.prototype.setEmail = function setEmail(email) {
  this.email = email;
}

const company = new Company('Códica');
console.log(company.getName()); // => "Códica"

Este código se puede representar como una clase:

// Cada clase debe estar en su propio archivo
// Idealmente, el nombre de la clase coincide con el nombre del archivo, teniendo en cuenta 
// mayúsculas y minúsculas
class Company { // el nombre de la clase es el nombre de la función constructora
  // El método con el nombre constructor corresponde a la función constructora
  // Se llama cuando hacemos new Company(name, email)
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // Esta es la propiedad getName con una función normal (function) asignada a ella
  getName() {
    return this.name;
  }

  getEmail() {
    return this.email;
  }

  setEmail(email) {
    this.email = email;
  }
}

// En términos de uso, no cambia nada
const company = new Company('Códica', 'support@códica.io'); // se llama al método constructor
console.log(company.getName()); // => "Códica"

El método que corresponde a la función constructora dentro de la clase se llama constructor. El intérprete lo llama automáticamente al crear un nuevo objeto con new. Si el constructor está ausente, no pasará nada grave. Es equivalente a crear y llamar a una función constructora vacía:

function Company() {

}

const company = new Company();

Las clases aumentan el nivel de abstracción y brindan a los desarrolladores una herramienta con la que están familiarizados en otros lenguajes. Realmente permiten no preocuparse por los prototipos en los que se basan. Al menos, cuando se trata de escribir código de aplicación. Pero durante la depuración, no se puede prescindir del conocimiento de los prototipos. Además, a veces se utilizan directamente en bibliotecas porque permiten hacer cosas que no se pueden hacer con clases.

Propiedades

En los objetos, a menudo hay propiedades con valores predeterminados. Por ejemplo, una empresa puede tener empleados. Si no se ha agregado ningún empleado a la empresa, el método que devuelve la lista de empleados debe devolver una matriz vacía. Si no lo hace, complicará mucho el desarrollo, ya que tendrás que hacer comprobaciones de existencia en todas partes:

const company = new Company();
company.getEmployees(); // []

¿Cómo se puede lograr esto? Sin clases, se hace directamente dentro de la función constructora:

function Company() {
  this.employees = [];
}

Lo mismo se aplica a las clases:

class Company {
  constructor() {
    this.employees = [];
  }
  // otros métodos
}

Sin embargo, hay otra forma. Este enfoque se basa en la nueva sintaxis para definir propiedades dentro de una clase:

class Company {
  employees = [];
}

Esta definición inicializa la propiedad para cada objeto individualmente, al igual que en los ejemplos anteriores. Ahora se puede ver cada vez más este tipo de código.

Trampas

Las clases en JavaScript no son estáticas, como en muchos otros lenguajes, donde una vez que se define una clase, no se puede cambiar. Seguimos trabajando con prototipos y funciones que actúan como constructores. Podemos escribir este código después de que se haya definido la clase:

// En cualquier lugar del programa después de definir la clase
Company.prototype.greeting = function greeting() {
  return `Hello, ${this.name}!`;
}

const company = new Company('Códica');
console.log(company.greeting()); // => "Hello, Códica!"

¿Cómo usar las clases correctamente?

Es importante tener en cuenta que las clases en JavaScript no siempre son necesarias. JavaScript es un lenguaje de programación poderoso que no obliga a utilizar un solo paradigma de programación (a diferencia de Java, por ejemplo). Con él, puedes hacer cosas simples fácilmente y, cuando sea necesario, aplicar conceptos más complejos para cosas más complejas.

La POO en general y las clases en particular son conceptos complejos que no se pueden aprender de antemano a través de cursos, videos y artículos. La única forma de entenderlo es escribir código de producción, cometer errores y corregirlos (con la ayuda de consejos de desarrolladores más experimentados).

Existe el mito de que las clases se utilizan para modelar el mundo real. De hecho, eso es lo que hacen (incluso en el código anterior tenemos una empresa), pero esa es una comprensión muy limitada del propósito de las clases. En la vida real, se utilizan para diferentes propósitos. En el código de aplicaciones complejas, puede haber cientos o miles de clases, la mayoría de las cuales no tienen ninguna relación con el mundo real (adaptadores de bases de datos, diferentes estrategias de almacenamiento en caché). En los próximos cursos sobre POO, profundizaremos en cómo diseñar clases y en qué situaciones introducirlas.

Materiales adicionales

1. @babel/plugin-proposal-class-properties