A palavra-chave this em JavaScript pode ser confusa porque se comporta de maneira diferente em funções regulares e funções de seta. Nesta postagem do blog, explicaremos como isso funciona em ambos os tipos de funções, exploraremos por que essas diferenças existem e forneceremos o conhecimento básico necessário para entender isso em JavaScript.

Funções regulares

Funções regulares em JavaScript são definidas usando a palavra-chave function. O valor disto nessas funções depende de como a função é chamada. Aqui estão vários exemplos:

1. Contexto Global

• Modo não estrito:

  function regularFunction() {
      console.log(this);
  }

  regularFunction(); // Logs the global object (window in browsers)

• Explicação: No modo não estrito, quando uma função é chamada no contexto global (não como um método de um objeto), isso se refere ao objeto global (janela em navegadores ou global em Node .js).

  • Modo estrito:

  'use strict';

  function regularFunction() {
      console.log(this);
  }

  regularFunction(); // Logs undefined

• Explicação: No modo estrito, isso permanece indefinido quando uma função é chamada no contexto global, fornecendo um ambiente mais seguro ao evitar modificações acidentais no objeto global.

2. Chamada de método

Quando uma função é chamada como método de um objeto, this se refere a esse objeto.

• Exemplo:

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

• Explicação: Neste caso, isso aponta para obj porque a função é chamada como um método de obj.

  • Modo estrito: O comportamento permanece o mesmo no modo estrito.

3. Chamada do Construtor

Quando uma função é usada como construtor (chamada com a palavra-chave new), isso se refere à instância recém-criada.

• Exemplo:

  function Person(name) {
      this.name = name;
      this.sayHello = function() {
          console.log(`Hello, my name is ${this.name}`);
      };
  }

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

• Explicação: Quando chamado com new, isso dentro da função construtora Person se refere à nova instância que está sendo criada. Cada nova instância (person1 e person2) obtém sua própria propriedade name e método sayHello.

  • Modo estrito: O comportamento permanece o mesmo no modo estrito.

4. Vinculação Explícita

Você pode vincular isso explicitamente usando call, apply ou bind.

• Exemplo:

  function regularFunction() {
      console.log(this);
  }

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

• Explicação: chame e aplique imediatamente invoca a função com this definido como obj, enquanto bind cria uma nova função com this permanentemente vinculado a obj.

  • Modo estrito: O comportamento permanece o mesmo no modo estrito.

Funções de seta

As funções de seta, introduzidas no ES6, não possuem seu próprio contexto. Em vez disso, eles herdam isso do escopo (lexical) circundante. Isso torna as funções de seta úteis em determinadas situações.

1. Lexical isso

As funções de seta herdam isso do escopo em que são definidas.

• Modo não estrito:

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

• Explicação: As funções de seta não possuem isso próprio; eles usam isso do escopo circundante. Aqui, refere-se ao objeto global porque a função é definida no escopo global.

  • Modo estrito:

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

• Explicação: No modo estrito, se o escopo circundante for global, permanece indefinido como herdado do escopo circundante.

2. Chamada de método

Ao contrário das funções regulares, as funções de seta não recebem isso quando chamadas como métodos. Eles herdam isso do escopo anexo.

• Exemplo:

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

• Explicação: As funções de seta não vinculam seu próprio this, mas o herdam do escopo lexical. Neste exemplo, this refere-se ao objeto global ou indefinido no modo estrito, não ao obj.

  • Modo Estrito: Logs indefinidos, não obj.

3. Função de seta dentro de outra função

Quando uma função de seta é definida dentro de outra função, ela herda isso da função externa.

• Exemplo:

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

• Explicação: Neste caso, this dentro da função de seta refere-se ao mesmo this que em outerFunction, que é obj.

  • Modo estrito: O comportamento permanece o mesmo no modo estrito.

4. Função de seta em manipuladores de eventos

As funções de seta em manipuladores de eventos herdam isso do escopo léxico circundante, não do elemento que aciona o evento.

• Exemplo:

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

• Explicação: A função de seta não vincula isso ao elemento de botão; ele o herda do escopo circundante, que é o escopo global ou indefinido no modo estrito.

  • Modo Estrito: Registra indefinido, não o elemento do botão.

Por que essas diferenças?

A diferença entre funções regulares e funções de seta está em como elas lidam com isso:

• Funções regulares: O valor disso é dinâmico e determinado pelo site de chamada (como a função é chamada).
• Funções de seta: O valor this é lexical e definido no momento em que a função é definida, com base no valor this do contexto de execução envolvente.

Conceitos-chave para entender

Para entender o comportamento disso em JavaScript, você precisa conhecer os seguintes conceitos:

1. Contexto de execução: O contexto no qual o código é executado, afetando como isso é determinado.
2. Call-site: O local no código onde uma função é chamada, influenciando o valor this em funções regulares.
3. Escopo Lexical: Como isso é herdado em funções de seta do escopo circundante.
4. Modo Estrito: Como o modo estrito altera o comportamento padrão deste em determinados contextos.

Resumo

• Funções regulares: são dinâmicas e determinadas pelo site da chamada.
• Funções de seta: isso é lexical e determinado pelo escopo circundante quando a função é definida.

Compreender essas distinções ajudará você a escrever código JavaScript mais previsível e sustentável. Esteja você usando funções regulares ou funções de seta, saber como isso funciona é crucial para um desenvolvimento JavaScript eficaz.