Bir önceki makalemizde nesne yapılandırırken kullanılan ve daha sonraki konumuzda da yer alacak olan this ifadesini biraz incelemek gerekir.
this (bu), kullanıldığı yere ve fonksiyonun çağırılma şekline göre farklı değer içerir.
Örneğin sınıf olarak tanımlanmayan fonksiyonların içinde veya dışında kullanılan this, global nesneyi işaret eder (global nesnenin referansıdır). Global nesne, web sayfaları içinde kullanılan JavaScript için window nesnesidir. Farklı JavaScript uygulama ortamlarında global nesne değişebilir.
Bir sınıf veya doğrudan nesne tanımı içinde kullanılan this ise önceki sınıf tanımlama makalemizde olduğu gibi oluşturulan nesneye işaret eder.
function Sinif() {
console.log(this.constructor.name);
}
console.log(this.constructor.name);
Sinif();
var ornek = new Sinif();
Çıktısı:
Window
Window
Sinif
Örnekteki constructor.name, bir nesnenin yapılandırıcısının adını verir. Örnekte bu yolla nesnenin hangi sınıftan türetildiğini öğreniyoruz.
Çıktıdan da görüleceği gibi fonksiyon tanımından sonraki console.log, Window şeklinde bir çıktı veriyor. Bu this'in Window sınıfının bir örneği olduğunu bildiriyor. Bu örnek web sayfaları içinde JavaScript programlarken kullandığımız window nesnesidir.
Sonraki fonksiyonun doğrudan çağırılmasında ise fonksiyon içindeki console.log(this) de Window çıktısı veriyor. Ancak yapılandırıcı fonksiyonumuzu new operatörü ile çağırdığımızda yani bir nesne oluşturduğumuzda this, oluşturulan nesneyi ifade ettiği için çıktıya nesnemizin türünü (türetildiği sınıf) belirten Sinif metni çıkıyor.
this ifadesi, bir olay fonksiyonunun içinde kullanıldığında olayın atandığı etiketi / nesneyi temsil eder.
Örnek:
function tiklama() {
console.log(this.constructor.name);
}
document.getElementById("tus1").onclick = tiklama;
tus1 id özelliğine sahip etiketin bir input type button (tuş) olduğunu varsaydığımızda, bu tuş tıklandığında şöyle bir çıktı alırsınız:
HTMLInputElement
Ancak bunu fonksiyonu doğrudan etiketi tanımladığınız yerdeki onclick bildirimine yazarsanız this tuşu işaret etmez. window nesnesini işaret eder.
Örnek:
<input type="button" id="tus1" onclick="tiklama()" value="Tıkla" />
<script>
function tiklama() {
console.log(this.constructor.name);
}
</script>
Çıktısı:
Window
Böyle bir durumda onclick="..." özellik tanımlamasının içinde this kullanırsanız bu this etiketi işaret eder. Bunu, olay fonksiyonunu etiket özelliği olarak bildirdiğimizde etiketin referansını fonksiyona geçmek için kullanabilirsiniz.
<input type="button" id="tus1" onclick="tiklama(this)" value="Tıkla" />
<script>
function tiklama(etiket) {
console.log(etiket.value);
console.log(etiket.constructor.name);
}
</script>
Tuş tıklandığında görülecek çıktı:
Tıkla
HTMLInputElement
Arrow (Ok) fonksiyonları this kullanımını desteklemez. Bu yüzden bir olay dinleyici fonksiyon olarak kullanıldıklarında fonksiyon içindeki this olaya atanan klasik fonksiyon bildirimi gibi olayın sahibi olan etikete değil global nesneye (Window) işaret eder.
Örnek:
<input type="text" id="ittTest" />
<script>
var el = document.getElementById("ittTest");
// Klasik fonksiyon bildirimi ile olay fonksiyonu atama.
el.addEventListener("click", function(ev) {
console.log("111Olaya atanan fonksiyon içinden this = ", this.constructor.name);
});
// Ok fonksiyonu şeklinde olay fonksiyonu atama.
el.addEventListener("click", ev => {
console.log("Olaya atanan ok fonksiyonu içinden this = ", this.constructor.name);
});
</script>
Örnekte bir etiketin click olayına bir tane klasik fonksiyon bildirimi ile bir fonksiyon, bir tane de ok fonksiyonu atanmıştır. Etiket tıklandığında atanan olayların her ikisi de ardı ardına çalıştırılacaktır. Click olayı gerçekleştiğinde klasik fonksiyon bildirimi şeklinde tanımlanan fonksiyon içindeki this, ilgili olduğu etikete işaret ettiğinden this.constructor.name ifadesi HTMLInputElement değerini verecek, ok fonksiyonu içinde ise aynı ifade Window değerini döndürecektir.
Bu kadar. Eksik veya hata görürseniz lütfen bildirin.
JavaScript Fonksiyonları ile İlgili Makaleler:
