Šta je kontekst u JavaScript-u?

Kontekst (this) u JavaScript-u je referenca na objekat unutar kojeg se izvršava trenutna funkcija. Njegova vrednost se određuje načinom na koji je funkcija pozvana, a ne mestom gde je definisana.

Glavni načini za određivanje konteksta:

• Globalni kontekst: Van funkcija, u nelimiti režimu this se odnosi na globalni objekat (window u pretraživaču, global u Node.js). U strogo režimu, this je undefined.

  // Nelimiti režim (u pretraživaču)
  console.log(this === window); // true
  
  // Strogi režim
  "use strict";
  console.log(this === undefined); // true
  

• Metod objekta: Ako se funkcija poziva kao metod objekta (obj.method()), this unutar funkcije se odnosi na taj objekat (obj).

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Izlaz: Hello, John (this se odnosi na user)
  

• Poziv funkcije (call, apply, bind): Metode call i apply pozivaju funkciju sa eksplicitno navedenim kontekstom. bind kreira novu funkciju sa fiksnim kontekstom.

  function sayName(greeting) {
      console.log(greeting + ", " + this.name);
  }
  
  const person = { name: "Peter" };
  
  sayName.call(person, "Hi"); // Izlaz: Hi, Peter (this = person)
  sayName.apply(person, ["Hello"]); // Izlaz: Hello, Peter (this = person)
  
  const boundSayName = sayName.bind(person, "Hey");
  boundSayName(); // Izlaz: Hey, Peter (this = person)
  

• Konstruktor (new): Pri pozivu funkcije sa operatorom new, kreira se novi prazan objekat, i this unutar konstruktorske funkcije se odnosi na taj novi objekat.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Izlaz: John (this unutar Person se odnosi na john)
  

• Streličaste funkcije: Kod streličastih funkcija nema sopstvenog konteksta. this unutar streličaste funkcije uzima vrednost iz spoljašnje (leksičke) oblasti vidljivosti gde je funkcija kreirana.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this uzima vrednost iz greet (odnosi se na user)
          };
          innerGreet();
      }
  };
  user.greet(); // Izlaz: Hello, Alice
  

Razumevanje kako se određuje this je ključno za pravilno rukovanje objektima, metodama i događajnim rukovaocima u JavaScript-u.