Javascript Class, Typescript kullanarak kolaylıkla OOP prensiplerini kullanabiliyoruz fakat yavaş yavaş OOP yazmak için Typescript gibi herhangi bir tool’a gerek kalmayacak gibi gözüküyor bu makalemizde javascript’de nasıl class tanımlarız ve diğer class işlemleri nelerdir, nasıl yapılır gibi sorulara cevap bulacağız.
Javascript Class Nedir? Nasıl Tanımlanır ve Kullanılır?
ES6 ile beraber kodlama hayatımıza giren javascript’de class tanımlama ile OOP javascript için daha okunaklı kod yazmamıza yardımcı olacak bir adım daha atılmış oldu. Eğer typescript kullanıcısı iseniz zaten ben kullanıyorum Typescript’de diyebilirsiniz fakat biliyorsunuzki typescript’de OOP yazdığımız tüm kodlamalar javascript’de karşılığı ne ise ona çevriliyor daha önce bir class tanımı için compile sonrasında function’lardan faydalanarak bir class tanımı ortaya çıkarılıyordu fakat bundan sonra typescript’de class tanımlarımız compile edilirkende class tanımlı olarak compile edilecektir(Eğer TypeScript target’i es6 olarak seçildi ise bu söylenenler geçerli). Fakat bir durum kesinlikle unutulmamalıdır kullanacağınız projenin çok eski versiyon tarayıcılarla çalışan bir müşterileri var ise önerilmemektedir nedenini ise alttaki tabloda kolayca görebilirsiniz.
Yavaş yavaş class tanımlarının nasıl yapıldığına nasıl kullanılabildiğine ve neler yapabildiğimize gözatalım. Örneklerimizde Person sınıfı üzerinden ilerleyeceğiz.
Class Tanımı ve Constructor Kullanımı
1 2 3 4 5 6 | class Person { constructor(name, surname){ this.name = name; this.surname = surname; } } |
Not: Bir class içerisinde bir tane constructor tanımlanabilir üstteki kodda tanımlandığı gibi constructor‘dan almak zorunda değilsiniz verileri. constructor‘dan herhangi bir parametre alınmadığını varsayalım o zaman this.name = “” gibi bir tanımlama ile name alanını tanımlamış ve varsayılan olarak bir değer set etmiş oluruz. Eğer constructor bir method içerisinde parent bir class içerisinde tanımlı olan constructor‘u çağırmak istiyorsak o zaman super() şeklinde bir kullanımla ilgili çağrı işlemini gerçekleştirmiş oluruz.
Bir class tanımı yapılmadan önce ilgili class’dan örnek alınamaz fakat function tanımından önce ilgili function’u kullanabiliyorduk.
1 2 3 | var person = new Person(); // ReferenceError class Person {} |
Class Tanımlama Sözdizimleri
Class tanımı named(isimli) ve unnamed(isimsiz) olarak yapılabilmektedir. İkisi arasındaki fark unnamed tanımlı class’ların gövdesi değişken adı ise belirleniyor yani person1 class’ın gövde ismi olarak ayarlanıyor. Fakat person2 değişkenine named yöntemi ile class tanımı yapılmıştır böylelikle new person2 dediğinizde gövde isminin Person olduğunu görebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // unnamed var person1 = class { constructor(){ this.name = "Murat"; this.surname = "Öner"; this.age = 26; } } // named var person2 = class Person { constructor(){ this.name = "Murat"; this.surname = "Öner"; this.age = 26; } } |
Method tanımlama
Function tanımlamadan tek farkı function önekinin method tanımında yer almayışıdır direk metod adı girerek gerekli tanımlama işlemini yapabilirsiniz altta bununla ilgili fullName adında bir method tanımı yer almaktadır. fullName adındaki metodumuzun işlevi ise name ve surname adındaki property‘leri birleştirip geriye döndürmektir.
1 2 3 4 5 6 7 8 9 10 11 | class Person { constructor(){ this.name = "Murat"; this.surname = "Öner"; this.age = 26; } fullName(){ return `${this.name} ${this.surname}`; } } |
Static Metod Tanımı
Her programlama dilinde yer alan ve OOP‘un vazgeçilmezlerinden biri olan class nesnemiz içerisindeki bazı metod yada property‘leri static tanımlayarak sınıf örneği almadan kullanabiliyoruz aynı durum şimdi javascript‘deki oluşturduğumuz class‘lar içinde geçerlidir. static belirteci sadece metod’lar için geçerlidir. Böylelikle new Person() diye herhangi bir örnek almadan Person.test() şeklinde static metodlara erişebiliyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | class Person { constructor(){ this.name = "Murat"; this.surname = "Öner"; this.age = 26; } fullName(){ return `${this.name} ${this.surname}`; } static test(){ return "Static test metodu"; } } |
Extends Anahtar Kelimesi ve super Metodu
OOP programlama dillerinde inherit, extends, implements v.b kavramlar olmazsa olmazlardır ve en az birinizi kullandığınızı veya en azından duyduğunuzu umuyorum. Makalemizde class‘ları geliştirmek için extends anahtar kelimesini kullanacağız bu örneğimizde Staff adında bir sınıf oluşturacağız ve bu sınıfı Person sınıfından extends edip geliştireceğiz.
Alttaki örnek kodumuzda göreceğiniz gibi Staff adlı sınıf Person adlı sınıftan extends anahtar kelimesi ile geliştirmek için ilk adımı atmış oluyoruz. Staff class’ımıza özel olarak salary adlı bir property tanımlıyoruz ve super adlı global metodunu kullanarak parent‘daki constructor, property ve metodların tümüne ulaşabiliriz. Biz bu örneğimizde parent‘daki constructor’a super metodu ile erişip name, surname ve age değerlerini set ediyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | class Person { constructor(name, surname, age){ this.name = name; this.surname = surname; this.age = age; } fullName(){ return `${this.name} ${this.surname}`; } } class Staff extends Person { constructor(name, surname, age, salary){ this.salary = salary; super(name, surname, age) } } |
Elimden geldiğinde anlaşılır bir şekilde yazmaya çalıştım bu makaleyi ve hareketli görseller ile anlaşılmasını dahada kolaylaştırmak istedim. Tüm öneri ve görüşlerinizi yorum kısmından yazabilirsiniz.
Javascript Class Kaynakları
- https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Classes
- http://learnangular2.com/es6/classes/
Javascript Class Tarayıcı Desteği
API | ||||||
Temel Destek | 49.0 | 13 | 45 | Desteklemiyor | 9.0 | Desteklemiyor |
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
Teşekkür ederim static kavraminin ne işe yaradığını araştırıyordum çok yardımcı oldu.
js de Bir class içersinde iki adet fonskiyondan biri diğerini çağırabilirmi
Evet, çağırabilirsiniz
Çok sağol.. 🙂 Biliyormunuz diye merak ettim de..
😊
Videodaki hangi editör ?
Merhaba,
Videoda yer alan editör Google Chrome’a ait DevTools editörüdür.
Teşekkürler
Teşekkürler, çok daha fazla makale bekliyoruz.
İnşallah devamı gelecek bu konu ile alakalı. Listemde bu konu ile alakalı yazılacak makaleler arasında yer alıyor.
Tesekkurler cok guzel anlatmissiniz, umarim biraz daha derinlere girerek devami gelir.
Görüşünüz için ben teşekkür ederim. Elimden geldiğinde yazmış olduğum makaleleri sürekli güncel tutmaya çalışıyorum yeni deneyimlerim sonucunda bu makaleyide güncel tutacağım ve javascript heyecanlandığım bir dünya olduğu için bu konuda yeni daha çok makale gelecek.