Javascript This Kullanımı
Hepinize merhaba dostlarım :). Bu yazımda sizlere her programlama dilinde hemen hemen olan ve yeri geldiğinde de javascript programlama dilinde de kullandığımız this komutunun kullanımından bahsedeceğim :). Türkçe karşılığı "bu" anlamı içeren this komutunun genel amacı proje içerisinde "buradaki" şeklinde sorgu yapıp ulaşmak istediğimiz veriye bizi kolay bir şekilde ulaştırmada yardımcı olur :). Şimdi aklınızdaki sorulardan birisi şudur :)
Kullanım Şekli Nasıldır ?
Öğrenme sürecinde çok güzel bir soru sordunuz dostlarım :) Şimdi genel olarak kullanımlarına bakacak olursak
- Global Olarak this kullanımı
- Fonksiyon İçerisinde this kullanımı
- Event İçerisinde this kullanımı
- Nesne İçerisinde this kullanımı
şeklinde kullanım örnekleri vardır :). Şimdi gelelim dostlarım ilk örneğimizden yavaştan yavaştan başlayalım
Global Olarak This Kullanımı
Eveeeet artık geldik this kullanımının ilk örneklerinden birisi olan Global this kullanımına :). Global olarak this kullanımı projemiz içerisinde this komutunu sabit bir değişkene (const) veya proje içerisinde her yerden erişilebilir (var) isimli bir değişkene atarak rahatlıkla kullanabiliriz :). Gelin bununla ilgili bir örnek yapalım.
<script>
var global_this = this;
alert(global_this);
</script>
<!--
Ekran Çıktısı: [object Window]
-->şeklinde örnek olarak bir global this oluşturduk ve bunu projemizde rahat bir şekilde kullandık :). Artık istediğimiz yerde this kullanmak yerine global_this değişkenini kullanıp rahat bir şekilde projemizde istediğimiz yerde kullanabiliriz :). Global this kullanımını anladığımıza göre geldik şimdi artık diğer bir kullanıma :)
Fonksiyon İçerisinde This Kullanımı
Ve geldik this kullanımının bir diğer kullanımına yani fonksiyon içerisinde kullanımına :). Dostlarım this komutunu fonksiyon içerisinde kullandığımız zamanlarda aslında biz koda şunu söylüyoruz: "Bu Proje İçerisindeki" diye komut veriyoruz. Yani sadece o fonksiyona ait olmuyor :). Gelin bunu bir örnekle açıklayalım
<script>
function karsila(ad,soyad){
return "Hoşgeldiniz: "+this.ad+" "+this.soyad;
}
var sonuc = karsila("MFSoftware","Blog");
alert(sonuc);
</script>
<!--
Ekran Çıktısı: Hoşgeldiniz: undefined undefined
-->şeklinde ekranımıza çıktı alacağız :). Neden böyle diye merak ediyorsanız size anlatayım işin mantığınız :). Burada bizim projemizde global olarak tanımlanan ad ve soyad isimli değişkenleri arıyor. Bunlar da haliyle olmayınca bize undefined olarak dönüyor :). Ama biz bunu aşağıdaki şekildeki gibi kullanabiliriz
<script>
function karsila(){
return this;
}
var sonuc = karsila();
alert(sonuc);
</script>
<!--
Ekran Çıktısı: [object Window]
-->şeklinde ekranımıza çıktı gelecektir :). Fonksiyon içerisinde this komutunu kullandığımıza ekranımıza Windows Nesnesi bastırılacaktır :). Bu kullanımı da anladığımıza göre şimdi gelelim this komutunun bir kullanım şekline :)
Event İçerisinde This Kullanımı
This kullanımının bir diğer kullanımına gelecek olursak event işlemlerinde kullanımına :). Event içerisinde this kullanımına genel olarak değinmemiz gerekirse bunu bir örnekle size anlatmak daha güzel olacaktır :). Örneğin bir butona basıldığında (click olduğunda) bu olayı yakalamamız ve buton içeriğini değiştirmemizde uzun uzun javascript yazıp id tanımlayıp bunun içeriğini almaktansa this komutunu kullanıp daha hızlı bir şekilde bunu ayarlayabiliriz :). Gelin bunu hızlıca ayarlayalım. Bir butonumuz olsun ve bu butonumuza basınca içerisine "Tıklandı" yazsın :). Gelin bunu kodlarımıza dökelim
<!DOCTYPE html>
<html lang="tr">
<head>
<title>MFSoftware Blog | This Kullanımı</title>
</head>
<body>
<button onclick="this.innerHTML='Tıklandı'">Tıkla</button>
</body>
</html>
<!--
Ekran Çıktısı: Butona basınca butonun içeriği "Tıklandı" olarak değişecek
-->şeklinde ayarladık :). Gördüğünüz gibi id tanımlayıp uzun uzun click eventini yakalayıp içeriğini değiştirme vs vs bir sürü kod yazmaktansa this komutu ile hızlıca içeriğini ayarladık :). İşlemlerimiz bu kadar basit :). Şimdi gelelim this komutunun bir başka kullanımına :)
Nesne İçerisinde This Kullanımı
Ve geldik javascript programlama dilinde diğer başlıklarda da olduğu gibi sıklıkla kullanılan ve işlerimizi bir o kadar kolaylaştıran yani nesne içerisinde this kullanımı işlemimize :). Özellikle bir nesne oluşturuduğumuzda ve bu nesnelerimizin içerisinde ekstra bir method oluşturduğumuzda bu nesne içerisindeki key lere ulaşmamızda bize avantaj sağlar :). Gelelim sözümüzü daha fazla uzatmadan aşağıdaki gibi bir nesne oluşturalım
<script>
var nesnemiz = {
ad : "MFSoftware",
soyad: "Blog",
kurulus: "25 Ocak 2021",
tetikle: function(){
return this.ad+" "+this.soyad+" Kuruluş: "+this.kurulus
}
}
var sonuc = nesnemiz.tetikle();
alert(sonuc);
// Ekran Çıktısı : MFSoftware Blog Kuruluş: 25 Ocak 2021
</script>şeklinde kodumuzu yazdık :). Ekranımızda çıktıya bakacak olursak kodda da farkettiğiniz gibi this koduyla objemiz içerisindeki key lere rahatlıkla ulaştık ve ekran çıktımız da sorunsuz bir şekilde bize gösterildi :). İşte bütün işlemlerimiz bu kadar dostlarım :). Konumuz oldukça basit ve işlemlerimizi çok çabuk yapmamızda yardımcı oluyor :)
Eveeeet dostlarım :). Bu yazımda sizlere javascript programlama dilinde this kullanımlarından dilim döndüğünce bahsettim. Umarım faydalı olmuşumdur :). Eksik veya hatalı bir anlatım yapmış isem benimle iletişim kurmaktan çekinmeyin :). Başlarda biraz karmaşık veya zor gelebilir bu konu dostlarım anlıyorum. Bu durumda yapmanızı istediğim her yazımın altında da değindiğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız :)". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır :).
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim :)
Yazar Hakkında
Kendi Halinde Bir Backend Developer