JavaScript Temelleri

Bölüm 17

Programların Kapsam Alanları

Bölüm 17 Sayfa 2

17.7 - this Saklı Sözcüğünün Anlamı

JavaScript programlarında çok sık kullanılan this saklı sözcüğü kapsam nesnesine işaret eder. Metotlarda kullanıldığında, metodu çağıran nesneyi işaret eder.

JavaScript programlarında çok yararlı olan this saklı sözcüğü, gizemli bir sözcüktür ve ancak iyice tanındıktan sonra yararlı olarak kullanılabilir.

17.7.1 - Global kapsamda this Çağrısı

Global kapsamda this çağrısı aşağıdaki gibi gerçekleşir. Bu programı, iliştirildiği uygulama sayfasında deneyiniz.

...

alert(this.name);

...
		

Burada this sözcüğü kesin window nesnesini işaret etmektedir. Hiçbir mesaj alınamamasının nedeni, window nesnesinin, name özelliğine bir değer verilmemiş olmasıdır. Çağrının kısaltılmamış olan aşağıdaki şekli gözönüne alınırsa, this sözcüğünün anlamı daha net olarak görülecektir:

...

alert(this.window.name);

...
		

Yukarıdaki uygulamadan alınacak en önemli ders, this sözcüğünün anlamının her zaman kolay anlaşılamayacağıdır. Bu konuda en doğru tutumun daha önceden denenmiş ve anlamı bilinen ifadeler dışında this sözcüğünün kullanılmaması olacağı düşünülebilir.

17.7.2 - Yapılandırıcı Fonksiyonlarda this Sözcüğünün Anlamı

Yapılandırıcı fonksiyonlarda this sözcüğü, yeni oluşturulacak sınıf örneğini belirtir. Bu konuda, önceden yapılmış incelemeleri yeniden ele almak yararlı olabilir. Örnek :

function Üye(nr , ad , soyad , ay) {
this.numara = nr;
this.isim = ad;
this.soyad = soyad;
this.kayıtAyı = ay;
}
		

Bu yapılandırıcı fonksiyonda, this sözcüğü, sadece yapılandırıcı fonksiyonun yeni yapılandıracağı nesne sınıf örneğini işaret eder.

Yapılandırıcı fonksiyonlarda metotların da belirtilmesi durumu değiştirir. Yapılandırıcı fonksiyonun dış kapsamındaki this sözcüğü daima yeni yapılandırılan nesne örneğini işaret ederken, metotlardaki this sözcüğü sadece metoda aittir ve metodu hangi nesne çağırırsa, o nesneyi işaret eder. Yapılandırıcı fonksiyonlarda, metotlar anonim bir iç fonksiyon literali gibi (veya istenirse bir fonksiyon nesne sınıf örneği gibi) tanımlanabilir. Örnek:

function Üye(nr , ad , soyad , ay) {
this.numara = nr;
this.isim = ad;
this.soyad = soyad;
this.kayıtAyı = ay;
this.aidat = function() {
return (12 - this.kayıtAyı) * 5;
}
}
		

Bu yapılandırıcı fonksiyonda, dış this sözcükleri yeni yapılandırılmakta olan nesne örneğine işaret ederken, iç fonksiyonun yani metodun this sözüğü, metodu çağıracak nesneye işaret eder.

JavaScript programlama dilinde, metotlar nesnelere bağlanmazlar (binding). Nesne özelliklerine fonksiyon referansları atanır. Aşağıdaki örnek, bu mekanizmayı daha net olarak açıklamaktadır:

function aidat() {
return (12 - this.kayıtAyı) * 5;
}

function Üye(nr , ad , soyad , ay) {
this.numara = nr;
this.isim = ad;
this.soyad = soyad;
this.kayıtAyı = ay;
this.aidat = aidat;
}
		

Yukarıdaki örnekte, Üye nesne sınıfı yapılandırıcı fonksiyonun aidat özelliğine, aidat fonksiyonun referansı atanmıştır. Bu işlem aynen bir değişkene bir fonksiyonun atanması gibidir. JavaScript fonksiyonlarının olağanüstü, adaptasyon yeteneği, fonksiyonların her yere atanabilmelerini sağlamaktadır

