Ce este contextul într-o funcție?

Contextul (this) într-o funcție JavaScript este determinat de modul în care a fost apelată funcția, nu de locul în care a fost declarat. El indică obiectul căruia îi aparține funcția sau care o apelează.

Modalități de determinare a contextului:

1. Context global: În afara funcțiilor sau dacă funcția este apelată fără un obiect explicit (this va fi egal cu obiectul global window în browser, global în Node.js sau undefined în modul strict).

   // În browser
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Contextul obiectului (metodă): Dacă funcția este apelată ca metodă a unui obiect (obj.method()), this din interiorul funcției va face referire la acel obiect.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Salut, numele meu este ${this.name}`);
     }
   };
   
   user.greet(); // Salut, numele meu este Alice
   

3. Contextul constructorului: La apelarea unei funcții cu cuvântul cheie new (new MyClass()), se creează un nou obiect, iar this din constructor face referire la acest nou obiect.

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

4. Indicare explicită a contextului: Metodele call, apply și bind permit setarea explicită a valorii lui this pentru apelul funcției.

   • call(thisArg, arg1, arg2, ...): Apelează funcția cu this setat pe thisArg și argumente individuale.
   • apply(thisArg, [argsArray]): Apelează funcția cu this setat pe thisArg și argumente ca array.
   • bind(thisArg, arg1, arg2, ...): Returnează o nouă funcție cu this fixat pe valoarea dată.

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

5. Funcții săgeată: Funcțiile săgeată nu au propriul this. Ele moștenesc this din mediul lexical în care au fost definite.

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Salut din arrow, ${this.name}`);
       };
       innerArrow(); // `this` aici este anotherUser, moștenit de la sayHello
     },
     sayHelloBad: () => { // practică proastă pentru metodele obiectului
         console.log(`Salut din arrow, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Salut din arrow, David
   
   // În browser, în afara modului strict
   anotherUser.sayHelloBad(); // Salut din arrow, undefined (`this` - window)
   

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