JavaScript’te “this” Kullanımı (Bölüm 1)

 

Merhaba dostlar, bugün sizlerle JavaScript‘de “this” keyword’ünün kullanım senaryoları hakkında konuşacağız. Hemen başlayalım.

Öncelikle “this” i aynı zamirlere benzetebiliriz, örneğin Tükçe’de; “Ahmet bugün çok fazla yemek yedi, ona daha fazla yemek vermemeliyiz.” gibi bir cümlede “Ahmet” yerine ikinci cümlede “ona” zamirini kullandık, çünkü tekrar Ahmet yazmak gereksizdi. Aynı şekilde JavaScript‘te de bir referans olarak “this“‘i nesnelerin (object) yerine kullanabiliyoruz.

 

Şimdi ilk kod parçamızla devam edelim ve sonrasında açıklayalım:

    
var kullanici = {

    ad: "Ahmet",
    soyad: "Kilinc",
    adsoyad: function () {

        console.log(this.ad + " " + this.soyad);

        //this kullanmadan ise şu şekilde çağırıyoruz:
        console.log(kullanici.ad + " " + kullanici.soyad);
    }
}

Yukarıdaki kod parçamızı kısaca özetleyecek olursak, “kullanici” adında bir nesne tanımladık; nesnemizin “ad” ve “soyad” isminde iki tane değişkeni, bir tane de “adsoyad” isminde fonksiyonu bulunmakta. Fonksiyonumuzun amacı ad ve soyad değişkenlerini yazdırmak. Bunun için iki tane seçeneğimiz var. Biri bu yazının konusu olan “this” ile yapılmakta. Kod parçasında gördüğünüz gibi nesne(object) adımız yerine this kullanabildik.

 

Peki bunu ne için yapıyoruz? Neden referans kullanmak bu kadar önemli?

Ufak bir projede o kadar önemli görünmese de, referans kullanmak yüzlerce satırlık sınıflarda önemli hale geliyor. Şu şekilde düşünebilirsiniz; örneğin yukarıdaki örnekte başka “kullanıcı” adında bir global değişken olabilirdi (tanımladığımızı unutmuş veya başka bir yazılımcının kodu olabilir), o durumda debug yapması zor hatalarla boğuşmak zorunda kalabilirdik.

 

JavaScript “this” teriminin temelleri:

this” terimini tam anlamıyla anlayabilmek için JavaScript‘in özelliklerini iyi bilmek gerekiyor.

JavaScript’te nesnelerin olduğu gibi fonksiyonların da aldığı özellikler (properties) mevcut. Bir fonksiyon çağırıldığında “this” özelliğini almakta, bu “this” ise fonksiyonu çağıran nesnemizin değeridir.

This” referansı her zaman bir nesneyi refer eder ve genellikle fonksiyon veya metod içinde kullanılır. Fonksiyon dışında yani global scope‘da da kullanılabilir ama dikkat edilmesi gereken konu; sınıfımızı strict mode’da çalıştırıyorsak “this”, undefined olacaktır.

 

Şimdi bunları özetleyen bir örnek kod yazalım ki daha anlaşılır olsun:

    
var kullanici = {

    ad       :"Ahmet",
    soyad    :"Kılınç",
    adsoyad:function () {

       console.log (this.ad + " " + this.soyad);
    }
}

kullanici.adsoyad (); //Ahmet Kılınç

Yukarıdaki kod parçasında “this” terimi adsoyad() fonksiyonu içerisinde ve adsoyad() fonksiyonu da kullanici nesnesi tarafından çağırıldığı için “this“, kullanıcı nesnesinin değerini alır.

 

Global scope’da “this” kullanımı:

Fonksiyon veya metod dışı yani global scope‘da bütün global değişkenlerimiz ve fonksiyonlarımız window nesnesinde tanımlanırlar. O yüzden “this” terimini global scope‘da kullandığımız zaman, “this”, global window nesnesini refer etmektedir. (Window nesnesi, JavaScript uygulamamızın ana container‘ıdır.)

 

Yine bir kod örneği ile anlamaya çalışalım:

var ad = "Ahmet",
var soyad = "Kılınç";
​
function adsoyad () {

    // bu adsoyad fonksiyonu içerisindeki "this", window nesnesinin değeridir.
    // çünkü ad ve soyad değişkenleri gibi, adsoyad() fonksiyonu da global scope'da tanımlandı.
    console.log (this.ad + " " + this.soyad);
}
​
var kullanici = {

    ad       :"Büşra",
    soyad    :"Şeker",
    adsoyad:function () {

        console.log (this.ad + " " + this.soyad);
    }
}
​
adsoyad (); // Ahmet Kılınç
​

window.adsoyad (); // Ahmet Kılınç
​
    // "this" terimi adsoyad() fonksiyonu içerisinde ve adsoyad() fonksiyonu da kullanici nesnesi tarafından çağırıldığı için "this", 
    // kullanıcı nesnesinin değerini alır:
kullanici.adsoyad (); // Büşra Şeker

Yukarıdaki kodda global‘da tanımlı fonksiyonumuzu ve nesnemizin içinde tanımlı fonksiyonlarımızı farklı şekillerde çağırdık, kod üzerindeki açıklamalarla sonuçların neden farklı olduğunu anlatmaya çalıştım.

 

Evet dostlar JavaScript‘te “this” teriminin kullanımlarını anlattığım yazımın ilk bölümünü bitirmiş bulunuyoruz. İkinci kısımda “this” teriminin kullanımındaki en kafa karıştıran kısımlarını konuşacağız. İyi günler diliyorum hepinize.

 

Not: Bu yazımda bazı terimleri türkçe yerine ingilizce kullanmak zorunda kaldım, bunun sebebi bazı kelimelerin türkçeye çevrildiğinde kullanmak istediğimiz anlamdan uzaklaşmasıydı. Nacizane tavsiyem eğer bilişim sektöründe bir şeyler yapmak istiyorsanız kesinlikle İngilizce bilginizi en azından terimsel olarak iyileştirmeniz olacaktır.

ahmet

Ahmet Kılınç - Software Developer

Bunlar da hoşunuza gidebilir...

9 Cevaplar

  1. Erva dedi ki:

    Merhaba; gayet açıklayıcıydı. Bölüm 2 yi bekliyoruz. Teşekkürler.

  2. Ultraviolence dedi ki:

    İlk defa bir siteye yorum yazıyorum harika açıklanmış

  3. eren avar dedi ki:

    Merhaba,

    Öncelikle emeğinize sağlık der ve teşekkür ederim.Soruma gelirsek eğer :
    bu yazının ikinci bölümü yayımlandı mı acaba?

    • ahmet dedi ki:

      Merhaba, şuan için yayınlanmadı ama vakit bulduğum en kısa vakitte ikinci bölümü yazacağım. İlginiz için teşekkürler.

  4. korkmaz dedi ki:

    Aç ıklama için teşekkür ederim. Çok iyi anladım.

  5. Eren dedi ki:

    Normalde konuları hep İngilizce çalışıyorum ama takıldığım noktalarda Türkçe sitelere de bakıyordum. Genelde hepsi aynı. Çok teknik geçiyorlar. Sizin sitenizi bugün tanıdım. Yaklaşımınız harika. This kullanımını zamirle açıklamanız çok kafada kalıcı bir örnekti

    Lütfen yazmaya devam edin. Türkçe içerik konusunda maalesef sizin gibi kişilere çok ihtiyaç var.

  6. Alp Can dedi ki:

    Abi Allah razı olsun sonunda kafamda somut birşeyler oluşmaya başladı Teşekkürler.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.