Introdução

Você está pronto para entrar no divertido mundo do JavaScript e aprender sobre o poder secreto da palavra-chave “this”? Prepare-se para uma incrível viagem pelo interessante reino de "isto", onde você descobrirá as causas de suas ações e perceberá todo o poder de seu código. Com exemplos envolventes e explicações claras, este guia o levará a um passeio emocionante pelas várias ligações de “isto”. Você estará preparado para lidar com qualquer dificuldade de codificação que surgir no seu caminho quando esta jornada terminar e terá a autoconfiança para construir sistemas robustos e escaláveis. Portanto, sem mais delongas, aperte suas botas de código e vamos viajar pelos territórios desconhecidos da palavra-chave “this”!

A palavra-chave “this” em JavaScript refere-se ao objeto do qual a função atual é um método. É uma variável com escopo definido dinamicamente, o que significa que seu escopo muda dependendo do contexto da chamada da função durante o tempo de execução. “this” é um conceito chave e frequentemente mal compreendido em JavaScript, pois o significado pode variar substancialmente com base no contexto em que é usado.

Vinculações de “this”

A palavra-chave “this” tem quatro vinculações principais em JavaScript: vinculação padrão, vinculação implícita, vinculação explícita e nova vinculação. Compreender essas ligações é essencial para utilizar a palavra-chave “this” em JavaScript de forma eficaz, pois cada uma especifica como “this” deve ser usado em um contexto específico.

1. Vinculação padrão

Quando o termo “this” é usado fora de uma função ou no escopo global em JavaScript, ele é vinculado por padrão. Nesse caso, “this” refere-se ao objeto global, que é “janela” em um navegador ou “global” em Node.js.

Aqui está um exemplo da ligação padrão em ação:

Conforme visto na primeira instrução console.log, a palavra-chave “this” no exemplo acima refere-se ao objeto global quando usado fora de qualquer função. A segunda frase do console.log demonstra que, quando usado dentro da função logThis, também se refere ao objeto global.

É importante lembrar que no modo estrito, o objeto global é indefinido e não o valor de “this” no escopo global. Você pode habilitar o modo estrito adicionando “use strict” no início do seu código ou dentro de uma função conforme mostrado abaixo.

2. Ligação implícita

A palavra-chave “this” nesta ligação refere-se ao objeto do qual a função é uma propriedade. “this” especifica o objeto quando uma função é usada como um método de um objeto. O objeto do qual a função é uma propriedade determina o valor de “this”.

Tome por exemplo,

A função “ greet ” é um atributo do objeto “ person ” no exemplo acima. Podemos acessar a propriedade name do objeto “ person ” chamando person.greet(), que define o valor deste dentro do método greet para o objeto person. A vinculação implícita pode ser vista nessa situação. A ligação implícita é ilustrada por isso.

Vejamos outro exemplo:

Neste exemplo, o objeto “ instrutor ” tem a função “ sayName ” definida como uma propriedade, e quando instrutor.say() é chamado, o objeto “ instrutor ” é definido como o valor de “ this ” na função “ sayName ” . Este é outro exemplo de ligação implícita.

3. Vinculação Explícita

Não importa como ou onde uma função é chamada no código, você pode definir explicitamente o valor de “ this ” para uma chamada usando um método de ligação explícito.

Existem três métodos de vinculação explícita em JavaScript: “ call ”, “ apply ” e “ bind ”.

Você pode chamar uma função usando o método “ call ” e também pode definir o valor de “ this ” para essa chamada de função. O valor que você deseja definir para “ this ” é o primeiro argumento para o método de chamada e os outros argumentos são enviados para a função individualmente.

Considere por exemplo:

O método “ call ” é usado no exemplo acima para invocar a função “ sayName ” e o valor de “ this ” é definido como o objeto instrutor.

Semelhante a “ call ” é o método “ apply” , exceto que ele aceita uma matriz de argumentos em vez de argumentos individuais.

Vejamos um exemplo:

No exemplo acima, foi utilizado o método “ apply ” para invocar a sayNamefunção e definir o valor de “ this ” para o objeto “ instrutor ”. Os argumentos para a função são passados ​​como uma matriz.

