De onde vem o contexto da função em JavaScript…

O contexto de execução (ou this) em JavaScript é determinado no momento em que a função é chamada, não no momento em que é declarada. Os seguintes fatores influenciam o seu valor:

Contexto global: Fora das funções, this refere-se ao objeto global (no navegador window, no Node.js global). No modo estrito ('use strict'), this neste caso será undefined.
```
// No navegador
console.log(this); // window

// No Node.js
console.log(this); // global
```
Chamada de método de um objeto: Se uma função é chamada como método de um objeto (através do ponto), this refere-se a esse objeto.
```
const obj = {
  name: 'Obj',
  method: function() {
    console.log(this.name);
  }
};
obj.method(); // Obj
```
Chamada "normal" de uma função: Em uma chamada simples de uma função (não como método), this em modo não estrito refere-se ao objeto global. No modo estrito, this será undefined.
```
function greet() {
  console.log(this);
}
greet(); // window (em modo não estrito) ou undefined (em modo estrito)
```
Construtor (com new): Quando uma função é chamada com a palavra-chave new, ela atua como um construtor. this dentro da função refere-se à nova instância do objeto criada.
```
function Person(name) {
  this.name = name;
}
const person1 = new Person('Alice');
console.log(person1.name); // Alice
```
Métodos call, apply, bind: Esses métodos permitem definir explicitamente o valor de this para uma função.
- call e apply chamam a função imediatamente, passando this como primeiro argumento. call aceita os demais argumentos separadamente, enquanto apply os recebe em um array.
- bind retorna uma nova função com this "vinculado" permanentemente ao primeiro argumento passado.
```
const anotherObj = { name: 'Another Obj' };

function displayContext() {
  console.log(this.name);
}

displayContext.call(anotherObj); // Another Obj
displayContext.apply(anotherObj); // Another Obj

const boundFunction = displayContext.bind(anotherObj);
boundFunction(); // Another Obj
```

Funções arrow: Funções arrow não têm seu próprio this. Elas "capturam" o valor de this do ambiente léxico em que foram declaradas. Isso as torna úteis para callbacks dentro de métodos ou ao trabalhar com eventos do DOM.

const objWithArrow = {
  name: 'Arrow Obj',
  method() {
    const arrowFunc = () => {
      console.log(this.name); // `this` é tomado do método (objWithArrow)
    };
    arrowFunc();
  }
};
objWithArrow.method(); // Arrow Obj

// Comparar com uma função normal
const objWithRegular = {
  name: 'Regular Obj',
  method() {
    const regularFunc = function() {
      console.log(this); // `this` será window ou undefined (em modo strict) ao chamar neste contexto
    };
    regularFunc();
  }
};
objWithRegular.method(); // window (ou undefined)

A definição de contexto é uma das características-chave do JavaScript, e compreender essas regras é fundamental para trabalhar corretamente com funções e objetos.

De onde vem o contexto da função em JavaScript?