Do que depende o valor do contexto de execução de `this` em JavaScript?

O valor de this em JavaScript depende de como a função é chamada. Os principais cenários:

1. Contexto global: Fora de funções, em modo estrito ('use strict'), this é undefined. Sem modo estrito, é o objeto global (window no navegador, global no Node.js).

2. Chamada de método de um objeto: this aponta para o objeto ao qual pertence o método chamado.

   const obj = {
     prop: 'valor',
     method: function() {
       // this === obj
       console.log(this.prop);
     }
   };
   obj.method();
   

3. Chamada normal de uma função: Em modo estrito, this é undefined. Sem modo estrito, é o objeto global.

   function myFunction() {
     // em modo estrito this === undefined
     // sem modo estrito this === window (no navegador)
     console.log(this);
   }
   myFunction();
   

4. Construtor (new): Usando o operador new com uma função construtora, this dentro da função refere-se ao novo objeto criado.

   function MyClass(name) {
     this.name = name; // this === novo objeto
   }
   const instance = new MyClass('test');
   // instance.name === 'test'
   

5. Ligação explícita (call, apply, bind): Os métodos call, apply e bind permitem definir explicitamente o valor de this para uma função.

   • call(thisArg, arg1, arg2, ...): Chama a função definindo this como thisArg e passando argumentos individualmente.
   • apply(thisArg, [argsArray]): Chama a função definindo this como thisArg e passando argumentos como array.
   • bind(thisArg): Retorna uma nova função com this ligado permanentemente.

   const anotherObj = { value: 42 };
   function showValue() {
     console.log(this.value);
   }
   showValue.call(anotherObj); // Imprime 42
   

6. Funções arrow (=>): As funções arrow não têm seu próprio this. O valor de this dentro de uma função arrow herda do contexto léxico onde foi definida.

   const outerObj = {
     name: 'Outer',
     method: function() {
       const arrowFunc = () => {
         // this herda de method, que é chamado como método de outerObj
         console.log(this.name);
       };
       arrowFunc();
     }
   };
   outerObj.method(); // Imprime 'Outer'
   
   const anotherArrowFunc = () => {
       // this herda do contexto global (ou undefined em modo estrito)
       console.log(this);
   };
   anotherArrowFunc();
   

7. Manipuladores de eventos DOM: Na maioria dos casos, this em um manipulador de evento refere-se ao elemento DOM onde o evento ocorreu.

   // Exemplo no navegador
   const button = document.querySelector('button');
   button.addEventListener('click', function() {
     // this === button
     console.log(this.tagName);
   });
   

Compreender esses mecanismos é fundamental para usar corretamente this em JavaScript.