Artigos > Front-end

This, Getters e Setters nas classes Javascript

Rafaella Ballerini
Rafaella Ballerini

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;
}
}

var gabriela = new Pessoa (“Gabriela”, “Ribeiro”);

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

This

Imagine que você declare uma classeprofessor, da seguinte forma:

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

var 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);
}
}

var 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;
    }
};

var 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);
    }
};

var 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:

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;
}
}

var 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:

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;
}
}

var lucas = new Aluno(“”, “Engenharia”, 5)
lucas.nomeAluno = “Lucas”;
console.log(lucas.nome); //Lucas

Quer aprender mais sobre Javascript? Acesse:

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software

Artigos > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas