♫ in the jungle, the mighty jungle, the lion sleeps tonight ♫
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:
Javascript:
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:
Javascript:
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
:
Javascript:
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. No entanto, diferentemente de eval, a Função construtora cria funções que...
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
Última edição: