Yusuf SEZER

JavaScript Nesne Yönelimli Programlama

Paylaş
Facebook
Linkedin
X

Bir çok programlama dili tarafından desteklenen ve JavaScript içerisinde yer alan OOP veya Nesne Yönelimli Programlama ile ilgili bilgiler yer alıyor.

Javascript içerisinde yer alan her şey bir nesnedir.

  • Boolean veri türü nesne olabilir. (new anahtar kelimesi ile)
  • Number veri türü nesne olabilir. (new anahtar kelimesi ile)
  • String veri türü nesne olabilir. (new anahtar kelimesi ile)
  • Date her zaman bir nesnedir.
  • Math her zaman bir nesnedir.
  • Array her zaman bir nesnedir.
  • Function her zaman bir nesnedir.
  • Object her zaman bir nesnedir.

Temel veri türleri haricinde tüm JavaScript değerleri bir nesnedir.

JavaScript temel veri türleri

Temel veri türleri özellik ve metotlara sahip olmayan değişken tipidir.

JavaScript temel veri türleri aşağıda yer almaktadır.

  • string
  • number
  • boolean
  • null
  • undefined

Nesneler

JavaScript değişkenleri tek değer saklar.

<script>
  var kisi = "Yusuf SEZER"
  console.log(kisi);
</script>

JavaScript nesneleri de değişkendir.

Ancak nesneler birden fazla değer saklayabilir.

Nesne değerleri ad:değer çifti olarak yazılır. (ad ve değer iki nokta (:) ile ayrılır)

<script>
  var kisi = {adi:"Yusuf", soyAdi:"SEZER", yas:75};
  console.log(kisi.adi + " " + kisi.soyAdi);
</script>

JavaScript ile oluşturulan nesneler çeşitli değerlere sahip olabilir bu değerler nesne özelliği olarak ifade edilir.

JavaScript nesne özellikleri

JavaScript nesnelerindeki adlandırılmış değerlere özellik denir.

Nesne özellikleri ad:değer çifti olarak saklanır.

ÖzellikDeğer
adiYusuf
soyAdiSEZER
yas75

Nesne özelliklerine erişim

Nesne özelliklerine çeşitli şekilde erişilebilir.

nesneAdi.ozellikAdi

veya

nesneAdi["ozellikAdi"]

veya

nesneAdi[degisken]  // degisken = "yas"; ise nesneAdi[yas]

Nesne özelliklerine erişim örneği aşağıda yer almaktadır.

<script>
  var kisi = { 
    adi:"Yusuf",
    soyAdi:"SEZER",
    yas:75
  };
  console.log("Merhaba ben " + kisi.adi + " " + kisi.soyAdi + " yaşım : " + kisi.yas);
</script>

veya

<script>
  var kisi = { 
    adi:"Yusuf",
    soyAdi:"SEZER",
    yas:75
  };
  console.log("Merhaba ben " + kisi["adi"] + " " + kisi["soyAdi"] + " yaşım : " + kisi["yas"]);
</script>

Tüm nesne özelliklerine erişim

JavaScript nesnelerine ait tüm özeliklere erişmek için for in döngüsü kullanılabilir.

<script>
  var kisi = { 
    adi:"Yusuf",
    soyAdi:"SEZER",
    yas:75
  };
  for (x in kisi) {
    console.log(x + " " + kisi[x]);
  }
</script>

Nesneye yeni özellik ekleme

Nesneye yeni özellik aşağıdaki gibi eklenebilir.

<script>
  var kisi = { 
    adi:"Yusuf",
    soyAdi:"SEZER",
    yas:75
  };
  kisi.gozRengi = "Siyah";
  for (x in kisi) {
    console.log(x + " " + kisi[x]);
  }
</script>

Nesne özelliğini silme

JavaScript delete anahtar kelimesi nesne özelliğini ve değerini siler.

<script>
  var kisi = { 
    adi:"Yusuf",
    soyAdi:"SEZER",
    yas:75
  };
  delete kisi.yas;
  console.log("Merhaba ben " + kisi.adi + " " + kisi.soyAdi + " yaşım : " + kisi.yas);
</script>

Silinen özellik tekrar eklenmeden kullanılamaz.

NOT: JavaScript’e ait nesneler delete ile silinirse JavaScript kodlarınız çalışmayabilir.

Özellik nitelikleri

JavaScript nesnelerine çeşitli kısıt getirmek için enumerable, configurable ve writable nitelikleri kullanılır.

Bu nitelikler özelliğin döngü ile okunabilir, delete anahtar kelimesi ile silinebilir ve yeni değer atayarak yazılabilir olup olmadığını belirtir.

