Sistema de janelas

O JavaScript inclui os recursos para programação orientada a objetos (POO). Na POO, você quer criar objetos (instâncias) a partir de "modelos" (classes) para que eles incluam certos dados e funcionalidades. As propriedades de dados são chamadas de campos no contexto da POO, e as propriedades de função são chamadas de métodos.

O JavaScript não tinha classes antes de elas serem adicionadas à especificação da linguagem em 2015, mas permitia programação orientada a objetos usando herança baseada em protótipos. E mesmo que a palavra-chave class esteja disponível hoje em dia, o JavaScript ainda é uma linguagem baseada em protótipos.

Para entender o que significa ser uma linguagem baseada em protótipos e como o JavaScript realmente funciona, vamos voltar ao tempo em que não existiam classes.

Sintaxe de protótipos

Função construtora

No JavaScript, o modelo (classe) é implementado com uma função comum. Quando uma função deve ser usada como esse modelo, ela é chamada de função construtora, e a convenção é que o nome da função comece com uma letra maiúscula. As instâncias (objetos) são derivadas do modelo usando a palavra-chave new ao invocar a função construtora.

function Car() {
  // ...
}

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

É importante notar que, no JavaScript, as instâncias e a função construtora mantêm uma relação entre si mesmo depois que as instâncias foram criadas. Todo objeto de instância inclui uma propriedade oculta e interna chamada de [[prototype]] na especificação da linguagem. Ela guarda uma referência ao valor da chave prototype da função construtora. Sim, você leu certo: uma função do JavaScript pode ter pares de chave/valor porque, por trás dos panos, ela também é um objeto.

Campos de instância

Muitas vezes, você quer que todos os objetos derivados (instâncias) incluam alguns campos e que alguns valores iniciais sejam passados para eles quando o objeto é construído. Isso pode ser feito com a palavra-chave this. Dentro da função construtora, this representa o novo objeto que será criado via new. this é retornado automaticamente pela função construtora quando ela é chamada com new.

Isso 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 por meio da propriedade prototype da função construtora. Dentro de um método, você pode acessar os campos da instância via this. Isso funciona por causa da seguinte regra geral.

Quando uma função é chamada como método de um objeto, seu this recebe o objeto no qual o método foi 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

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

O segredo aqui é a cadeia de protótipos. Quando você tenta acessar qualquer propriedade (campo ou método) de um objeto, o JavaScript primeiro verifica se a chave correspondente pode ser encontrada diretamente no próprio objeto. Se não, ele continua procurando a chave no objeto referenciado pela propriedade [[prototype]] do objeto original. Como mencionado antes, em nosso exemplo [[prototype]] aponta para a propriedade prototype da função construtora. É aí que o JavaScript encontraria a função startEngine, porque nós a adicionamos lá.

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). Ela contém métodos gerais que estão disponíveis para todos os objetos do JavaScript, como toString(). Concluindo, você pode chamar myCar.toString() e esse método existirá porque o JavaScript procura por ele em toda a cadeia de protótipos.

Sintaxe de classes

Hoje em dia, o JavaScript permite definir classes com a palavra-chave class. Isso foi adicionado à especificação da linguagem em 2015. Por um lado, isso oferece açúcar sintático que torna as classes mais fáceis de ler e escrever. A nova sintaxe é mais parecida com a forma como as classes são escritas em linguagens como C++ ou Java. Desenvolvedores que vêm dessas linguagens têm mais facilidade para se adaptar. Por outro lado, a sintaxe de classes abre caminho para novos recursos da linguagem que não estão disponíveis na sintaxe de protótipos.

Declarações de classe

Com a nova sintaxe, as classes são definidas com a palavra-chave class, seguidas pelo nome da classe e pelo corpo da classe entre chaves. O corpo contém a definição da função construtora, ou seja, um método especial com o nome constructor. Essa 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 para os métodos é parecida com a notação abreviada que vimos para adicionar funções como valores dentro de um objeto, veja 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

Tenha em mente que, por trás dos panos, o JavaScript ainda é uma linguagem baseada em protótipos. Todos os mecanismos que aprendemos na seção "Sintaxe de protótipos" acima continuam valendo.

Campos privados, getters e setters

Por padrão, todos os campos de instância são públicos no JavaScript. Eles podem ser acessados e atribuídos diretamente.

No entanto, existe uma convenção estabelecida de que campos e métodos que começam com um sublinhado devem ser tratados como privados. Eles nunca devem ser acessados diretamente de fora da classe.

Campos privados às vezes são acompanhados de getters e setters. Com as palavras-chave get e set, você pode definir funções que são executadas quando uma propriedade com o mesmo nome da função é acessada ou atribuída.

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 objeto, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#as_an_object_method (consultado em 3 de dezembro de 2021) ↩