JavaScript'te bağlam nedir?

JavaScript'te (this) bağlamı, şu anda çalışan fonksiyonun yürütüldüğü nesneye referanstır. Değeri, fonksiyonun nasıl çağrıldığına göre belirlenir, tanımlandığı yere değil.

Bağlamı belirlemenin temel yolları:

• Küresel bağlam: Fonksiyonların dışında, katı olmayan modda, this küresel nesneye (window tarayıcıda, global Node.js'de) referans eder. Katı modda, this undefined olur.

  // Katı olmayan mod (tarayıcıda)
  console.log(this === window); // true
  
  // Katı mod
  "use strict";
  console.log(this === undefined); // true
  

• Bir nesnenin metodu: Bir fonksiyon, nesne metodu olarak çağrılırsa (obj.method()), fonksiyon içindeki this, bu nesneye (obj) referans eder.

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Çıktı: Hello, John (this, user'a referans eder)
  

• Fonksiyon çağrısı (call, apply, bind): call ve apply metodları, fonksiyonu açıkça belirtilmiş bağlamla çağırır. bind ise, sabit bir bağlamla yeni bir fonksiyon oluşturur.

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

• Yapıcı (new): Bir fonksiyon new operatörüyle çağrıldığında, yeni boş bir nesne oluşturulur ve fonksiyon içindeki this, bu yeni nesneye referans eder.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Çıktı: John (this, Person içinden john'a referans eder)
  

• Ok fonksiyonları: Ok fonksiyonlarının kendi bağlamı yoktur. this, dış bağlamdan (lexical) alınır, yani fonksiyon oluşturulduğu yerden.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this, greet'ten alınır (user'a referans eder)
          };
          innerGreet();
      }
  };
  user.greet(); // Çıktı: Hello, Alice
  

this'in nasıl belirlendiğini anlamak, JavaScript'te nesneler, metodlar ve olay işleyicileri ile doğru çalışmak için kritiktir.