JavaScript: Um pouco sobre o This

Eae gente bonita, beleza?

Dessa vez venho falar um pouco sobre a palavra-chave this no JavaScript. Ela é comum em diversas linguagens, porém ela pode ser um pouco confusa no JS e aqui vou te explicar o porquê.

Como funciona o this?

Antes d…


This content originally appeared on DEV Community and was authored by Cristian Magalhães

Eae gente bonita, beleza?

Dessa vez venho falar um pouco sobre a palavra-chave this no JavaScript. Ela é comum em diversas linguagens, porém ela pode ser um pouco confusa no JS e aqui vou te explicar o porquê.

Como funciona o this?

Antes de tudo é importante nós entendermos como o this funciona normalmente.

O this é uma palavra-chave para se referir aos membros de uma classe (métodos e propriedades). E é usado em outras linguagens de programação como o Java, por exemplo.

Exemplo de uso do this em java


class Pessoa {
  String nome;
  int idade;
  public Pessoa(String nome, int idade) {
    this.nome = nome;
    this.idade = idade;
  }

  int getIdade() {
    return this.idade;
  }


  String getNome() {
    return this.nome;
  }

  public void falarNome() {
    System.out.println("Meu nome é: "+ this.getNome());
  }

  public void falarNomeEIdade() {
    System.out.println("Meu nome é: "+ this.getNome()+ " e tenho "+ this.idade+ " anos...");
  }
}

class Main {
  public static void main(String[] args) {
    Pessoa p1 = new Pessoa("Cristian", 24);
    p1.falarNome();
    p1.falarNomeEIdade();
  }
}

Nesse exemplo o this é usado para referenciar as propriedades nome e idade e também os métodos falarNome e falarNomeEIdade, ou seja, tudo que está no escopo da classe (guarde isso, ok?).

O problema no JS

No JavaScript temos dois tipos de funções, certo? As declaradas com a palavra-chave function e as arrows function () => {}. É importante você saber aqui que as arrow functions não tem um escopo próprio, então quando você usa o this você acaba pegando as propriedades e métodos do escopo anterior. Então é importante você sempre se atentar nos momentos que você vai usar o this.

Também existe o tema contexto por trás do this no JS, em breve venho aqui e explico para vocês.

Se chegou até aqui, me segue la nas redes vizinhas.


This content originally appeared on DEV Community and was authored by Cristian Magalhães


Print Share Comment Cite Upload Translate Updates
APA

Cristian Magalhães | Sciencx (2023-03-24T17:24:20+00:00) JavaScript: Um pouco sobre o This. Retrieved from https://www.scien.cx/2023/03/24/javascript-um-pouco-sobre-o-this/

MLA
" » JavaScript: Um pouco sobre o This." Cristian Magalhães | Sciencx - Friday March 24, 2023, https://www.scien.cx/2023/03/24/javascript-um-pouco-sobre-o-this/
HARVARD
Cristian Magalhães | Sciencx Friday March 24, 2023 » JavaScript: Um pouco sobre o This., viewed ,<https://www.scien.cx/2023/03/24/javascript-um-pouco-sobre-o-this/>
VANCOUVER
Cristian Magalhães | Sciencx - » JavaScript: Um pouco sobre o This. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/24/javascript-um-pouco-sobre-o-this/
CHICAGO
" » JavaScript: Um pouco sobre o This." Cristian Magalhães | Sciencx - Accessed . https://www.scien.cx/2023/03/24/javascript-um-pouco-sobre-o-this/
IEEE
" » JavaScript: Um pouco sobre o This." Cristian Magalhães | Sciencx [Online]. Available: https://www.scien.cx/2023/03/24/javascript-um-pouco-sobre-o-this/. [Accessed: ]
rf:citation
» JavaScript: Um pouco sobre o This | Cristian Magalhães | Sciencx | https://www.scien.cx/2023/03/24/javascript-um-pouco-sobre-o-this/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.