O que é o contexto em JavaScript?

O contexto (this) em JavaScript é uma referência ao objeto no qual a função atual está a ser executada. O seu valor é determinado pela forma como a função foi chamada, não pelo local onde foi definida.

Formas principais de definir o contexto:

• Contexto global: Fora de funções, em modo não estrito, this refere-se ao objeto global (window no navegador, global no Node.js). Em modo estrito, this é undefined.

  // Modo não estrito (no navegador)
  console.log(this === window); // true
  
  // Modo estrito
  "use strict";
  console.log(this === undefined); // true
  

• Método de um objeto: Se uma função é chamada como método de um objeto (obj.method()), this dentro da função refere-se a esse objeto (obj).

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Output: Hello, John (this refere-se a user)
  

• Chamada de função (call, apply, bind) : Os métodos call e apply chamam a função com um contexto explicitamente especificado. bind cria uma nova função com um contexto fixo.

  function sayName(greeting) {
      console.log(greeting + ", " + this.name);
  }
  
  const person = { name: "Peter" };
  
  sayName.call(person, "Hi"); // Output: Hi, Peter (this = person)
  sayName.apply(person, ["Hello"]); // Output: Hello, Peter (this = person)
  
  const boundSayName = sayName.bind(person, "Hey");
  boundSayName(); // Output: Hey, Peter (this = person)
  

• Construtor (new) : Ao chamar uma função com o operador new, um novo objeto vazio é criado, e this dentro da função construtora refere-se a esse novo objeto.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Output: John (this dentro de Person refere-se a john)
  

• Funções arrow: As funções arrow não têm o seu próprio contexto. this dentro de uma função arrow é herdado do contexto externo (lexical) onde a função foi criada.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this é herdado de greet (refere-se a user)
          };
          innerGreet();
      }
  };
  user.greet(); // Output: Hello, Alice
  

Compreender como this é definido é fundamental para trabalhar corretamente com objetos, métodos e manipuladores de eventos em JavaScript.