Javascript this | Explicado

Javascript this | Explicado

Um dos conceitos mais desafiadores e frequentemente usados ​​em JavaScript é o “essePalavra -chave. JavaScript usa o “essePalavra -chave de maneira diferente de outros idiomas. No entanto, é essencial para criar código JavaScript mais avançado. Como iniciante, pode ser de alguma forma difícil para você entender o uso da palavra -chave mencionada, mas não se preocupe!

Este post explicará o “essePalavra -chave e seu uso em JavaScript.

O que é "isso" em JavaScript?

““esse”É a palavra -chave em JavaScript que se refere a um objeto que executa o bloco de código existente. Representa um objeto que está invocando a função atual. É usado em vários cenários de maneiras diferentes, como:

    • No método
    • No manuseio de eventos
    • Em funções

Vamos verificar cada um dos usos mencionados um por um!

Como usar "isso" nos métodos JavaScript?

““esse”É usado nos métodos JavaScript como uma ligação implícita. Quando a função é chamada com a ajuda de um objeto e um ponto, é considerada uma ligação implícita e “esse”Aponta o objeto durante a chamada de função.

Exemplo

Primeiro, criaremos um objeto com algumas propriedades e um método e depois usaremos o “essePalavra -chave para obter os valores das propriedades do objeto:

var personinfo =
Nome: "John",
Idade: 20,
info: function ()
console.log ("hy! Eu sou " + isso.nome + "e eu sou" + este.idade + "anos");


Em seguida, ligue para o “info ()”Método junto com o nome do objeto:

Personinfo.info ();


Pode -se observar que os valores de propriedade especificados do objeto atual são exibidos com sucesso:


Se você quiser usar “esse”Ao manuseio de eventos, siga a seção abaixo.

Como usar "isto" no Javascript Event Manipulhing?

Neste exemplo, confira o uso do “esse”Palavra -chave no manuseio de eventos. Para isso, considere um exemplo no qual ocultaremos nosso botão com um único clique. Para fazer isso, crie um botão e anexe um “OnClick ()”Evento com ele para acessar o estilo.Exibir propriedade com o “esse”Palavra -chave que ocultará o botão quando clicar:

Clique para ocultar o botão



Saída


Se você está confuso sobre o uso do “esse”Palavra-chave nas funções definidas pelo usuário em JavaScript, siga a seção fornecida.

Como usar "isso" nas funções JavaScript?

Enquanto estiver usando "esse”Nas funções, existem três tipos de ligações no JavaScript, incluindo:

    • Encadernação padrão
    • Ligação implícita
    • Ligação explícita

Vamos entendê -los individualmente!

Exemplo 1: Uso dessa palavra -chave na ligação padrão

Na ligação padrão, o “esse”A palavra -chave atua como um objeto global. É usado principalmente em funções independentes.

Vamos entender o conceito declarado com um exemplo.

Primeiro, criaremos uma variável “x”E atribua o valor“15”:

var x = 15;


Em seguida, defina uma função chamada “functionDB ()”E sua definição de função, crie uma variável com o mesmo nome“x”E atribua um valor“5”Então, imprima seu valor usando o“console.registro()”Método com“essePalavra -chave:

var functionDB = function ()
var x = 5;
console.log (isso.x);


Por fim, chame o “functionDB ()”Função:

functionDB ();


Devido ao uso do “essePalavra -chave, a saída exibe o valor de “x" como "15”Porque atua como um objeto global e o processo é chamado de“Ligação dinâmica”:


Exemplo 2: Uso dessa palavra -chave na ligação implícita

Quando a função é chamada por um objeto ou um símbolo de ponto, “esse”A palavra -chave atua como uma ligação implícita. Ele aponta o objeto durante a chamada de função.

Neste exemplo, definiremos uma função “info ()”E use o“essePalavra -chave na definição da função:

função info ()
console.log ("hy! Eu sou " + isso.nome + "e eu sou" + este.idade + "anos")


Em seguida, crie um objeto chamado “Personinfo”Com propriedades definidas:

var personinfo =
Nome: "John",
Idade: 20,
Informações: Info


Agora, chame a função ao longo do objeto:

Personinfo.info ();


Saída


Exemplo 3: Uso dessa palavra -chave na ligação explícita

A ligação explícita também é chamada de “ligação dura”Porque a função é chamado com força para utilizar um objeto específico para“esse“Vinculante, sem colocar uma referência de função de propriedade no objeto. Para esse fim, os métodos Call (), Apply () e Bind () podem ser usados.

Agora vamos utilizar a mesma função chamada “info ()”Definido no exemplo anterior. Em seguida, crie um objeto chamado “Personinfo”Com os seguintes valores:

var personinfo =
Nome: "John",
Idade: 20


Por invocar a função chamada “info ()", Vamos usar o"chamar()”Método e passe o objeto criado como um argumento:

informações.Ligue para (PersonInfo);


Como o info () não faz parte do objeto, ainda o acessamos explicitamente:


Para chamar uma função explicitamente, você também pode usar os métodos apply () e bind (). O método Aplicar () é idêntico ao método Call (), enquanto o método bind () cria uma nova função com o mesmo corpo e escopo que se comporta da mesma maneira que a função original. O método bind () pode ser utilizado para retornar uma função que você pode usar posteriormente.

Para chamar informações () com o método Aplicar (), use a seguinte declaração:

informações.aplicar (PersonInfo);


Ele fornece a mesma saída que o método Call () fornece:


Para chamar "info ()" com o "vincular()”Método, utilize a declaração dada:

informações.bind (PersonInfo);


Saída


Nós compilamos todas as informações essenciais relacionadas ao “essePalavra -chave.

Conclusão

““esse”É a palavra -chave em JavaScript que se refere a um objeto que executa o bloco de código existente. Representa o objeto que está invocando a função atual. É usado em vários cenários de diferentes maneiras, incluindo métodos, manuseio de eventos e funções. Neste post, explicamos o “essePalavra -chave em JavaScript.