JavaScript’te “this” Anahtar Kelimesinin Kullanımı

Bu yazımızda, JavaScript’te sıkça karşılaşılan ve bazen karmaşıklığa yol açan “this” anahtar kelimesinin kullanımını detaylı bir şekilde ele alacağız.

JavaScript’te “this” Kullanımı

JavaScript’teki “this” anahtar kelimesi, bir fonksiyonun çalıştığı bağlama göre değişiklik gösteren bir referanstır ve genellikle “mevcut nesneyi” ya da “mevcut bağlamı” ifade eder. Yani “this” kavramının temel var oluş sebebi, bir fonksiyon veya metodun içinde bulunduğu bağlamı (context) ya da o anki nesneyi belirtmektir.

Bu bağlamda düşündüğümüzde “this” anahtar kelimesi “bu buna aittir” ya da “bu bundandır” anlamına gelir. Yani “bu metot bu nesneye aittir” ya da “bu özellik bu nesneye aittir” şeklinde bir anlamı vardır. Maddeler halinde inceleyelim:

• Global bağlamda: Global bağlamda (yani herhangi bir fonksiyonun içinde olmayan) this kavramı eğer tarayıcı kullanılmışsa window objesine, Node.js’de çalışıyorsa global objesine referans verir.

console.log(this);  
// window (browser context) 
// global (Node.js context)

• Bir fonksiyon içinde: Normal bir fonksiyonun içinde this genellikle global nesneye (window veya global) referans verir.

function testFunction() {
  console.log(this);  
}
testFunction();

// window (browser context) 
// global (Node.js context)

Bu durum genellikle kapsam veya bağlam (closure) adı verilen bir kavramla ilgilidir. Ayrıca belirtmek isterim ki, “strict mode” (katı mod) kullanıldığında fonksiyon içindeki “this” undefined olacaktır. Bakınız:

"use strict";

function showThisStrict() {
    console.log(this);
}

showThisStrict();  // undefined

• Bir nesne metodu içinde: Nesne metodu olarak çağrılan bir fonksiyonun içindeki this, o metodun ait olduğu nesneye referans verir.

var myObject = {
  property: "I am an object!",
  method: function() {
    console.log(this);  
  }
};
myObject.method(); // myObject

• Yapıcı fonksiyon içinde: Bir yapıcı (constructor) fonksiyon, new operatörü ile birlikte çağrıldığında yeni bir nesne oluşturulur ve this, yeni oluşturulan bu nesneye referans verir.

function Car(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;
}
var myCar = new Car("Toyota", "Corolla", 2005);
console.log(myCar.brand);  // Toyota

❗ Ancak, yapıcı fonksiyonun kendisi bir nesne döndürürse, o zaman new operatörü tarafından otomatik olarak oluşturulan nesne yerine, bu nesne döndürülür.

function Car(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;

  var anotherCar = {
    brand: "BMW",
    model: "X5",
    year: 2020
  };

  return anotherCar;
}

var myCar = new Car("Toyota", "Corolla", 2005);
console.log(myCar); // { brand: "BMW", model: "X5", year: 2020 } 

Örneğimizde, new Car("Toyota", "Corolla", 2005); koduyla bir “Toyota Corolla 2005” nesnesi oluşturmayı beklerken “BMW X5 2020” nesnesi elde ederiz. Bunun nedeni, Car yapıcı fonksiyonunun kendi içerisinde anotherCar adında başka bir nesneyi geri döndürmesidir. Bu durumda, fonksiyonun geri döndürdüğü bu anotherCar nesnesi, “new” operatörü ile oluşturduğumuz asıl nesnenin yerini alır.

Yukarıdaki örnekten de anlaşılacağı üzere, yapıcı fonksiyonlar içinde başka bir nesne döndürmekten kaçınmalıyız. Çünkü bu durum, “this” bağlamını etkileyerek beklediğimiz sonucun dışında bir nesne oluşturur. Haliyle bu durum, kodumuzun beklenmeyen şekillerde davranmasına yol açar.

• Bir olay işleyici içinde: Bir olay işleyici (event handler) içinde, this genellikle o olayın gerçekleştiği elemente referans verir.

button.addEventListener('click', function() {
  console.log(this); // tıklanan button elementi
});

• Call, apply ve bind: call, apply ve bind metotları, fonksiyonların this değerini manuel olarak ayarlamak için kullanılır.

function greet() {
  console.log("Merhaba, " + this.name);
}
const person = { name: "Jane" };
greet.call(person); // Merhaba, Jane

• Strict Mod ve Non-Strict Mod: JavaScript’te this anahtar kelimesinin davranışı, strict mod veya non-strict mod olup olmamasına da bağlıdır.

Strict mode aktivasyonuyla, this global kapsamda undefined olarak ayarlanır. Bununla birlikte, non-strict mode’da global kapsamda this, global nesneyi (örn. window) referans alır.

function nonStrictModeFunction() {
  console.log(this);  // window or global
}
nonStrictModeFunction();

function strictModeFunction() {
  'use strict';
  console.log(this);  // undefined
}
strictModeFunction();

• Arrow Functions: Arrow functions (ok fonksiyonları), this anahtar kelimesini farklı bir şekilde ele alır. Normal fonksiyonlardan farklı olarak, “arrow” fonksiyonlarındaki this, fonksiyonun tanımlandığı yerdeki (lexical scope) this değerini alır. Bu durum, özellikle callback fonksiyonları ve event handlerları (olay işleyicileri) ile çalışırken istenen bir davranıştır.

var myObject = {
  myMethod: function() {
    console.log(this);  // myObject

    setTimeout(function() {
      console.log(this);  // window ya da global 
    }, 1000);

    setTimeout(() => {
      console.log(this);  // myObject
    }, 2000);
  }
};

myObject.myMethod();

Sonuç olarak, JavaScript’te “this” kullanımının bağlamını doğru anlamak, kodunuzu daha öngörülebilir yapar. Umarım anlaşılır bir yazı olmuştur.