Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ES6

ECMAScript 6 Power Tutorial: Class and Inheritance

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called ECMAScript 6 Power Tutorial.
ECMAScript 6 Power Tutorial: Template Strings
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Turkish (Türkçe) translation by Emre Özdemir (you can also view the original English article)

Sizinle, ECMAScript 6 makaleleri ve sizin için nasıl çalışacağına dair bir seri paylaşmak istiyorum. Umarım bunları okurken, benim yazarken eğlendiğim kadar eğlenirsiniz.

Öncelikle, ben Microsoft' ta Microsoft Edge için browser rendering engine üzerinde çalışıyorum.  Microsoft Edge' de benim favori özelliğim pek çok ECMAScript 6' yı desteklemesi Bana olan faydasını, çok büyük web uygulamaları yazarken görüyorum.

Pek yakında ECMAScript 6' nın özelliklerinin %70' ine Microsoft Edge sahip olacak. http://kangax.github.io/compat-table/es6/ adresinde de görebileceğiniz üzere. Keza ES6 on dev.modern.ie/platform/status adresinden de inceleyebilirsiniz.

Table of ECMAScript 6 features on Microsoft Edge

Javascript' i seviyorum, ama Babylon.js gibi büyük projeler üzerinde çalışmaya gelince TypeScript' i tercih ediyorum. Hani şuan Angular 2' in yazılmasında kullanılan. Bunun sebebi JavaScript' in (ECMAScript 5 olarakta bilinir) büyük projelerde kullandığım diğer dillerdeki syntax özelliklerinin tümüne sahip olmaması. Instance elde etmek için Class' lar ve miras alma yapısını özlüyorüm.

Evet daha fazla laklak yapmadan konuya girelim.

Class yaratmak

JavaScript prototype-oriented bir dildir ve Class' ları, miras alma yapısını simule etmek ECMAScript 5 ile mümkündür.

JavaScript' teki fonksiyonların esnekliği bize class yapısında çalışabilmemiz için, encapsulation' ı simule etmemize izin vermektedir.  Bu takla atma imkanı ile bir objenin protipini geliştirebiliyoruz.

Bu örnekte, özellikleri ve metodları ile birlikte bir class yarattık. Sizinde farkedeceğiniz üzere tam bir class değil, ama yukarıda konuştuğumuz üzere, bir class' ı simule ettik.

Constructor, özellikleri değerlediğimiz kendi Animal fonksiyonu ile birlikte tanımlandı. Prototype' ı kullanarak, instance methodları gibi işlev gösterecek fonksiyonlar tanımlayabiliriz.

Herşey yolunda gitmektedir ama class bazlı diller ile çalışanlar için biraz karmaşık gelebilmektedir. Açıkçası JavaScript class keyword' üne sahip fakat yaptığı hiçbir şey bulunmuyor. ECMAScript 6 ise bunu çalışır hale getiriyor ve daha az kod yazmaya imkan veriyor.

Sonuç her ikisinde de aynı fakat bu şekilde yazmak ve okumak, class yazan geliştiriciler için daha kolay. Prototype' a gerek yok ve constructor tanımlamak için new keyword' ünü kullanabilirsiniz.

Ayrıca, class' lar ECMAScript 5' te sunulmayan sayısız yeni semantiğide barındırıyor. Örnek olarak, bir constructor' ı new keyword' ü olmadan çağıramazsınız ve construct methodlara new ile giriş yapamazsınız. Bir diğer değişiklik ise, methodlar non-enumerable(sıralanamaz) yapıdadır.

Burada ilginç olan nokta: Her iki versiyonda kısım kısım çalışmaktadır.

Günün sonunda, new keyword' leri ile bir fonksiyon prototipliyorsunuz.  Method dediğimiz burda objenin bir fonksiyon özelliğidir.

Class-based (class bazlı) geliştirmenin 2 ana özelliğinden olan getters ve setters ES6 da desteklenmektedir. Bu, method denilen şeyin nasıl bir yapıda olması gerektiğini daha açıklar nitelikte:

Daha elverişli, değil mi? 

Fakat burada JavaScript' e dair genel bir uyarı görüyoruz ki private üyeler(_age) "gerçekten private değil" Bu konuda kısa süre önce bir konu açmıştım.

Neyseki artık, ECMAScript 6: symbols özelliği ile bunu yapmanın daha iyi bir yoluna sahibiz.

