Um dos conceitos mais desafiadores e frequentemente usados em JavaScript é o “ isto ” palavra-chave. JavaScript usa o “ isto ” de forma diferente de outros idiomas. No entanto, é essencial para a criação de código JavaScript mais avançado. Como iniciante, pode ser um pouco difícil para você entender o uso da palavra-chave mencionada, mas não se preocupe!
Este post explicará o “ isto ” e seu uso em JavaScript.
O que é “isto” em JavaScript?
“ isto ” é a palavra-chave em JavaScript que se refere a um objeto que executa o bloco de código existente. Ele representa um objeto que está invocando a função atual. Ele é usado em vários cenários de diferentes maneiras, como:
-
- No método
- No tratamento de eventos
- Em funções
Vamos conferir cada um dos usos mencionados um por um!
Como usar “this” em métodos JavaScript?
“ isto ” é usado em métodos JavaScript como uma ligação implícita. Quando a função é chamada com a ajuda de um objeto e um ponto, ela é considerada uma ligação implícita e “ isto ” aponta o objeto durante a chamada da função.
Exemplo
Primeiro, vamos criar um objeto com algumas propriedades e um método e depois usar o “ isto ” para obter os valores das propriedades do objeto:
var pessoaInfo = {
nome: 'John' ,
era : vinte ,
informações: função ( ) {
console.log ( 'Oi! Eu sou' + this.name + ' e eu sou ' + esta.idade + ' anos' ) ;
}
}
Em seguida, chame o “ info() ” junto com o nome do objeto:
Pode-se ver que os valores de propriedade especificados do objeto atual são exibidos com sucesso:
Se você quiser usar “ isto ” no tratamento de eventos, siga a seção abaixo.
Como usar “this” no tratamento de eventos JavaScript?
Neste exemplo, confira o uso do “ isto ” palavra-chave na manipulação de eventos. Para isso, considere um exemplo em que ocultaremos nosso botão com um único clique. Para isso, crie um botão e anexe um “ onclick() ” com ele para acessar a propriedade style.display com o “ isto ” que ocultará o botão quando clicado:
< h3 > Clique para ocultar o botão h3 >< botão ao clicar = 'this.style.display='nenhum'' > Clique aqui ! botão >
Resultado
Se você está confuso sobre o uso do “ isto ” em funções definidas pelo usuário em JavaScript, siga a seção fornecida.
Como usar “this” em funções JavaScript?
Enquanto estiver usando ' isto ” em funções, existem três tipos de ligações em JavaScript, incluindo:
-
- Vinculação padrão
- Vinculação implícita
- Vinculação explícita
Vamos entendê-los individualmente!
Exemplo 1: uso desta palavra-chave na vinculação padrão
Na ligação padrão, o “ isto ” a palavra-chave atua como um objeto global. É usado principalmente em funções independentes.
Vamos entender o conceito declarado com um exemplo.
Primeiro, vamos criar uma variável “ x ” e atribua o valor “ quinze ”:
var x = quinze ;
Em seguida, defina uma função chamada “ funçãoDB() ” e sua definição de função, crie uma variável com o mesmo nome “ x ” e atribua um valor “ 5 ”, em seguida, imprima seu valor usando o “ console.log() ” método com “ isto ” palavra-chave:
var x = 5 ;
console.log ( this.x ) ;
}
Por último, chame o “ funçãoDB() ” função:
Devido ao uso do “ isto ” palavra-chave, a saída exibe o valor de “ x ' Como ' quinze ” porque atua como um objeto global e o processo é chamado de “ Vinculação dinâmica ”:
Exemplo 2: uso desta palavra-chave na vinculação implícita
Quando a função é chamada por um objeto ou um símbolo de ponto, “ isto ” a palavra-chave atua como uma ligação implícita. Ele aponta o objeto durante a chamada da função.
Neste exemplo, vamos definir uma função “ info() ” e use o “ isto ” palavra-chave na definição da função:
função informação ( ) {console.log ( 'Oi! Eu sou' + this.name + ' e eu sou ' + esta.idade + ' anos' )
}
Em seguida, crie um objeto chamado “ pessoaInfo ” com propriedades definidas:
nome: 'John' ,
era : vinte ,
informações: informações
}
Agora, chame a função ao longo do objeto:
Resultado
Exemplo 3: uso desta palavra-chave na vinculação explícita
A ligação explícita também é chamada de “ encadernação dura ” porque a função é chamada com força para utilizar um objeto específico para “ isto ” vinculação, sem colocar uma referência de função de propriedade no objeto. Para isso, podem ser usados os métodos call(), apply() e bind().
Vamos agora utilizar a mesma função chamada “ info() ” definido no exemplo anterior. Em seguida, crie um objeto chamado “ pessoaInfo ” com os seguintes valores:
var pessoaInfo = {nome: 'John' ,
era : vinte
}
Para invocar a função chamada “ info() ”, usaremos o “ ligar() ” e passe o objeto criado como argumento:
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 apply() é 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 forma que a função original. O método bind() pode ser utilizado para retornar uma função que você pode usar mais tarde.
Para chamar info() com o método apply(), use a seguinte instrução:
info.aplicar ( pessoaInfo ) ;
Ele fornece a mesma saída que o método call() fornece:
Para chamar ' info() ' com o ' ligar() ” método, utilize a instrução dada:
Resultado
Reunimos todas as informações essenciais relacionadas ao “ isto ” palavra-chave.
Conclusão
“ isto ” é a palavra-chave em JavaScript que se refere a um objeto que executa o bloco de código existente. Ele representa o objeto que está invocando a função atual. Ele é usado em vários cenários de maneiras diferentes, incluindo métodos, manipulação de eventos e funções. Neste post, explicamos o “ isto ” palavra-chave em JavaScript.