Javascript Class Nedir? Nasıl Tanımlanır ve Kullanılır?

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?

Javascript Background

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ı

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.

2017 04 09 18 28 45

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.

2017 03 26 21 55 00

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.

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.

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.

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ı


Javascript Class Tarayıcı Desteği

 API  
 Temel Destek49.01345Desteklemiyor9.0Desteklemiyor

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.

5/5 - (6 votes)

Murat Öner sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya devam et