Ee peki Symbol nedir? Obje özelliklerini tanımlamada kullanılabilecek tekil ve değişmez bir data çeşididir. Eğer sembol'e sahip değilseniz, özelliğe erişemezsiniz.

Bu durum, "private" üyelere erişimi daha gerçekçi kılar.  

En nihayetinde, daha kolay erişilebilir hale geliyor. Semboller, isimlendirmelerdeki tekillik açısından çok kullanışlı fakat tekillik, gizlilik anlamına gelmiyor. Tekillik en basit anlamda, herhangi bir key yaratırken, bir başka key' in ismiyle çakışmamasını sağlamaktır, Bunun için yeni bir sembol yaratırız.

Fakat bu gerçekten bir gizlilik sağlamıyor, Object.getOwnPropertySymbols metodu ile tüm ziyaretçiler, tüm sembollerinizin özelliklerine erişebilirler.

2. Miras yapısını ele alma

Artık class' ımız olduğuna göre, miras'a da sahip olmak isteyeceğiz. Miras konusu şimdiye kadar, possible to simulate inheritance in ES5 adresinde anlatıldığı üzere simule edilebilir birşey di, fakat biraz kompleks bir yapıydı.

Burada, TypeScript ile simule edilen bir miras yapısı var.

Kodun okunabilirliği gerçekten kolay değil.

Ama yukarıdaki kodun ECMAScript 6 daki alternatifi daha kolay.

extends keyword' üne teşekkürlerimizi sunmalıyız ki, super keyword' ü ile root class' a atanan referansı korur iken, bir class' ı, child class' ın içinde kullanabiliyoruz.

Tüm bu yenilikler ile birlikte, artık class lar yaratabilir, miras yapısı ile prototype büyüsüne ihtiyaç duymadan çalışabiliriz.

3. TypeScript ile çalışmak artık neden öncesine göre daha uygun hale geldi

Tüm bu yenilikler tarayıcılarımız tarafından desteklenir hale geldikten sonra bana kalırsa JavaScript kodunu generate etmek için TypeScript' i kullanmak daha uygun olacaktır.

Öncelikle, TypeScript (1.4) versiyonu ECMAScript 6 (let ve const keyword' ü ile) ya destek vermeye başladı, bu sebeple tek yapmanız gereken var olan TypeScript kodunuzun üzerine yeni seçenekleri aktif etmek ve ECMAScript 6 kodu generate etmek.

Ama TypeScript' e biraz daha yakından bakarsak şunu göreceğiz ki TypeScript, ECMAScript 6' nın tipler olmayan hali olarak gözüküyor. Bu şu demek oluyorki, bugün TypeScript' i öğrenmek, yarın ECMAScript 6' yı anlamak için en iyi yoldur.

Şöyle özetleyebiliriz

TypeScript kullanmak, kodunuz şu tarayıcılarda kullanılmakta olan ECMAScript 5 (JavaScript' in aktüel versiyonu)' e çevrilirken, tüm tarayıcılarda çalışabilir şekilde, yukarıda bahsettiğimiz özellikleri kullanarak kod yazabilmektir. Eğer ki direk olarak tarayıcınızda ECMAScript 6 kullanmak istiyorsanız, işletim sisteminizi Windows 10' a upgrade etmeli ve Microsoft Edge' in render engine' i test edebilirsiniz.

Eğer sadece tarayıcının yeni özelliklerini denemek için bu yolu tercih etmiyorsanız, Microsoft Edge ile birlikte Windows 10 bir bilgisayara remote.modern.ie adresinden erişim sağlayabilirsiniz. Bu alternatif ayrıca Mac OS ve Linux cihazınızda da çalışmaktadır.

Tabiki Microsoft Edge, ES6 standartlarını destekleyen tek tarayıcı değil. Diğer tarayıcılarda sahneye çıkmıştır, http://kangax.github.io/compat-table/es6/ adresinden detaylı bilgiyi elde edebilirsiniz.

JavaScript' in ECMAScript 6 ile birlikte geleceği çok parlak, ve bunu tüm modern tarayıcılarda görmek için sabırsızlanıyorum!

Bu makale Microsoft' tan web dev tech serisinin bir parçasıdır. Microsoft Edge ve yeni EdgeHTML rendering engine i sizlerle paylaşmaktan dolayı büyük heyecan duyuyoruz. Ücretsiz sanal makinalar edirnmek için yada Mac, iOS, Android yada Windows cihazınız üzerinde uzaktan test yapabilmek için http://dev.modern.ie/ adresini ziyaret edebilirsiniz.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.