Sobes.tech
Middle

Vorbește despre contextul funcțiilor în JavaScript.

sobes.tech AI

Răspuns de la AI

Contextul de execuție al unei funcții (this) în JavaScript determină modul în care funcția este apelată și ce valori sunt disponibile în interiorul acesteia. Contextul se schimbă dinamic în funcție de modul de apelare:

  • Context global: În afara funcțiilor, this face referire la obiectul global (window în browser, global în Node.js).
    // În browser
    console.log(this === window); // true
    
    // În Node.js
    console.log(this === global); // true
    
  • Contextul funcției:
    • Apel standard: În modul non-strict, this din interiorul unei funcții face referire la obiectul global (dacă funcția nu este metodă a unui obiect). În modul strict ("use strict";), this va fi undefined.
      function showThis() {
        console.log(this);
      }
      
      showThis(); // În modul non-strict: Obiectul global; În modul strict: undefined
      
    • Apel ca metodă a unui obiect: this face referire la obiectul căruia îi aparține metoda.
      const user = {
        name: 'Alice',
        greet: function() {
          console.log("Salut, numele meu este " + this.name);
        }
      };
      
      user.greet(); // Salut, numele meu este Alice
      
    • Cu new (constructor): Creează un nou obiect, care devine valoarea lui this în interiorul funcției constructor și returnează acest obiect.
      function Person(name) {
        this.name = name;
      }
      
      const person1 = new Person('Bob');
      console.log(person1.name); // Bob
      
    • Indicare explicită a contextului (call, apply, bind):
      • call(thisArg, arg1, arg2, ...): Apelează funcția cu this specificat și argumentele enumerate individual.
      • apply(thisArg, [argsArray]): Apelează funcția cu this specificat și argumentele în formă de array.
      • bind(thisArg, arg1, arg2, ...): Returnează o nouă funcție cu this legat permanent de thisArg și cu argumentele legate.
      function introduce(greeting, punctuation) {
        console.log(greeting + ", eu sunt " + this.name + punctuation);
      }
      
      const person = { name: 'Charlie' };
      
      introduce.call(person, "Salut", "!");  // Salut, eu sunt Charlie!
      introduce.apply(person, ["Bună", "."]); // Bună, eu sunt Charlie.
      
      const boundIntroduce = introduce.bind(person, "Hei");
      boundIntroduce("?"); // Hei, eu sunt Charlie?
      
  • Funcții săgeată: Nu au propriul lor this. Capturează this din contextul lexical în care au fost definite.
    const obj = {
      name: 'David',
      sayLater: function() {
        // `this` aici face referire la `obj`
        setTimeout(() => {
          // `this` aici face referire și la `obj` (moștenit din `sayLater`)
          console.log("Mai târziu, sunt " + this.name);
        }, 1000);
      }
    };
    
    obj.sayLater(); // Mai târziu, sunt David