Olá pessoal, tudo jóia? Esse é o primeiro post (de muitos, acredito) no CompAPL, espero através dele dar início a uma série de artigos sobre o fascinante universo da computação. Resolvi começar pela categoria JavaScript pois é uma linguagem com a qual simpatizo e vejo praticidade para teste e compreensão de alguns algoritmos. Então tome um bom café e vamos seguir em frente nessa jornada (frase de efeito).
Bom, antes de falar sobre JavaScript precisamos saber o que é uma linguagem de script.
Uma linguagem de script é um subconjunto das linguagens imperativas (linguagens que descrevem os passos de um algoritmo, ações que o computador realiza). ActionScript, PHP, Python, Lua, entre outras são linguagens desse tipo, todas necessitam de um programa intermediário que irá interpretar (traduzir para código executável) e o sistema operacional é quem se encarregará de executar este programa.
Agora sim, JavaScript foi criado como parte dos navegadores web pelo Sr. Brendan Eich (atualmente CTO na Mozzila) quando trabalhava na empresa Netscape, após ser convidado a desenvolver uma linguagem que se assemelhava ao Java, porém mais simples e com algumas semelhanças na sintaxe como uso de construtores e da palavra-chave new, por exemplo. Hoje é uma linguagem que segue o padrão ECMAScript e pela sua facilidade de aprendizado tornou-se bastante popular.
Objeto e Prototype
De certa forma, é um pouco impactante o primeiro contato com essa linguagem se você está familiarizado com o paradigma da programação orientada a objetos. Você se pergunta como devo criar minha classe? Onde declaro os atributos? Porque tudo parece tão desorganizado? Calma não criemos pânico, vamos por parte.
JavaScript é uma linguagem orientada a objetos baseada em protótipos, isso significa que não existem classes e sim objetos que irão servir como “protótipo/molde” para a criação de outros objetos. Por exemplo, suponhamos que temos o objeto Veículo que possui características como cor, chassi, placa e comportamentos como andar e frear. Podemos então utilizar este objeto para a criação do objeto Caminhão que herdaria as mesmas características, além de agregar suas próprias como peso bruto, tipo, volume, transportar. Caminhão é, portanto, uma cópia criada a partir do objeto protótipo veículo.
Por padrão existe uma cadeia de protótipos, isto é, todo objeto possui uma referência a um protótipo, que é sempre outro objeto e este também possui outro protótipo ou null ao chegar ao fim da cadeia. Logo herdar é o mesmo que expandir objetos já existentes. Quando o programa interpretador analisa o código, percorre essa cadeia de protótipos para saber qual dos objetos possui determinada propriedade ou método no momento de sua utilização, assim se um objeto não possui determinada propriedade o interpretador procura na região de memória do objeto “pai” até encontrar.
Certo, mas antes de ver alguns exemplos, tenhamos em mente mais alguns conceitos importantes para evitar futuras dores de cabeça:
- JavaScript pode utilizar funções para simular classes, que por convenção possuem nome com a primeira letra em maiúsculo.
- Funções também são objetos, do tipo
function. - Não é necessário definir um construtor na função, pois a própria função serve como construtora para o objeto no momento da criação.
- Todos os objetos em JavaScript descendem (na cadeia de protótipos) de um “objeto englobador/raiz” chamado Object (Figura 1).
- JavaScript possui tipagem dinâmica, isso significa que o tipo da variável será definido em tempo de execução. Você só precisa da palavra-chave
varpara iniciar a declaração das variáveis.
Figura 1
Agora vamos ao código:
// Definimos a classe Veiculo
function Veiculo(cor, modelo, placa) {
this.cor = cor;
this.modelo = modelo;
this.placa = placa;
};
Veiculo.prototype.exibirModelo = function(){
console.log("O modelo deste veículo é " + this.modelo);
};
var veiculo = new Veiculo("Azul", "CrossFox", "ABC-1234"); // Objeto do tipo Veiculo
veiculo.exibirModelo(); // O modelo deste veículo é CrossFox
Note neste exemplo o uso da palavra-chave this (logo falarei a respeito) e da propriedade prototype sempre presente em toda função, lembre-se funções também são objetos, aliás quase tudo em JavaScript é objeto, seguindo esse raciocínio podemos dizer por definição que a propriedade prototype “é o objeto que será designado como protótipo para todas as instâncias criadas quando invocamos o construtor”. Neste caso a classe Veiculo possui o método exibirModelo definido no seu protótipo. Em seguida é criado uma instância de Veiculo com o uso da palavra-chave new e por fim chamamos o método exibirModelo.
Utilizar funções como classes e prototype com os métodos é conhecido como “Pseudo-classical pattern”.
Uso do this
JavaScript utiliza um contexto de execução que define o escopo de variáveis e funções, a palavra-chave this é uma referência a esse contexto, se tivermos this dentro de um método o contexto será o objeto que possui o método, no nosso exemplo, portanto this faz referência ao objeto Veiculo.
Um detalhe importante a saber é que quando o navegador Web vai exibir uma nova página é criado um objeto global chamado window que representa a janela do navegador, se você simplesmente invocar uma função qualquer sem vínculo com algum objeto ou sem utilizar o operador new para indicar uma nova instância, this fará referência a window, veja abaixo:
function Exemplo() {
console.log( this );
}
Exemplo(); // window
new Exemplo(); // Exemplo
Ainda é possível criar objetos de outras maneiras, porém com apenas uma instância:
// Utilizando a notação literal
var album = {
nome: "Discovery",
lancamento: "13 de Março de 2001",
mídia: "CD",
faixas: 14,
reproduzir: function(faixa){
console.log("Reproduzindo faixa: " + faixa);
}
}
album.reproduzir(2); // Reproduzindo faixa: 2
// Criando uma instância de Object
var livro = new Object();
livro.paginas = 200;
livro.titulo = "Fortaleza Digital";
livro.autor = "Dan Brown";
Herança
Antes de finalizarmos este apanhado geral vamos entender como funciona o conceito de herança, voltando ao exemplo do veículo podemos dizer que caminhão é uma especialização de veículo pois possui certos aspectos em comum, assim como um carro ou uma moto teriam. Para herdar estes aspectos fazemos o seguinte:
// Definimos a classe Veiculo
function Veiculo(cor, modelo, placa) {
this.cor = cor;
this.modelo = modelo;
this.placa = placa;
};
Veiculo.prototype.exibirModelo = function(){
console.log("O modelo deste veículo é " + this.modelo);
};
// Definimos a classe Caminhao
function Caminhao(cor, modelo, placa) {
// Chamamos o construtor de veículo
Veiculo.apply(this, arguments);
// Métodos e Atributos de Caminhao
this.pesoBruto;
this.volume;
this.transportar = function(){
console.log("Transporte com peso bruto igual a " + this.pesoBruto);
};
}
// Herda o protótipo de Veiculo
Caminhao.prototype = new Veiculo();
// Diz ao construtor para apontar para Caminhao em vez de Veiculo
Caminhao.prototype.constructor = Caminhao;
// Caminhao agora possui os atributos e métodos de Veiculo
var caminhao = new Caminhao("Verde", "Accelo 815", "ACG-4321");
caminhao.exibirModelo(); // Accelo 815
caminhao.pesoBruto = "8.300 kg";
caminhao.transportar(); // "Transporte com peso bruto igual a 8.300 kg"
No código acima unimos os conceitos para simular herança, observe que agora fazemos uso do método apply (presente em toda função) que recebe como parâmetros o escopo em que a função deverá ser executada e a propriedade arguments que representa um array com os argumentos recebidos.
Nota: você poderia fazer o mesmo utilizando o método call em vez de apply e passando cada um dos parâmetros Veiculo.call(this, cor, modelo, placa).
Por fim alteramos o prototype para herdar de Veiculo e corrigimos o construtor de Caminhao.
Bom pessoal, até o momento abordei alguns conceitos que servem de base, voltaremos a este assunto nos próximos artigos, neste mesmo canal. Fica a dica de uma leitura complementar Javascript orientado a objetos, até a próxima!
compapl.tech.blog 