Javascript - Classes à Moda Antiga

[DanTheLion]

---

O que é "Classe à moda antiga"?

Em Javascript, nas versões anteriores ao ECMAScript 6 (ES6 ou ECMAScript 2015 - tal versão onde foram introduzidas as Classes para encapsular variáveis, métodos e funções), as classes eram - e hoje ainda são possíveis de serem - simuladas através de funções, pois a palavra-chave Function é um objeto do Javascript específico para executar comandos. Por isso, é possível criar instâncias do objeto Function para adicionar propriedades à elas e utilizá-las e referi-las no código.

Se você ainda não sabe o que é um objeto no Javascript, dá uma olhada no tópico que explica sobre os objetos.

---

Como é feita uma "Classe à moda antiga"?

Veja o código a seguir:

function Pessoa(nome, idade) {
    this.nome = nome;
    this.idade = idade;
}

let pessoa1 = new Pessoa("Fulano", 30);

console.log("Olá, " + pessoa1.nome);

Vamos por ordem. Primeiro, é declarada uma função chamada Pessoa com parâmetros de nome e idade, e no seu escopo são definidas as variáveis nome e idade passando como valores os argumentos passados por parâmetro.
Logo a seguir, é criada uma instância do objeto Pessoa e são passados valores a eles que são o nome e a idade respectivamente.
Por fim, eu faço aparecer no Console um texto: "Olá, <nome>". No caso deste exemplo, "Olá, Fulano".

Parece simples, não é? Vejamos agora como seria incluir métodos em uma classe simulada. Utilizando o exemplo anterior, temos o seguinte código:

function Pessoa(nome, idade) {
    this.nome = nome;
    this.idade = idade;
}

Pessoa.prototype.saudar = function() {
    console.log("Olá! Meu nome é " + this.nome);
}

let pessoa1 = new Pessoa("Fulano", 30);

pessoa1.saudar();

No código acima, foi adicionado um método saudar que é uma função que apresenta no Console um texto de saudação.
A criação desse método se dá pela referência do objeto Pessoa seguido de uma propriedade do objeto Function chamada prototype e, logo depois, depois o nome da propriedade a ser adicionada no objeto criado com a definição de sua função.
Prototype é uma propriedade do objeto Function que é usado quando a função é usado como um construtor na criação de sua instância utilizando a palavra-chave new. Então todas as propriedades definidas através da propriedade prototype serão adicionados ao objeto Pessoa no construtor dele.
No caso do exemplo acima, o método saudar será criado quando o objeto Pessoa for instanciado utilizando new Pessoa(...).

---

Herança de Classes à moda antiga

Uma classe herdar de uma outra significa atribuir as propriedades que a outra classe tem para si e utilizá-las ou personalizá-las no código.

Veja só o exemplo abaixo de uma classe simulada Estudante que herda da classe simulada Pessoa:

function Pessoa(nome, idade) {
    this.nome = nome;
    this.idade = idade;
}

Pessoa.prototype.saudar = function() {
    console.log("Olá! Meu nome é " + this.nome);
}

function Estudante(nome, idade, ano) {
    Pessoa.call(this, nome, idade);
    this.ano = ano;
}

Estudante.prototype = Object.create(Pessoa.prototype);
Estudante.prototype.constructor = Estudante;

Estudante.prototype.estudar = function() {
    console.log(this.nome + ", o aluno do " + this.ano + "º ano, está estudando...");
}

let estudante = new Estudante("Fulano", 30, 9);

estudante.estudar();

Aqui ainda temos o objeto Pessoa (declarada como função, mas é um objeto ao mesmo tempo) que tem as propriedades de uma pessoa como nome, idade e o método saudar. Depois, é declarada uma nova função chamada Estudante onde são passados três parâmetros: nome, idade e ano. Em seu escopo, é realizado um comando utilizado para executar a função Pessoa passando como argumento os valores nome e idade, e depois é definida a variável ano. Isso está acontecendo pois como queremos herdar as propriedades do objeto Pessoa, precisaríamos também definir as variáveis que nelas estão e para não repetir esse procedimento utilizando this.nome_da_variavel = valor; utilizamos o comando Pessoa.call(this, nome, idade); para executar os comandos da função Pessoa passando como argumento as variáveis nome e idade e o resultado será aplicado no objeto que é relacionado através da palavra-chave this.

Seguindo adiante, há uma definição da propriedade prototype de Estudante, nele é criado um objeto passando as informações do prototype do objeto Pessoa - isto é, criando uma cópia de um objeto existente. Isso acontece para que possamos herdar também os métodos da função Pessoa como o método saudar.

Na próxima linha, é definido uma propriedade constructor em prototype que é a função Estudante. A propriedade prototype.constructor do objeto Function possui a referência da função construtora quando a instância do objeto é criada. Então quando estamos dizendo que o constructor é a função Estudante, dizemos que ao instanciar o objeto do Estudante, utilize esta função como constructor. E como anteriormente foi definido no prototype a cópia do objeto do prototype do objeto Pessoa, a informação do constructor tem a referência do objeto Pessoa, por isso a mudança do constructor para a função Estudante é feita.

Logo após, é definido um método estudar para apresentar um texto na tela.
Por fim, o objeto Estudante foi instanciado numa variável e é chamado o método estudar desta variável.

---

Mais informações:

Classes - JavaScript | MDN

Classes em JavaScript são introduzidas no ECMAScript 2015 e são simplificações da linguagem para as heranças baseadas nos protótipos. A sintaxe para classes não introduz um novo modelo de herança de orientação a objetos em JavaScript. Classes em JavaScript provêm uma maneira mais simples e clara...

developer.mozilla.org

Function - JavaScript | MDN

O construtor Function cria um novo objeto Function. Chamar o construtor diretamente pode criar funções dinamicamente, mas sofre com problemas de segurança e desempenho semelhante (mas muito menos significativo) a eval (en-US). No entanto, diferentemente de eval, a Função construtora cria funções...

developer.mozilla.org

Function: prototype - JavaScript | MDN

The prototype data property of a Function instance is used when the function is used as a constructor with the new operator. It will become the new object's prototype.

developer.mozilla.org

 

[Dr.XGB]

Por mais que não se usa mais essa abordagem no JS hoje em dia, o RPG Maker MV e MZ ainda usam. Portanto achei importante você abordar esse modelo à moda antiga para o pessoal entender os plugins pois todas as classes lá seguem esse padrão.