29 Ağustos 2018 Çarşamba

JavaScript class tanımlamanın 3 yolu

By Berkay 14:15 JavaScript Leave a Comment

Syntax'ı göz önünde bulundurduğumuzda JavaScript, nesne yönelimli programlamada ciddi bir esneklik sağlamaktadır. Bu yazıda JavaScript'te sınıf oluşturmanın 3 yolundan bahsedeceğim. 3 yöntemi de gördükten sonra hangisini kullanmanız gerektiğine karar verebilirsiniz.

Her ne kadar class tanımlama olarak bahsedilse de JavaScript'te genel olarak bir class yapısı yok. Her şey nesnelerden oluşuyor. Nesnelerden başka nesneler türetiliyor. Diğer OOP dilleri gibi classlardan class türetme olayı yok.

1) Fonksiyonlar kullanma

En çok kullanılan yöntemlerden bir tanesi bu. Normal bir JavaScript fonksiyonu tanımlanır ve new keyword'ü kullanılarak yeni bir nesne oluşturulur. Property ve metot'lar fonksiyon oluşturulurken belirtilir. this komutu kullanılır.

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
}

var araba = new Araba('Audi');
alert(araba.marka + ' ' + araba.model + ' ' + araba.yil);

Yukarıdaki örnekte Araba class'ından bir nesne türettik ve bilgilerini ekranda gösterdik. Peki Araba class'ına ait, bilgileri gösteren bir metot tanımlamak istersem ne yapmam gerekir?

Bunun için kullanabileceğim 2 yöntem var. Birincisi fonksiyon (class) içinde metodu tanımlamak. İkincisi ise prototype eklemek.

1.1) Class içinde metodu tanımlamak

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
 this.bilgileriGetir = function() {
  return this.marka + ' ' + this.model + ' ' + this.yil;
 };
}

var araba = new Araba('Audi');
alert(araba.bilgileriGetir());

1.2) Prototype eklemek

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
}

Araba.prototype.bilgileriGetir = function() {
 return this.marka + ' ' + this.model + ' ' + this.yil;
};

var araba = new Araba('Audi');
alert(araba.bilgileriGetir());

2) Object Literal Kullanımı

Object literal'ler kısa yoldan dizi ya da nesne tanımlamaya imkan sağlar. Boş bir nesne aşağıdaki gibi oluşturulabilir.

var nesne = {};

Dizi tanımlama

var dizi = [];

Fonksiyon olarak tanımladığımız class'ı şimdi literal kullanarak tanımlayalım.

var araba = {
  marka: "Audi",
  model: "Q7",
  yil: 2018,
  bilgileriGetir: function() {
   return this.marka + ' ' + this.model + ' ' + this.yil;
  }
 }

 alert(araba.bilgileriGetir());

3) Singleton fonksiyon kullanımı

Son yöntem, önceki iki yöntemin kombinasyonu gibi. Singleton nesne tanımlamak için yine fonksiyon kullanıyoruz.

var araba = new function() {
 this.marka = "Audi",
 this.model = "Q7";
 this.yil = 2018;
 this.bilgileriGetir = function() {
  return this.marka + ' ' + this.model + ' ' + this.yil;
 }
}

alert(araba.bilgileriGetir());