Bir fonksiyonda bağlam nedir?

JavaScript'teki bir fonksiyonda (this) bağlam, fonksiyonun nasıl çağrıldığına göre belirlenir, tanımlandığı yere değil. Bu, fonksiyonun ait olduğu veya çağıran nesneye işaret eder.

Bağlamı belirlemenin yolları:

1. Küresel bağlam: Fonksiyonlar dışında veya fonksiyon açık bir nesne olmadan çağrıldığında (this tarayıcıda window, Node.js'de global, strict modda undefined olur).

   // Tarayıcıda
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Nesne bağlamı (metot): Eğer fonksiyon bir nesnenin metodu olarak çağrılırsa (obj.method()), fonksiyon içindeki this bu nesneye referans olur.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Merhaba, benim adım ${this.name}`);
     }
   };
   
   user.greet(); // Merhaba, benim adım Alice
   

3. Yapıcı fonksiyon bağlamı: Bir fonksiyon new anahtar kelimesiyle çağrıldığında (new MyClass()), yeni bir nesne oluşturulur ve yapıcı fonksiyon içindeki this bu yeni nesneye işaret eder.

   function Person(name) {
     this.name = name;
   }
   
   const person1 = new Person('Bob');
   console.log(person1.name); // Bob
   

4. Açık bağlam belirleme: call, apply ve bind metodları, fonksiyon çağrısı sırasında this değerini açıkça ayarlamaya izin verir.

   • call(thisArg, arg1, arg2, ...): Fonksiyonu this thisArg ile ve argümanlar ayrı ayrı verilerek çağırır.
   • apply(thisArg, [argsArray]): Fonksiyonu this thisArg ile ve argümanlar dizi olarak verilir.
   • bind(thisArg, arg1, arg2, ...): this değeri sabitlenmiş yeni bir fonksiyon döner.

   function displayInfo(age) {
     console.log(`${this.name} ${age} yaşında.`);
   }
   
   const person = { name: 'Charlie' };
   
   displayInfo.call(person, 30); // Charlie 30 yaşında.
   displayInfo.apply(person, [35]); // Charlie 35 yaşında.
   
   const bondedDisplayInfo = displayInfo.bind(person, 40);
   bondedDisplayInfo(); // Charlie 40 yaşında.
   

5. Ok fonksiyonları: Ok fonksiyonları kendi this'lerine sahip değildir. this'i, tanımlandıkları ortamdan kalıtım yoluyla alırlar.

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Merhaba ok fonksiyonu, ${this.name}`);
       };
       innerArrow(); // `this` burada anotherUser, sayHello'dan kalıtılmış
     },
     sayHelloBad: () => { // nesne metodları için kötü uygulama
         console.log(`Merhaba ok fonksiyonu, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Merhaba ok fonksiyonu, David
   
   // Tarayıcıda, strict mod dışında
   anotherUser.sayHelloBad(); // Merhaba ok fonksiyonu, undefined (`this` - window)
   

Bağlamı anlamak, JavaScript'te nesneler, metodlar ve olay işleyicileriyle doğru çalışmak için kritiktir.