Esta palavra-chave em JavaScript

thispalavra-chave é um dos conceitos mais mal compreendidos e complexos do JavaScript. Passei anos trabalhando em JavaScript e, às vezes, esses cenários chegam onde se torna difícil entender a que se thisrefere.

Neste artigo, tentarei explicar tantos cenários que encontrei que usam o this. E pode ser um dos cenários pode ajudá-lo a compreender o conceito de thismais claramente.

Então, primeiro vamos ver a que thisse refere? 🤔

A natureza disso é fluida. O valor das thisalterações com base contextno qual o methodid está called. thisrefere-se ao contexto no qual está sendo chamado.

Vamos entender isso por um exemplo:

No código acima, estamos usando thisem dois lugares diferentes e o valor de thisé diferente em ambos os lugares, o que é decidido pelo contexto no qual está sendo chamado.

Agora vamos ver como isso se comporta dentro de vários blocos de código.

1. this dentro do contexto global

3. thisdentro da função construtora

4. thisdentro de uma função dentro de um objeto

5. thisdentro de uma função interna

6. thisdentro de uma função e strict modeestá ativado.

Além dos cenários acima, temos um conceito adicional para entender. E essas são as funções de seta. thisdentro de uma função de seta funciona de forma diferente.

Dentro de uma função de seta, nãothis tem escopo por si só . Ele sempre aponta para o alcance do pai.

1. thisdentro de uma função de seta - neste exemplo, o escopo pai do samplemétodo éwindow

3. thisdentro de uma função interna como uma função de seta. Caso 1. Quando a função de seta está dentro de uma função de seta.

Além desses, também podemos controlar o contextde thismanualmente usando métodos embutidos de JS call binde apply. Para este artigo, será demais explicá-los. Mas, para fins de demonstração, estou mostrando como podemos mudar contextisso usando call:

Para mais explicações:
https://youtu.be/-NnxwkJ4yIg

Perguntas práticas:
https://dmitripavlutin.com/javascript-this-interview-questions/