Sistema de ventanas

JavaScript incluye las capacidades para la programación orientada a objetos (POO). En la POO, quieres crear objetos (instancias) a partir de «plantillas» (clases) para que incluyan ciertos datos y cierta funcionalidad. Las propiedades de datos se llaman campos en el contexto de la POO, y las propiedades de función se llaman métodos.

JavaScript no tenía clases en absoluto antes de que se añadieran a la especificación del lenguaje en 2015, pero permitía la programación orientada a objetos mediante la herencia basada en prototipos. Y aunque hoy en día disponemos de la palabra clave class, JavaScript sigue siendo un lenguaje basado en prototipos.

Para entender qué significa ser un lenguaje basado en prototipos y cómo funciona realmente JavaScript, volveremos a la época en la que no existían las clases.

Sintaxis de prototipos

Función constructora

En JavaScript, la plantilla (clase) se crea con una función normal. Cuando una función se va a usar como plantilla de este tipo, se denomina función constructora y la convención es que el nombre de la función empiece con mayúscula. Las instancias (objetos) se derivan de la plantilla usando la palabra clave new al invocar la función constructora.

function Car() {
  // ...
}

const myCar = new Car();
const yourCar = new Car();

Es importante señalar que, en JavaScript, las instancias y la función constructora mantienen una relación entre sí incluso después de que se hayan creado las instancias. Cada objeto instancia incluye una propiedad interna oculta a la que la especificación del lenguaje se refiere como [[prototype]]. Contiene una referencia al valor de la clave prototype de la función constructora. Sí, has leído bien: una función de JavaScript puede tener pares clave/valor porque, en realidad, también es un objeto.

Campos de instancia

A menudo quieres que todos los objetos derivados (instancias) incluyan algunos campos y pasarles algunos valores iniciales cuando se construye el objeto. Esto se puede hacer con la palabra clave this. Dentro de la función constructora, this representa el nuevo objeto que se creará con new. this se devuelve automáticamente desde la función constructora cuando se llama con new.

Eso significa que podemos añadir campos a la nueva instancia añadiéndolos a this en la función constructora.

function Car(color, weight) {
  this.color = color;
  this.weight = weight;
  this.engineRunning = false;
}

const myCar = new Car('red', '2mt');
myCar.color;
// => 'red'
myCar.engineRunning;
// => false

Métodos de instancia

Los métodos se añaden a través de la propiedad prototype de la función constructora. Dentro de un método, puedes acceder a los campos de la instancia a través de this. Esto funciona gracias a la siguiente regla general.

Cuando se llama a una función como método de un objeto, su this se establece en el objeto sobre el que se llama al método. ¹

function Car() {
  this.engineRunning = false;
  // ...
}

Car.prototype.startEngine = function () {
  this.engineRunning = true;
};

Car.prototype.addGas = function (litre) {
  // ...
};

const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true

La cadena de prototipos

myCar en el ejemplo anterior es un objeto normal de JavaScript y, si lo inspeccionáramos (por ejemplo, en la consola del navegador), no encontraríamos una propiedad startEngine con una función como valor directamente dentro del objeto myCar. Entonces, ¿cómo funciona el código anterior?

El secreto aquí se llama cadena de prototipos. Cuando intentas acceder a cualquier propiedad (campo o método) de un objeto, JavaScript comprueba primero si la clave correspondiente se encuentra directamente en el propio objeto. Si no es así, continúa buscando la clave en el objeto al que hace referencia la propiedad [[prototype]] del objeto original. Como se ha mencionado antes, en nuestro ejemplo [[prototype]] apunta a la propiedad prototype de la función constructora. Ahí es donde JavaScript encontraría la función startEngine, porque la añadimos allí.

function Car() {
  // ...
}

Car.prototype.startEngine = function () {
  // ...
};

Y la cadena no termina ahí. La propiedad [[prototype]] de Car.prototype (myCar.[[prototype]].[[prototype]]) hace referencia a Object.prototype (la propiedad prototype de la función constructora Object). Contiene métodos generales que están disponibles para todos los objetos de JavaScript, por ejemplo toString(). En conclusión, puedes llamar a myCar.toString() y ese método existirá porque JavaScript busca ese método en toda la cadena de prototipos.

Sintaxis de clases

Hoy en día, JavaScript admite definir clases con la palabra clave class. Esto se añadió a la especificación del lenguaje en 2015. Por un lado, esto proporciona azúcar sintáctico que hace que las clases sean más fáciles de leer y escribir. La nueva sintaxis se parece más a cómo se escriben las clases en lenguajes como C++ o Java. Los desarrolladores que vienen de esos lenguajes se adaptan con más facilidad. Por otro lado, la sintaxis de clases allana el camino para nuevas funcionalidades del lenguaje que no están disponibles en la sintaxis de prototipos.

Declaraciones de clase

Con la nueva sintaxis, las clases se definen con la palabra clave class, seguida del nombre de la clase y del cuerpo de la clase entre llaves. El cuerpo contiene la definición de la función constructora, es decir, un método especial con el nombre constructor. Esta función funciona igual que la función constructora de la sintaxis de prototipos. El cuerpo de la clase también contiene todas las definiciones de métodos. La sintaxis de los métodos es similar a la notación abreviada que vimos para añadir funciones como valores dentro de un objeto; consulta el concepto Objetos.

class Car {
  constructor(color, weight) {
    this.color = color;
    this.weight = weight;
    this.engineRunning = false;
  }

  startEngine() {
    this.engineRunning = true;
  }

  addGas(litre) {
    // ...
  }
}

const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true

Ten en cuenta que, en realidad, JavaScript sigue siendo un lenguaje basado en prototipos. Todos los mecanismos que aprendimos en la sección «Sintaxis de prototipos» anterior siguen aplicándose.

Campos privados, getters y setters

De forma predeterminada, todos los campos de instancia son públicos en JavaScript. Se puede acceder a ellos y asignarles valores directamente.

Sin embargo, existe una convención establecida de que los campos y métodos que empiezan por guion bajo deben tratarse como privados. Nunca deben ser accesibles directamente desde fuera de la clase.

Los campos privados a veces van acompañados de getters y setters. Con las palabras clave get y set puedes definir funciones que se ejecutan cuando se accede a una propiedad con el mismo nombre que la función o se le asigna un valor.

class Car {
  constructor() {
    this._mileage = 0;
  }

  get mileage() {
    return this._mileage;
  }

  set mileage(value) {
    throw new Error(`Mileage cannot be manipulated, ${value} is ignored.`);
    // Just an example, usually you would not provide a setter in this case.
  }
}

const myCar = new Car();
myCar.mileage;
// => 0
myCar.mileage = 100;
// => Error: Mileage cannot be manipulated, 100 is ignored.

---

1. Ejemplos de this: como método de objeto, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#as_an_object_method (consultado el 3 de diciembre de 2021) ↩