Em JavaScript um objeto pode ser criado de várias maneiras, até mesmo a partir de um construtor, uma função que inicia as suas propriedades e atribui a elas os seus valores iniciais. Esse documento apresenta uma introdução a orientação a objetos em JavaScript, servindo de base para tanto para novos programadores quanto para aqueles experientes em outras linguagens, a exemplo do Java ou C#.
Visão geral
Um construtor é uma função que possui uma propriedade chamada prototype, usada para permitir a herança baseada em protótipo, bem como o compartilhamento de propriedades. Nesse ponto o JavaScript se distingue das demais linguagens que suportam a orientação a objetos, nas quais vemos com frequência esse paradigma ser fortemente atrelado ao conceito de classe.
Na prática
Vamos analisar as duas sintaxes de construção de classes em JavaScript a partir de uma mesma entidade chamada Pessoa, que recebe em seu construtor dois argumentos, nome e cpf e os define como atributos da classe. Esta classe possui também dois métodos, um retornando o nome da pessoa e o outro retorna o cpf.
Abaixo podemos ver a classe Pessoa escrita com a sintaxe de protótipo utilizando uma função:
function Pessoa (nome, cpf) {
this.nome = nome
this.cpf = cpf
}
Pessoa.prototype.getNome = function () {
return this.nome
}
Pessoa.prototype.getCpf = function () {
return this.cpf
}
const p1 = new Pessoa('Bruno')
console.log(p1.getNome()) // bruno
A seguir esta mesma classe reescrita utilizando a sintaxe classes introduzida no ECMAScript 6:
class Pessoa {
constructor (nome, cpf) {
this.nome = nome
this.cpf = cpf
}
getNome () {
return this.nome
}
getCpf () {
return this.cpf
}
}
const p1 = new Pessoa('Bruno')
console.log(p1.getNome()) // Bruno
Perceba que ambos os exemplos são exatamente iguais, tendo como diferença apenas a sintaxe, ou seja, deixando claro que o recurso class foi introduzido no JavaScript para tornar mais flexível o modelo de herança baseado em protótipos.
A declaração de uma classe em JavaScript é simples, fácil de compreender e permite a declarar atributos e métodos. Por exemplo, temos uma classe chamada Pessoa e, abaixo, podemos ver sua estrutura básica.
class Pessoa {
constructor (nome, cpf) {
this.nome = nome
this.cpf = cpf
}
getNome () {
return this.nome
}
getCpf () {
return this.cpf
}
}
Entre as linhas 2 e 5 definimos o método construtor da classe e em seu corpo definimos seus atributos, que são variáveis representando características da classe.
Nas linhas 8 a 13 é feita a declaração dos métodos desta classe, funcionam como uma função que executa uma instrução pertinente aquela entidade. Perceba que no exemplo retornamos as propriedades do produto na forma de um objeto.
Compatibilidade
Engine | Versão Minima |
---|---|
Node.JS ( V8) | 6.4.0 |
Safari ( WebKit) | 11.1 |
Chrome ( V8) | 68 |
Microsoft Edge ( ChakraCore) | 17 |
Firefox ( Gecko) | 61 |
Nota: O Opera utiliza atualmente grande parte do código do Chrome como base para o seu próprio desenvolvimento e por isso ele não é mencionado nesta listagem.