Sistema de janelas

O JavaScript inclui as capacidades para a programação orientada a objetos (POO). Na POO, queres criar objetos (instâncias) a partir de "modelos" (classes) para que incluam determinados dados e funcionalidades. As propriedades de dados chamam-se campos no contexto da POO, e as propriedades de funções chamam-se métodos.

O JavaScript não tinha classes de todo antes de estas serem adicionadas à especificação da linguagem em 2015, mas permitia programação orientada a objetos recorrendo à herança baseada em protótipos. E, apesar de hoje já existir a palavra-chave class, o JavaScript continua a ser uma linguagem baseada em protótipos.

Para compreender o que significa ser uma linguagem baseada em protótipos e como o JavaScript funciona na realidade, vamos recuar à altura em que não existiam classes.

Sintaxe de protótipos

Função construtora

Em JavaScript, o modelo (a classe) é disponibilizado por uma função normal. Quando uma função se destina a ser usada como esse modelo, chama-se função construtora e a convenção é que o nome da função comece com letra maiúscula. As instâncias (objetos) derivam do modelo com a palavra-chave new ao invocar a função construtora.

function Car() {
  // ...
}

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

É importante notar que, em JavaScript, as instâncias e a função construtora mantêm uma relação entre si mesmo depois de as instâncias serem criadas. Cada objeto instância inclui uma propriedade oculta e interna designada por [[prototype]] na especificação da linguagem. Esta guarda uma referência ao valor da chave prototype da função construtora. Sim, leste bem: uma função de JavaScript pode ter pares chave/valor porque, nos bastidores, também é um objeto.

Campos de instância

Muitas vezes queres que todos os objetos derivados (instâncias) incluam alguns campos e que lhes passes alguns valores iniciais quando o objeto é construído. Isto pode ser facilitado através da palavra-chave this. Dentro da função construtora, this representa o novo objeto que será criado através de new. this é devolvido automaticamente pela função construtora quando esta é chamada com new.

Isto significa que podemos adicionar campos à nova instância adicionando-os a this na função construtora.

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 instância

Os métodos são adicionados através da propriedade prototype da função construtora. Dentro de um método, podes aceder aos campos da instância através de this. Isto funciona por causa da seguinte regra geral.

Quando uma função é chamada como método de um objeto, o seu this é definido como o objeto sobre o qual o método é chamado. ¹

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

A cadeia de protótipos

O myCar do exemplo acima é um objeto de JavaScript normal e, se o inspecionássemos (por exemplo, na consola do navegador), não encontraríamos uma propriedade startEngine com uma função como valor diretamente dentro do objeto myCar. Então, como é que o código acima funciona?

O segredo aqui chama-se cadeia de protótipos. Quando tentas aceder a qualquer propriedade (campo ou método) de um objeto, o JavaScript verifica primeiro se a chave correspondente se encontra diretamente no próprio objeto. Se não, continua a procurar a chave no objeto referenciado pela propriedade [[prototype]] do objeto original. Como já foi mencionado, no nosso exemplo [[prototype]] aponta para a propriedade prototype da função construtora. É aí que o JavaScript encontraria a função startEngine, porque foi lá que a adicionámos.

function Car() {
  // ...
}

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

E a cadeia não termina aí. A propriedade [[prototype]] de Car.prototype (myCar.[[prototype]].[[prototype]]) referencia Object.prototype (a propriedade prototype da função construtora Object). Contém métodos gerais disponíveis para todos os objetos de JavaScript, por exemplo toString(). Em conclusão, podes chamar myCar.toString() e esse método existirá porque o JavaScript procura esse método ao longo de toda a cadeia de protótipos.

Sintaxe de classes

Hoje em dia, o JavaScript suporta a definição de classes com a palavra-chave class. Isto foi adicionado à especificação da linguagem em 2015. Por um lado, isto proporciona açúcar sintático que torna as classes mais fáceis de ler e escrever. A nova sintaxe é mais semelhante à forma como as classes são escritas em linguagens como C++ ou Java. Os programadores que vêm dessas linguagens têm mais facilidade em adaptar-se. Por outro lado, a sintaxe de classes abre caminho a novas funcionalidades da linguagem que não estão disponíveis na sintaxe de protótipos.

Declarações de classes

Com a nova sintaxe, as classes definem-se com a palavra-chave class, seguidas do nome da classe e do corpo da classe entre chavetas. O corpo contém a definição da função construtora, ou seja, um método especial com o nome constructor. Esta função funciona exatamente como a função construtora na sintaxe de protótipos. O corpo da classe também contém todas as definições de métodos. A sintaxe dos métodos é semelhante à notação abreviada que vimos para adicionar funções como valores dentro de um objeto, vê o conceito 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

Tem em mente que, nos bastidores, o JavaScript continua a ser uma linguagem baseada em protótipos. Todos os mecanismos que aprendemos na secção "Sintaxe de protótipos" acima continuam a aplicar-se.

Campos privados, getters e setters

Por predefinição, todos os campos de instância são públicos em JavaScript. É possível aceder-lhes diretamente e atribuir-lhes valores.

Contudo, existe uma convenção estabelecida de que os campos e métodos que começam com um underscore devem ser tratados como privados. Nunca se deve aceder a eles diretamente a partir de fora da classe.

Os campos privados são por vezes acompanhados de getters e setters. Com as palavras-chave get e set, podes definir funções que são executadas quando se acede a uma propriedade com o mesmo nome da função ou quando lhe é atribuído um 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. Exemplos de this - Como método de um objeto, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#as_an_object_method (consultado a 3 de dezembro de 2021) ↩