Cos'è la parola chiave 'this'?

this è una parola chiave in JavaScript che si riferisce all'oggetto nel contesto in cui viene eseguito il codice corrente. Il suo valore è determinato dal modo in cui viene chiamata la funzione.

I modi principali per definire this:

• Contesto globale: Fuori da una funzione, this si riferisce all'oggetto globale (window nel browser, global in Node.js).
• Chiamata normale di funzione: In modalità non stretta (strict mode), this si riferisce anch'esso all'oggetto globale (o undefined se la funzione viene chiamata come metodo di un oggetto, ma quell'oggetto è null o undefined). In modalità stretta, this è uguale a undefined.
• Metodo dell'oggetto: Se la funzione viene chiamata come metodo di un oggetto (cioè, tramite l'operatore punto .), this si riferisce all'oggetto che possiede il metodo.
• Costruttore: Usando l'operatore new, this si riferisce alla nuova istanza dell'oggetto creata.
• Metodi call(), apply(), bind(): Questi metodi permettono di impostare esplicitamente il valore di this durante la chiamata della funzione. bind() restituisce una nuova funzione con this legato, mentre call() e apply() chiamano la funzione con il this specificato.
• Funzioni freccia: Le funzioni freccia non hanno il loro this proprio. this in una funzione freccia viene ereditato lexicalmente dal contesto circostante in cui è stata definita.

Esempi:

// Contesto globale
console.log(this === window); // true (nel browser)

// Chiamata normale di funzione
function myFunction() {
  console.log(this);
}
myFunction(); // window (in modalità non stretta)

// Metodo dell'oggetto
const myObject = {
  myMethod: function() {
    console.log(this);
  }
};
myObject.myMethod(); // myObject

// Costruttore
function MyConstructor() {
  this.value = 10;
  console.log(this);
}
const instance = new MyConstructor(); // oggetto istanza

// call(), apply(), bind()
function greet(name) {
  console.log("Hello, " + name + "! My name is " + this.name);
}
const person = { name: "Alice" };
greet.call(person, "Bob"); // Hello, Bob! My name is Alice
greet.apply(person, ["Bob"]); // Hello, Bob! My name is Alice
const boundGreet = greet.bind(person);
boundGreet("Bob"); // Hello, Bob! My name is Alice

// Funzione freccia
const arrowFunction = () => {
  console.log(this);
};
arrowFunction(); // window (se definita nel contesto globale)

Capire come this viene determinato in diversi contesti è fondamentale per scrivere codice JavaScript corretto.