O método “ bind ” cria uma nova função usando o primeiro argumento passado para “bind” como o valor de “this”. O argumento dado para “bind” é definido como o valor de “this” dentro da função original quando a nova função é chamada posteriormente.

Aqui está um exemplo abaixo:

No exemplo acima, o método “ bind ” foi usado para criar uma nova função “ instrutorSayName ” usando “ this ” definido para o objeto “ instrutor ”. Quando a função “ instrutorSayName ” foi chamada posteriormente, o valor de “ this ” dentro da função “ sayName ” foi definido para o objeto “ instrutor ”, como se tivéssemos usado “ call ” ou “ apply ”.

4. Nova Vinculação

O processo pelo qual a palavra-chave “ this ” é vinculada a um objeto recém-construído quando uma função é chamada com o operador “ new ” é chamado de vinculação “ new ”.

Quando uma função é chamada com o operador “ new ”, um novo objeto é criado e a palavra-chave “ this ” dentro da função é definida para esse objeto recém-criado. Além disso, o protótipo do objeto recém-criado é definido como a propriedade protótipo da função.

Considere por exemplo:

No exemplo acima, um novo objeto é criado usando o operador “ new ” para chamar a função “ Pessoa ”. As propriedades “ name ” e “ greet ” são adicionadas ao objeto, e a palavra-chave “ this” dentro da função “ Pessoa ” é definida para o objeto recém-gerado.

É fundamental ter em mente que o objeto recém-criado é retornado sem a necessidade de uma instrução “return” quando uma função é chamada usando o operador “new”. Se uma instrução “return” for usada e retornar um objeto, esse objeto será retornado em vez do objeto recém-criado. Se uma instrução “return” for usada e retornar um valor não-objeto, o objeto recém-criado será retornado de qualquer maneira.

Função de seta e “isto”

As funções de seta do JavaScript fornecem um atalho para escrever funções anônimas (funções sem nome). A maneira como eles vinculam a palavra-chave “this” os diferencia das expressões de função convencionais.

O valor de “this” em expressões de função convencionais depende de como a função é invocada. Conforme explicado anteriormente, ela pode ser definida explicitamente usando os comandos “call”, “apply” ou “bind” ou definida implicitamente, dependendo do objeto que contém a função.

No entanto, nas funções de seta, o contexto no qual a função de seta foi gerada, não como ela é invocada, determina o valor de “this”. Isso significa que, se uma função de seta não estiver dentro de outra função, a palavra-chave “this” dentro da função de seta sempre se referirá ao valor “this” da função externa ou do objeto global.

Simplificando, as funções de seta não têm seu próprio valor “this”; em vez disso, eles herdam o valor “this” do escopo delimitador.

Por exemplo:

Aqui está outro exemplo de uma função de seta que se refere à palavra-chave “this” da função externa:

No exemplo acima, a função “ greet ” neste exemplo foi definida como uma função de seta dentro da função “ Pessoa ”. O valor “ this ” na função de seta correspondia ao valor “ this ” da função “Person”, que foi atribuído ao objeto recém-gerado “ elie ”, quando a função “ greet ” foi invocada.

Vale mencionar que o uso de “call”, “apply” ou “bind” não pode alterar a ligação “this” nas funções de seta. Independentemente do método usado para invocar a função, o valor “this” dentro de uma função de seta permanece o mesmo. Isso torna as funções de seta especialmente benéficas para retornos de chamada e manipuladores de eventos, em que o valor de “this” frequentemente muda inesperadamente.

Conclusão

Concluindo, aprender a palavra-chave “this” do JavaScript é uma etapa crucial para se tornar um verdadeiro especialista em JavaScript. Esse conceito essencial, mas frequentemente desconcertante, pode fazer ou quebrar seu código e é a chave para utilizar toda a capacidade da linguagem. Você será capaz de escrever um código que não seja apenas mais eficiente, mas também mais elegante e dinâmico se tiver um entendimento completo da ligação padrão, ligação implícita, ligação explícita e nova ligação, que são as quatro ligações básicas de “this” . A capacidade de desenvolver código flexível, adaptável e escalável que pode crescer e evoluir à medida que seus projetos e requisitos mudam, permitirá que você enfrente qualquer desafio que surja em seu caminho. Portanto, abrace a palavra-chave “this”, domine-a e torne-se um verdadeiro ninja do JavaScript!