<script>
  var kisi = {};

  Object.defineProperty(kisi, "adi", {
    enumerable: false,
    configurable: false,
    writable: false,
    value: "Yusuf"
  });

  delete kisi.adi;     // configurable false silinemez

  kisi.adi= "Cenk";  // writable false değiştirilemez

  for (x in kisi) {
    console.log(kisi[x]);    // enumerable false döngü içinde kullanılamaz
  }
</script>

Nesne metotları

Nesne metotları nesne içerisinde gerçekleşecek işlevlerin saklı olduğu fonksiyonlardır.

Nesne metotları fonksiyon tanımını içeren nesne özelliğidir.

ÖzellikDeğer
adiYusuf
soyAdiSEZER
yas75
adiSoyadifunction() {return this.adi + ” ” + this.soyAdi;}

NOT: JavaScript nesne metotlarını nesne özelliği olarak saklar.

Nesneye metot ekleme

Nesneye metot ekleme aşağıdaki gibidir.

metotAdi : function () {  kod bloğu }

Nesne metotlarına erişim

Nesne içerisindeki bir metoda erişim aşağıdaki gibidir.

nesneAdi.metotAdi();

Nesne metoduna erişim örneği aşağıda yer almaktadır.

<script>
  var kisi = { 
    adi:"Yusuf",
    soyAdi:"SEZER",
    yas:75,
    adiSoyad: function() {
      return this.adi + " " + this.soyAdi;
    }
  };
  console.log(kisi.adiSoyad());
</script>

Parantezler () unutulursa JavaScript fonksiyon tanımını döndürür.

<script>
  var kisi = { 
    adi:"Yusuf",
    soyAdi:"SEZER",
    yas:75,
    adiSoyad: function() {
      return this.adi + " " + this.soyAdi;
    }
  };
  console.log(kisi.adiSoyad);
</script>

Nesne kurucusuna metot ekleme

Nesne kurucusuna metot ekleme kurucu fonksiyon içerisinde yapılır.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
    this.adiDegistir = function (yeniAd) {
      this.adi = yeniAd;
    }
}
var mehmet = new Kisi("Mehmet", "SEZER", 45);
var yusuf = new Kisi("Cenk", "SEZER", 75);
console.log(yusuf.adi);  // Cenk
yusuf.adiDegistir("Yusuf");
console.log(yusuf.adi);  // Yusuf
</script>

kisi nesnesi adiDegistir metodu nesnenin sahip olduğu adi özelliğini değiştirmek için kullanır.

Yukarıdaki örnekte; mehmet ve yusuf nesneleri yer almaktadır.

Metot hangi nesnenin değişeceğini metot içerisindeki this anahtar kelimesi ile bilir.

Nesne oluşturma

Nesneler çeşitli şekillerde oluşturulabilir.

  • Sabit değer (literal) ile nesne oluşturma ve tanımlama.
  • new anahtar kelimesi ile nesne oluşturma ve tanımlama.
  • Nesne kurucusu ile nesne oluşturma ve tanımlama.

Ayrıca ECMAScript 5 ile birlikte gelen Object.create fonksiyonu ile nesne oluşturabiliriz.

Sabit değer kullanarak oluşturma

JavaScript nesnesi oluşturmanın en kolay ve hızlı yoludur.

JavaScript sabit değeri (literal) kullanarak nesne oluşturabilir ve tanımlayabiliriz.

JavaScript sabit değer (literal) ile nesne süslü parantezler içerisinde ad:değer çifti ile tanımlanır. (Örn; yas:75)

Aşağıdaki örnekte üç özelliğe sahip kisi nesnesi yer almaktadır.

<script>
  var kisi = {adi:"Yusuf", soyAdi:"SEZER", yas:75};
  console.log("Merhaba ben " + kisi.adi + " " + kisi.soyAdi + " yaşım : " + kisi.yas);
</script>

Nesne özellikleri arasında boşluklar dikkate alınmaz.

Daha okunaklı bir yazım için birden fazla satıra bölünebilir.

<script>
  var kisi = { 
    adi:"Yusuf",
    soyAdi:"SEZER",
    yas:75
  };
  console.log("Merhaba ben " + kisi.adi + " " + kisi.soyAdi + " yaşım : " + kisi.yas);
</script>

new anahtar kelimesi kullanarak oluşturma

Aşağıdaki örnekte üç özelliğe sahip kisi nesnesi oluşturulmuş ve tanımlanmıştır.

