Bu yazımda JavaScript this nedir? ve JavaScript this kullanımı konularını öğreneceğiz.
This anahtar kelimesi kullanıldığı yere göre farklı değerler alabilir. Örneğin bir nesne içerisinde kullanıldığında farklı bir değer ifade ederken bir fonksiyon içerisinde kullanıldığında farklı bir değer ifade edebilir.
Şimdi sırasıyla this kullanımını farklı örnekler üzerinden inceleyelim.
JavaScript This Kullanımı
⇒ This anahtar kelimesinin nesneler ile kullanımı
JavaScript’te this anahtar kelimesi ait olduğu nesneyi ifade eder.
Örnek
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> var kisi = { adi: "Ali", soyadi : "Veli", adi_soyadi : function() { return this.adi + " " + this.soyadi; } }; console.log(kisi.adi_soyadi()); </script> |
Çıktısı : Ali Veli
✔ Yukarıdaki örnekte ilk olarak bir kisi nesnesi oluşturduk.
✔ Sonrasında nesnenin adi ve soyadi özelliklerini ekledik.
✔ Sonrasında adi_soyadi adında bir fonksiyon özelliği ekledik.
✔ Fonksiyon içerisinde this anahtar kelimesini kullanarak console ekranına adını ve soyadını string birleştirme işlemi ile yazdırdık.
Konumuz ile ilgili olan kısma bakacak olursak;
Fonksiyon içerisinde kullanmış olduğumuz this anahtar kelimesi ait olduğu nesneyi yani kisi nesnesini temsil ediyor.
Eğer fonksiyon içerisinde this anahtar kelimesi yerine kisi nesnesini kullansaydık yine aynı çıktıyı elde edecektik.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> var kisi = { adi: "Ali", soyadi : "Veli", adi_soyadi : function() { return kisi.adi + " " + kisi.soyadi; } }; console.log(kisi.adi_soyadi()); </script> |
Çıktısı : Ali Veli
Gördüğünüz gibi yine aynı çıktıyı elde ediyoruz.
⇒ This anahtar kelimesinin yalnız kullanımı
This anahtar kelimesi tek başına kullanıldığında, global nesneyi ifade eder. Bir tarayıcı penceresinde global nesne window nesnesidir.
Aşağıdaki 2 örnekte de console ekranına window nesnesi yazdırılır.
Örnek – 1
|
1 2 3 4 5 6 7 8 9 |
<script> var x = this; console.log(x); </script> |
Örnek – 2
|
1 2 3 4 5 6 7 |
<script> console.log(window); </script> |
Eğer kodlarınızı “use strict” (katı mod) ile yazıyorsanız this anahtar kelimesi yine global nesneyi yani window nesnesini ifade eder.
⇒ This anahtar kelimesinin fonksiyon içerisinde kullanımı
This anahtar kelimesi fonksiyon içerisinde kullanıldığında, global nesneyi ifade eder. Bir tarayıcı penceresinde global nesne window nesnesidir.
Aşağıdaki örnekte console ekranına window nesnesi yazdırılır.
Örnek
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function myFunction() { return this; } console.log(myFunction()); </script> |
Eğer kodlarınızı “use strict” (katı mod) ile yazıyorsanız this anahtar kelimesi geriye undefined değerini döndürür.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> "use strict" function myFunction() { return this; } console.log(myFunction()); </script> |
Çıktısı : undefined
⇒ This anahtar kelimesinin Html etiketi içerisinde kullanımı
This anahtar kelimesi Html etiketleri içerisinde kullanıldığında, ait olduğu Html öğesini ifade eder.
Örnek
|
1 2 3 |
<button onclick="this.style.backgroundColor='red'">Tıkla!</button> |
Yukarıdaki örnekte this anahtar kelimesi button etiketini ifade eder.
Örneğimizde butona tıklandığında butonun arka plan rengi kırmızı olacaktır.
Umarım “JavaScript This Anahtar Kelimesi Nedir? JavaScript This Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
JavaScript Arrow Fonksiyonu Nedir? Nasıl Kullanılır?
Yeni bir yazımda görüşmek üzere.