JavaScript programlama dilinde, fonksiyonlar bağımsız birimlerdir (λ) ve hiçbir nesneye bağlı (bind) değillerdir. Sadece nesne özelliiklerine fonksiyon referansları atanabilir. Aynı fonksiyon referansı, doğal olarak, birden çok sınıf yapılandırıcı fonksiyonun özelliklerine de atanabilir. Bu özellikle düzenlenmiştir ve amacı, çokbiçimli (poliformik) metotlardan birden çok nesne sınıfının yararlanabilmesini sağlamaktır.

17.7.3 - Olay Yönetiminde this Sözcüğünün Anlamı

Daha önce de açıklamış olduğumuz gibi, engellemeyen JavaScript programlarının gerçekleşmesi amacı ile satıriçi olay yönetimi yönetimini kulanmıyoruz. Bu açıdan, tüm olay yönetimini JavaScript programları içinde gerçekleştirmeliyiz. Bu da bu noktaya kadar yaptığıız tüm uygulamalarda kolayca gerçekleşti fakat şimdiye kadar uygulamalarımızda, hiç this sözcüğü kullanılmadı. Olay yönteminde this sözcüğünün kullanılabilmesi için, elementin örneğin oncilck özelliğine, ilgili fonksiyonun referansının atanması gerekir. Aşağıda bunun iki genel ve doğru yöntemi, görülmektedir.

İlk metot, genel bir fonksiyonun yazılması ile başlar,

function birŞeylerYap() {
alert(this.id);
}
		

Bu fonksiyon gerçekten çok geneldir, çünkü hangi elemente bağlanırsa onun id değerini alert kutusunda görüntüleyecektir. Ayrıca, birŞeylerYap() fonksiyonunda, en basit eylem olarak id değerinin bir alert kutusunda görüntülenmesi seçilmiştir. Bu fonksiyonla istenilen her türlü işlem gerçekleştirilebilir.

Programda ikinci aşama, sayfada is değeri belirli bir elementinin seçimidir. Bu işlev de aşağıdaki şekilde gerçekleştirilebilir:

element = document.getElementById('bağlantı');
		

Bundan sonraki aşama, tanımlamış olan fonksiyonun referansını, sayfa elementini belirten değişkenin, ilgili olay özelliğine atamaktır. Bunun gerçekleştirilmesi ise,

element.onclick = birŞeylerYap;
		

şeklinde yapılır. Tüm program, bağlı olduğu sayfada denenebilir.

Bundan daha az genel olan fakat aynı şekilde çalışan bir diğer yöntemin kodları aşağıda görülmektedir.

element = document.getElementById('bağlantı');

element.onclick = function() {
alert(this.id);
}

Ikinci yöntem genel değil özel bir yöntem olduğundan, genel olan ilk yöntem daha kullanışlıdır.

Aşağıdaki yöntem sadece FireFox için geçerlidir:

element.addEventListener('click' , birşeylerYap , false);
		

Aşağıdaki yöntem sadece Internet Explorer için geçerlidir:

element.attachEvent('onclick' , birşeylerYap);
		

Tüm belge çözümleyicilerde desteklenmedikleri için, her ikisinin de kamuya açık sitelerde kullanılmamaları gerekir.

Sayfanın XHTML kodlarında karışıklığa neden olmaması için, satırıçi olay yöneticilerinin kullanılması doğru değildir. Buna rağmen çok gerekirse, aşağıdaki yöntem kullanılabilir:

l
<element onClick = "birŞeylerYap(this)">
		

bu durumda, birŞeylerYap() fonksiyonu,

function birŞeylerYap(nesne) {
alert(nesne.id);
}
		

Bu bölümde yapılan uygulamalardan da görülebildiği gibi, this sözcüğünün anlamı, kullanıldığı yere göre çok farklı olmaktadır. Bu nedenle, programlarda this sözcüğü, denendikten sonra kullanılmalıdır.

şeklinde düzenlenebilir. Yukarıdaki yöntem, uygulama sayfasında izlenebilr.

Valid XHTML 1.1