JavaScript ES6 Classes

JavaScript EcmaScript 6 ile birlikte gelen ve Nesne Yönelimli Programlama yapmayı kolaylaştıran class yapısı ile ilgili bilgiler yer alıyor.

JavaScript ile Nesne Yönelimli Programlama yöntemlerini kullanmak çok çok zor ve zahmetliydi.

Değişken güvenliği, belleği en iyi şekilde kullanmak en basit bir kaç sorundu.

EcmaScript 6 ile gelen class yapısı sayesinde bu sorunların çoğu geride kaldı diyebiliriz (Halen ES6 desteklemeyen tarayıcılar var).

JavaScript ile nesne tanımlama işlemini şöyle yapıyorduk.

<script>
  "use strict";
  var Shape = function (id, x, y) {
    this.id = id;
    this.move(x, y);
  };
  Shape.prototype.move = function (x, y) {
    this.x = x;
    this.y = y;
  };
</script>

Bir fonksiyonu nesne kurucusu olarak belirliyor ve nesne içerisinde kullanılacak değişkenleri tanımlıyorduk.

Belleğin verimli kullanılması için nesne kurucusu prototype özelliğine metotları yazıyor ve böylece bir nesne sınıfı oluşturmaya çalışıyorduk.

Artık şöyle bir yapı kullanabiliriz.

<script>
  "use strict";
  class Shape {
    constructor (id, x, y) {
      this.id = id
      this.move(x, y)
    }
    move (x, y) {
      this.x = x
      this.y = y
    }
  }
</script>

class anahtar kelimesi sonrası sınıfının adını verip.

Kurucu metodu class kod bloğu içerisinde constructor ile yazıyorum.

Nesneye ait diğer metotları yine kod bloğu içerisine yazabiliyorum.

Önceki örneğe göre class yapısı daha okunaklı ve anlaşılır bir yapı sunuyor.

Nesneden kalıtım almak

Bunu önceden nasıl yaptığımızı burada anlatmaya hiç gerek yok JavaScript Kalıtım Almak yazımdan bakabilirsiniz.

Nesneden kalıtım almak için elli takla atıyorduk. 🙂

Artık bu işlemi artık class yapısı extends anahtar kelimesi ile yapabiliriz.

<script>
  "use strict";
  class Shape {
    constructor (id, x, y) {
      this.id = id
      this.move(x, y)
    }
    move (x, y) {
      this.x = x
      this.y = y
    }
  }
  class Rectangle extends Shape {
    constructor (id, x, y, width, height) {
      super(id, x, y)
      this.width  = width
      this.height = height
    }
  }
  class Circle extends Shape {
    constructor (id, x, y, radius) {
      super(id, x, y)
      this.radius = radius
    }
  }
</script>

Örnekte görüldüğü gibi sadece extends anahtar kelimesini kullanarak kalıtım alabiliyoruz.

Ayrıca super metodu dikkatinizi çekmiştir.

Bu metot kalıtım alınan sınıfın kurucusuna parametre geçirmek için kullanılır.

Bir nesne sınıfından kalıtım alıyorsak super metodunu eklemek zorundayız.

super anahtar kelimesini kullanarak kalıtım alınan nesneye ait metotlara ve özelliklere erişebiliriz.

<script>
  "use strict";
  class Animal {
    constructor(name) {
      this._name = name;
    }
    hello() {
      return "Hello JavaScript";
    }
  }
  class Cat extends Animal {
    constructor(name) {
      super(name);
    }
    helloAlert() {
      alert(super.hello());
    }
  }

  var vCat = new Cat("Tom");
  vCat.helloAlert();
</script>

Cat nesne sınıfı helloAlert metodu super.hello metodunu kullanarak kalıtım alınan Animal nesnesine ait hello metodunu çalıştırmaktadır.

Sınıf içerisindeki bir metoda dışarıdan erişime açmak için metodun önüne static anahtar kelimesini eklemek yeterli olacaktır.

<script>
  "use strict";
  class Animal {
    constructor(name) {
      this._name = name;
    }
    static hello() {
      console.log("Hello JavaScript");
    }
  }

  Animal.hello(); // dışardan erişim
</script>

Artık Animal isimli nesne sınıfını new anahtar kelimesiyle çoğaltmadan hello metoduna dışardan erişebiliriz.

Kurucu metot içerisinde tanımlanmış olan değişkenlere dolaylı değer atamak ve değişken değerlerini okumak için get ve set metotlarını kullanabiliriz.

<script>
  "use strict";
  class Animal {
    constructor(name) {
      this._name = name;
    }
    get Name() {
      return "Hello " + this._name;
    }
    set Name(newValue) {
      this._name = newValue;
    }
  }
var vAnimal = new Animal("Tom");
console.log(vAnimal.Name);

vAnimal.Name = "Boncuk";
console.log(vAnimal.Name);
</script>

Dolaylı olarak değer atamak istediğimiz metodun önüne set değer okumak için ise get anahtar kelimesini yazmak yeterli olacaktır.

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.