Čo je to kontext v JavaScript?

Kontekst (this) v JavaScriptu je odkaz na objekt, v okviru katerega se izvaja trenutna funkcija. Njegova vrednost je določena z načinom, kako je bila funkcija poklicana, ne pa z mestom, kjer je bila definirana.

Glavni načini za določanje konteksta:

• Globalni kontekst: V zunanjih funkcijah, v nelimiti režimu this se nanaša na globalni objekt (window v brskalniku, global v Node.js). V strogi režim je this undefined.

  // Nelimiti režim (v brskalniku)
  console.log(this === window); // true
  
  // Strogi režim
  "use strict";
  console.log(this === undefined); // true
  

• Metoda objekta: Če se funkcija pokliče kot metoda objekta (obj.method()), se this znotraj funkcije nanaša na ta objekt (obj).

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

• Klic funkcije (call, apply, bind): Metode call in apply pokličejo funkcijo z eksplicitno določenim kontekstom. bind ustvari novo funkcijo s fiksnim kontekstom.

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

• Konstruktor (new): Pri klicu funkcije z operatorjem new, se ustvari nov prazen objekt, in this znotraj konstruktorja kaže na ta nov objekt.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Izhod: John (this znotraj Person se nanaša na john)
  

• Puščice (streličaste funkcije): Pri streličastih funkcijah nima lastnega konteksta. this znotraj streličaste funkcije vzame vrednost iz zunanje (leksične) oblasti, kjer je bila funkcija ustvarjena.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this vzame vrednost iz greet (se nanaša na user)
          };
          innerGreet();
      }
  };
  user.greet(); // Izhod: Hello, Alice
  

Razumevanje, kako se določa this, je ključno za pravilno delo z objekti, metodami in dogodkovnimi obdelovalci v JavaScript-u.