25%Off

Compre com desconto

Começou!

Começou!

00

DIAS

00

HORAS

00

MIN

00

SEG

This, Getters e Setters nas classes Javascript

This, Getters e Setters nas classes Javascript
Rafaella Ballerini
Rafaella Ballerini

Compartilhe

Classes

A orientação a objetos com Javascript não é uma novidade, porém, enquanto várias outras linguagens utilizavam a sintaxe de classes, o Javascript continuava sem uso. Isso sempre foi um detalhe importante que incomodava alguns desenvolvedores, pois assim ficava um pouco mais difícil de migrar entre tecnologias com facilidade.

Sendo assim, a partir do ECMAScript 2015 (ES6), as classes começaram a fazer parte da linguagem. Isso não mudou ou adicionou funcionalidades, mas trouxe uma melhor organização para o código, além de entrar no padrão de outras tecnologias.

Veja a diferença:

//não utilizando a sintaxe de classes
var pessoa = {
    nome: 'Gabriela',
    sobrenome: 'Ribeiro',
}

//utilizando a sintaxe de classes
class Pessoa {
    constructor(nome, sobrenome){
        this.nome = nome
        this.sobrenome = sobrenome
    }
}

let gabriela = new Pessoa ('Gabriela', 'Ribeiro')

Imagine que você precisa isolar ou proteger de alguma forma os elementos dessas classes. O que utilizar para isso?

Banner da promoção da black friday, com os dizeres: A Black Friday Alura está chegando. Faça parte da Lista VIP, receba o maior desconto do ano em primeira mão e garanta bônus exclusivos. Quero ser VIP

This

Imagine que você declare uma classe professor, da seguinte forma:

class Professor {
    constructor(nome, sobrenome, curso){
        this.nome = nome,
        this.sobrenome = sobrenome,
        this.curso = curso
    }
}

let joao = new Professor('João', 'Souza', 'Lógica de programação')

E dentro dessa classe você queria adicionar um método - que nada mais é do que uma função específica para ela - chamado saudação, que irá imprimir no console um “Bom dia” para esse professor.

Para isso, iremos precisar juntar as propriedades nome e sobrenome na hora de imprimir a saudação. É nesse momento que entra o this. Essa palavra vem do inglês “esse”, portanto é possível entender que seu uso é feito para direcionar essas propriedades à própria classe em questão. Da seguinte forma:

class Professor {
    constructor(nome, sobrenome, curso){
        this.nome = nome,
        this.sobrenome = sobrenome,
        this.curso = curso
    }
    saudacao(){
        console.log('Bom dia ' + this.nome + ' ' + this.sobrenome)
    }
}

let joao = new Professor('João', 'Souza', 'Lógica de programação')
joao.saudacao() //Bom dia João Souza

Mas então por que não podemos usar o próprio nome da classe para isso? É simples, imagine que existe uma variável global com o mesmo nome professor. Se utilizarmos professor.nome dentro da classe, poderá ficar um código ambíguo, o que causará problemas.

Getter

O getter, com a sintaxe get é associado a uma função que será chamada quando a propriedade em questão for acessada e solicitada de forma dinâmica. É possível utilizá-la para retornar o status de uma variável interna, sem utilizar métodos de forma explícita. Da seguinte forma:

class Curso {
    constructor(materia, professor, duracao){
        this.materia = materia,
        this.professor = professor,
        this.duracao = duracao
    }
    get prof() {
        return this.professor
    }
}

let poo = new Curso('Programação orientada a objetos', 'Rafaella', '1 semestre')
console.log(poo.prof) //Rafaella

Nesse exemplo apenas utilizamos o getter para retornar um valor que já havia sido declarado de forma fixa. E se quisermos agora retornar um valor dinâmico, como uma média de outras propriedades? Podemos fazer da seguinte forma:

class Boletim {
    constructor(participacao, prova, trabalho){
        this.participacao = participacao,
        this.prova = prova,
        this.trabalho = trabalho
    }
    get media() {
        return parseInt((this.participacao + this.prova + this.trabalho) / 3)
    }
}

let boletimSemestral = new Boletim(8, 6, 7.5)
console.log(boletimSemestral.media) //7

Alguns pontos importantes a serem destacados para o uso de getters são:

  • Pode ter um identificador do tipo numérico ou string.
  • Não deve ter nenhum parâmetro.
  • Não pode ser utilizado mais de um getter para uma mesma propriedade, assim como não pode haver uma propriedade comum com o mesmo nome do getter.

Porém, como podemos definir o valor de uma propriedade utilizando um parâmetro? Assim temos o nosso último modificador, o setter.

Setter

Geralmente usados junto com os getters, os setters são utilizados para definirem valores para uma propriedade específica.

class Aluno {
    constructor(nome, curso, semestre){
        this.nome = nome,
        this.curso = curso,
        this.semestre = semestre
    }
    set nomeAluno(nomeAluno) {
        this.nome = nomeAluno
    }
}

let lucas = new Aluno('', 'Engenharia', 5)
lucas.nomeAluno = 'Lucas'
console.log(lucas.nome) //Lucas

Portanto, nesse caso podemos chamar o setter passando um parâmetro para alterar o valor da propriedade nome do aluno.

Alguns pontos importantes a serem destacados para o uso de setters são:

  • Pode ter um identificador do tipo numérico ou string.
  • Deve ter exatamente um parâmetro.
  • Não pode ter a mesma nomenclatura para propriedade e função.

Agora podemos tanto acessar as propriedades de um objeto (com getters), quanto alterar os valores dela (com setters).

class Aluno {
    constructor(nome, curso, semestre){
        this.nome = nome,
        this.curso = curso,
        this.semestre = semestre
    }
    get nomeAluno(){
        return this.nome
    }
    set nomeAluno(nomeAluno) {
        this.nome = nomeAluno
    }
}

let lucas = new Aluno('', 'Engenharia', 5)
lucas.nomeAluno = 'Lucas'
console.log(lucas.nome) //Lucas

Quer aprender mais sobre Javascript? Acesse:

Rafaella Ballerini
Rafaella Ballerini

Desenvolvedora de software, instrutora e criadora de conteúdo. Possui um canal com mais de 240 mil pessoas inscritas, onde ensina sobre os mais diversos temas relacionados a programação e tecnologia, como HTML, CSS, Javascript, Git, Github... É instrutora front-end na plataforma da Alura e também na Imersão Dev, projeto que leva o ensino inicial de programação para todo o Brasil gratuitamente.

Veja outros artigos sobre Front-end