<script>
  var kisi = new Object();
  kisi.adi = "Yusuf";
  kisi.soyAdi = "SEZER";
  kisi.yas = 75;
  console.log("Merhaba ben " + kisi.adi + " " + kisi.soyAdi + " yaşım : " + kisi.yas);
</script>

JavaScript sabit değer (literal) kullanarak oluşturma ve new anahtar kelimesi ile oluşturma aynı sonucu verecektir.

Basitlik, okunabilirlik ve daha hızlı çalışması bakımında sabit değer (literal) kullanmanızı tavsiye ederim.

Nesne kurucusunu kullanarak oluşturma

Sabit değer (literal) ve new anahtar kelimesi ile sadece bir nesne oluşturulur.

Bazen bir nesnenin birden fazla kopyasını oluşturmak isteyebiliriz.

Bir nesneden birden fazla kopyasını oluşturmak için nesne kurucusunu kullanarak nesne oluşturma kullanılır.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
}
var yusuf = new Kisi("Yusuf", "SEZER", 75);
var mehmet = new Kisi("Mehmet", "SEZER", 45);
</script>

Yukardaki kisi fonksiyonu bir nesne kurucusudur.

Nesne kurucusu ile bir nesnenin birden fazla kopyasını oluşturabilirsiniz.

<script>
var cenk = new kisi("Cenk", "YILMAZ", 30);
var selim = new kisi("Selim", "AKSOY", 29);
</script>

JavaScript this anahtar kelimesi

JavaScript nesne kurucusu içindeki this anahtar kelimesi nesne özellik ve fonksiyonlarına erişim için kullanılır.

Nesne kurucu fonksiyonunun dönüş değeri this anahtar kelimesi kullanılırsa dönüş değeri nesnenin kendisi olur.

JavaScript this değişken değildir.

Anahtar kelimedir.

Değeri değiştirilemez.

JavaScript kurucuları

JavaScript çeşitli nesne kurucularını barındırır.

<script>
  var x1 = new Object();   // Yeni Object nesnesi
  var x2 = new String();   // Yeni String nesnesi
  var x3 = new Number();   // Yeni Number nesnesi
  var x4 = new Boolean();  // Yeni Boolean nesnesi
  var x5 = new Array();    // Yeni Array nesnesi
  var x6 = new RegExp();   // Yeni RegExp nesnesi
  var x7 = new Function(); // Yeni Function nesnesi
  var x8 = new Date();     // Yeni Date nesnesi
</script>

JavaScript Math nesnesinin özellik ve fonksiyonları global olduğundan new anahtar kelimesi ile oluşturulmaz.

Sabit değer (literal) kullanmak

JavaScript içerisindeki değer alabilen her şey new anahtar kelimesi ile oluşturulabilir.

Ancak new anahtar kelimesi karmaşık ve yavaş çalışır.

Dizi oluştururken new Array() yerine [] sabit değeri (literal) kullanılabilir.

Düzenli ifade oluştururken new RegExp() yerine /()/ sabit değeri (literal) kullanılabilir.

Fonksiyon oluştururken new Function() yerine function() {} sabit değeri (literal) kullanılabilir.

Nesne oluştururken new Object() yerine {} sabit değeri (literal) kullanılabilir.

<script>
  var x1 = {};            // Yeni object
  var x2 = "";            // Yeni temel string türü
  var x3 = 0;             // Yeni temel number türü
  var x4 = false;         // Yeni temel boolean türü
  var x5 = [];            // Yeni array nesnesi
  var x6 = /()/;          // Yeni regexp nesnesi
  var x7 = function() {}; // Yeni function nesnesi
</script>

JavaScript nesne değerleri değiştirilebilir

JavaScript nesnesi bir değişkene atandığında değişken artık nesnenin bellek adres bilgisini tutar.

Aşağıdaki örnekte x değişkeni kisi nesnesini kopyalamaz, kisi nesnesinin bellek adres bilgisini tutar.

<script>
  var kisi = {adi:"Yusuf", soyAdi:"SEZER", yas:75};
  var x = kisi;
</script>

Yukardaki tanımda kisi nesnesi ve x nesnesi aynı bellek alanını işaret eder.

x değişkeni ile yapılan değişiklik kisi nesnesini etkiler.

<script>
  var kisi = {adi:"Yusuf", soyAdi:"SEZER", yas:75};
  var x = kisi;
  x.yas = 30;
  console.log(kisi.yas);  // 75 mi 30 mu?
</script>

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Facebook
Linkedin
X
WhatsApp
Telegram
E-Posta ile paylaş
Yazdır

Bunlarda ilgini çekebilir

LinkedIn grubuna buradan katılın.