Ce este contextul în JavaScript?

Contextul (this) în JavaScript este o referință la obiectul în cadrul căruia se execută funcția curentă. Valoarea sa este determinată de modul în care a fost apelată funcția, nu de locul unde a fost definită.

Modurile principale de a determina contextul:

• Context global: În afara funcțiilor, în modul non-strict, this face referire la obiectul global (window în browser, global în Node.js). În modul strict, this este undefined.

  // Mod non-strict (în browser)
  console.log(this === window); // true
  
  // Mod strict
  "use strict";
  console.log(this === undefined); // true
  

• Metoda unui obiect: Dacă o funcție este apelată ca metodă a unui obiect (obj.method()), this în interiorul funcției face referire la acel obiect (obj).

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Output: Hello, John (this face referire la user)
  

• Apelul funcției (call, apply, bind): Metodele call și apply apelează funcția cu un context explicit specificat. bind creează o nouă funcție cu un context fix.

  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)
  

• Constructor (new): Când o funcție este apelată cu operatorul new, se creează un nou obiect gol, iar this în interiorul funcției constructor face referire la acest nou obiect.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Output: John (this în interiorul lui Person face referire la john)
  

• Funcții săgeată: Funcțiile săgeată nu au propriul lor context. this în interiorul unei funcții săgeată este preluat din mediul exterior (lexical) în care a fost creată.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this este preluat din greet (face referire la user)
          };
          innerGreet();
      }
  };
  user.greet(); // Output: Hello, Alice
  

Înțelegerea modului în care this este determinat este esențială pentru a lucra corect cu obiecte, metode și handleri de evenimente în JavaScript.