Yazılım.
CevapSitesi.com Beta!
Çözüm Noktası
Facebook, Twitter, Google+ veya e-posta ile paylaşın.
| Sorular | Makaleler | Üyeler | Etiketler  | İletişim
Soru sormak ya da cevap vermek için;
giriş yapın veya üye olun.

Sosyal medya hesaplarınızla da giriş yapabilirsiniz.

Yazılım Makaleleri

0

JavaScript Fonksiyonları: this Kullanımı


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



JavaScript Fonksiyonları ile İlgili Makaleler: