De ce depinde valoarea contextului de execuție al lui `this` în JavaScript?

Valoarea this în JavaScript depinde de modul în care este apelată funcția. Scenariile principale:

1. Context global: În afara funcțiilor, în modul strict ('use strict'), this este undefined. Fără modul strict, este obiectul global (window în browser, global în Node.js).

2. Apelarea unei metode a unui obiect: this indică către obiectul căruia îi aparține metoda apelată.

   const obj = {
     prop: 'valoare',
     method: function() {
       // this === obj
       console.log(this.prop);
     }
   };
   obj.method();
   

3. Apel normal al unei funcții: În modul strict, this este undefined. Fără modul strict, este obiectul global.

   function myFunction() {
     // în modul strict this === undefined
     // fără modul strict this === window (în browser)
     console.log(this);
   }
   myFunction();
   

4. Constructor (new): Folosind operatorul new cu o funcție constructor, this din interiorul funcției face referire la noul obiect creat.

   function MyClass(name) {
     this.name = name; // this === obiectul nou creat
   }
   const instance = new MyClass('test');
   // instance.name === 'test'
   

5. Legare explicită (call, apply, bind): Metodele call, apply și bind permit stabilirea explicită a valorii this pentru o funcție.

   • call(thisArg, arg1, arg2, ...): Apelează funcția, setând this la thisArg și transmitând argumentele individual.
   • apply(thisArg, [argsArray]): Apelează funcția, setând this la thisArg și transmitând argumentele ca array.
   • bind(thisArg): Returnează o nouă funcție cu this legat permanent.

   const anotherObj = { value: 42 };
   function showValue() {
     console.log(this.value);
   }
   showValue.call(anotherObj); // Va afișa 42
   

6. Funcții săgeată (=>): Funcțiile săgeată nu au propriul this. Valoarea this în interiorul unei funcții săgeată moștenește din contextul lexical în care a fost definită.

   const outerObj = {
     name: 'Outer',
     method: function() {
       const arrowFunc = () => {
         // this moștenește din method, care este apelată ca metodă a outerObj
         console.log(this.name);
       };
       arrowFunc();
     }
   };
   outerObj.method(); // Va afișa 'Outer'
   
   const anotherArrowFunc = () => {
       // this moștenește din contextul global (sau undefined în modul strict)
       console.log(this);
   };
   anotherArrowFunc();
   

7. Manipulatoare de evenimente DOM: În cele mai multe cazuri, this în handler-ul de eveniment face referire la elementul DOM pe care a avut loc evenimentul.

   // Exemplu în browser
   const button = document.querySelector('button');
   button.addEventListener('click', function() {
     // this === button
     console.log(this.tagName);
   });
   

Înțelegerea acestor mecanisme este esențială pentru utilizarea corectă a this în JavaScript.