O que é o contexto numa função?

O contexto (this) numa função JavaScript é determinado pela forma como a função foi chamada, e não por onde foi declarada. Ele indica o objeto ao qual a função pertence ou que a chama.

Formas de determinar o contexto:

1. Contexto global: Fora de funções, ou se a função for chamada sem um objeto explícito (this será igual ao objeto global window no navegador, global no Node.js, ou undefined no modo estrito).

   // No navegador
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Contexto do objeto (método): Se a função for chamada como método de um objeto (obj.method()), this dentro da função referenciará esse objeto.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Olá, meu nome é ${this.name}`);
     }
   };
   
   user.greet(); // Olá, meu nome é Alice
   

3. Contexto do construtor: Ao chamar uma função com a palavra-chave new (new MyClass()), um novo objeto é criado, e this dentro do construtor refere-se a esse novo objeto.

   function Person(name) {
     this.name = name;
   }
   
   const person1 = new Person('Bob');
   console.log(person1.name); // Bob
   

4. Indicação explícita do contexto: Os métodos call, apply e bind permitem definir explicitamente o valor de this para a chamada da função.

   • call(thisArg, arg1, arg2, ...): Chama a função com this definido em thisArg e argumentos passados individualmente.
   • apply(thisArg, [argsArray]): Chama a função com this definido em thisArg e argumentos passados em forma de array.
   • bind(thisArg, arg1, arg2, ...): Retorna uma nova função com this fixado em thisArg.

   function displayInfo(age) {
     console.log(`${this.name} tem ${age} anos.`);
   }
   
   const person = { name: 'Charlie' };
   
   displayInfo.call(person, 30); // Charlie tem 30 anos.
   displayInfo.apply(person, [35]); // Charlie tem 35 anos.
   
   const bondedDisplayInfo = displayInfo.bind(person, 40);
   bondedDisplayInfo(); // Charlie tem 40 anos.
   

5. Funções arrow: Funções arrow não têm seu próprio this. Elas herdam this do ambiente léxico onde foram definidas.

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Olá do arrow, ${this.name}`);
       };
       innerArrow(); // `this` aqui é anotherUser, herdado de sayHello
     },
     sayHelloBad: () => { // má prática para métodos de objetos
         console.log(`Olá do arrow, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Olá do arrow, David
   
   // No navegador, fora do modo strict
   anotherUser.sayHelloBad(); // Olá do arrow, undefined (`this` - window)
   

Compreender o contexto é fundamental para trabalhar corretamente com objetos, métodos e manipuladores de eventos em JavaScript.