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 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 agregaran 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 existe la palabra clave class, JavaScript sigue siendo un lenguaje basado en prototipos.

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

Sintaxis de prototipos

Función constructora

En JavaScript, la plantilla (la clase) se implementa con una función normal. Cuando una función se va a usar como una plantilla de este tipo, se llama 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 notar que en JavaScript, las instancias y la función constructora mantienen una relación entre sí incluso después de que se crearon las instancias. Cada objeto de instancia incluye una propiedad interna y 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í, leíste bien: una función de JavaScript puede tener pares clave/valor porque, tras bambalinas, también es un objeto.

Campos de instancia

A menudo quieres que todos los objetos derivados (instancias) incluyan algunos campos y pasar algunos valores iniciales para ellos cuando se construye el objeto. Esto se puede lograr 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 agregar campos a la nueva instancia agregá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 agregan 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 por 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 la cadena de prototipos. Cuando intentas acceder a cualquier propiedad (campo o método) de un objeto, JavaScript primero verifica si la clave correspondiente se puede encontrar directamente en el objeto mismo. Si no, continúa buscando la clave en el objeto al que hace referencia la propiedad [[prototype]] del objeto original. Como se mencionó 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 agregamos ahí.

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 a lo largo de toda la cadena de prototipos.

Sintaxis de clases

Hoy en día, JavaScript permite definir clases con la palabra clave class. Esto se agregó a la especificación del lenguaje en 2015. Por un lado, esto proporciona azúcar sintáctica 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. Quienes 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 clases

Con la nueva sintaxis, las clases se definen con la palabra clave class, seguida del nombre de la clase y el 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 agregar 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, tras bambalinas, 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 manera 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 con un guion bajo deben tratarse como privados. Nunca se debe acceder a ellos 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 un 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) ↩