Javascript’de class tanımlama ve diğer class işlemleri

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’de class tanımlama ve diğer class işlemleri

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.

Class ve Function Tanımı ve Kullanım Farklılığı

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.

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.

Kaynaklar

Tarayıcı Desteği

 API    
 Web Workers 49.0 13 45 Desteklemiyor 9.0 Desteklemiyor
Javascript’de class tanımlama ve diğer class işlemleri
5 (100%) 2 oy

Bunlar da hoşunuza gidebilir...

6 Cevaplar

  1. Cem dedi ki:

    Tesekkurler cok guzel anlatmissiniz, umarim biraz daha derinlere girerek devami gelir.

    • Murat ÖNER dedi ki:

      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.

  2. Mazlum dedi ki:

    Teşekkürler, çok daha fazla makale bekliyoruz.

  1. 13 Nisan 2018

    […] Bu konuda herhangi bir örnek yapmayacağım nedeni ise daha önce javascript’de class işlemleri ile alakalı detaylı bol örnek kodlu bir makalem yer alıyor o makaleyede Javascript’de class tanımlama ve diğer class işlemleri […]

  2. 30 Nisan 2018

    […] Gif Source: Javascript_muratoner […]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.