Sezer Yeşiltaş Blog

Object Oriented Javascript

Günümüz web uygulamalarının geliştirme diline artık html demek yeterli olmuyor. Herhangi  bir web sitesi için bile  javascript kullanımı kaçınılmaz olmaya başladı. Internetin devleri de javascript üzerine müthiş yatırımlar yapmaya başladılar.

HTML5′in de getirdiği yenilikler sayesinde bir masaüstü programı deneyimini javascript ile karşılamak artık neredeyse mümkün hale geldi. Ayrıca birçok mobil platform da javascript ile mobil uygulamalar geliştirmeye olanak sağlamaya başladı. Hepsinden önemlisi, yakında browser tabanlı işletim sistemleri hayatımıza girdiğinde, kaliteli uygulama ihtiyacını bu dile hakim olanlar sağlayabilecek.

Javascript, her ne kadar isminin içinde script geçiyor olsa da artık varlığını ve geleceğini kanıtlamış önemli bir dil durumunda.

Bazen sitelerin source’una bakıp yazılan javascript kodunu incelediğimde, yeteneklerine rağmen kendisine gerekli özenin gösterilmediği bir kenar mahalle çocuğu izlenimi yaratıyor bende.

Web siteleri için belki uzmanlaşmış bir javascript bilgisine ihtiyaç duyulmuyor ama kopleks bir web uygulaması geliştirilecekse kodun kalitesi önem kazanıyor. Kodun kalitesi ise açıkçası o dile olan hakimiyete göre değişiyor.

Ana konuya geri dönersek, Javascript yapısal bir dil gibi görünmekle beraber istenirse objeye dayalı programlamaya da olanak veriyor. Ben de javascript objeleri ve yetenekleri ile ilgili bir kaç örnek ve bilgi vermek üzere aşağıdaki yazıyı hazırladım.

Javascript Objesinin Özellikleri

• field (property) ve method’lardan oluşmakta.
• constructor içerebilmekte.
• method veya field’ları override edilebilmekte.
• objeleri extend edilebilmektedir.

Array,String,Number,Boolean gibi objeler native olarak kullanabildiğimiz javascript objeleridir. Kullanımı ise şu şekildedir:

text = new String("Merhaba"); //Obje yaratma
i = text.indexOf("h); //Method çağırma
len = text.length;  //Field okuma

Kendi javascript objemizi nasıl tanımlayabiliriz.
Üç adet yöntem kullanılabiliyor.

Bir tanesi JSON formatı, örnek vermek gerekirse:

var StaticPeople = {
		name : "Erkan",
		setName : function(name){this.name=name},
		getName : function(){return this.name}
	};

Bu bir static objedir. Görüldüğü üzere her method bir fonksiyon olarak tanımlıdır. Fieldları okuyabilir ve değiştirebilirsiniz:

alert(StaticPeople.name);
StaticPeople.setName("sezer");
alert(StaticPeople.getName());

var StaticPeople2 = new Object();
StaticPeople2.name = "Erkan";
StaticPeople2.getName = function() {return this.name;}
StaticPeople2.setName = function(name) {this.name=name;}

Bu da bir static objedir. Burdaki Kullanımı JSON ile aynıdır.

function People(name) {
	this.name = name;
	this.getName = function() {return this.name;}
	this.setName = function(name) {this.name=name;}
}

Aslında yaptığımız basit bir fonksiyon tanımı gibi görünüyor ama aslında burada bir obje tanımı yaptık, bir constructor tanımı yaptık, objeye bir field, iki de method tanımladık. Kullanımı ise şu şekilde:

people = new People("Erkan");
alert(people.getName());
people.setName("Sezer");
alert(people.getName());
 
people2 = new People();
alert(people2.getName());
people2.setName("Sezer");
alert(people2.getName());

Burada görüldüğü üzere iki farklı constructor kullanılmasına rağmen sadece bir constructor tanımladık.

• Aynı isimde (constructor parametreleri farklı da olsa) birden fazla obje tanımı yapamıyoruz.
• Javascript objelerinin tüm field ve method’ları public’tir. Tanımladığınız objenin tüm field ve method’ları erişime açıktır.

Bir javascript objesine field ve method ekleme.
People objesini ilk tanımladığımızda name adınde bir field’ı ve bunun setter ile getter’ı vardı. Bu objeye surname ve onun setter/getter’ını eklemek istiyoruz, yazacağımız kod:

People.prototype.surname;
People.prototype.setSurname = function(surname){this.surname=surname;}
People.prototype.getSurname = function(){return this.surname;}

Burada kendi yarattığımız objemizi dinamik olarak extend etmiş olduk. Eğer static bir objeye field ve method eklenecekse:

StaticPeople.surname;
StaticPeople.setSurname = function(surname){this.surname=surname;}
StaticPeople.getSurname = function(){return this.surname;}

Bir javascript objesini extend etme.
Yeni bir obje (sub class) tanımı yapıp mevcut bir objeyi’ı (super class) extend edebiliyoruz. Mesela yukarıda tanımladığımız People objesini extend eden bir Customer objesi tanımı yapalım:

function Customer(){
	this.inheritFrom = People;
	this.inheritFrom();
	this.customerId;
	this.getCustomerId=function(){return this.customerId;}
	this.setCustomerId=function(customerId){this.customerId=customerId;}
}

Son olarak Javascript’in native Objelerine de dinamik olarak method ve field edilebildiğinden ve methodlarının override edilebildiğinden bahsetmek istiyorum.

String objesine Method ekleme:
Mesela bir string’e alert adında bir method ekleyelim:

String.prototype.alert = function () {alert(this)};
var mesaj = "Bu bir mesajdir..";
mesaj.alert();

String objesinin bir methodunu Override etme:
Bu örnekte de string’in indexOf methodunu override ediyoruz:

String.prototype.indexOf = function () {return "yedi"};
var mesaj = "Bu bir mesajdir..";
alert(mesaj.indexOf("m"));