JavaScript Kalıtım Almak

JavaScript ile OOP veya Nesne Yönelimli Programlama ile geliştirme sırasında kalıtım almak için kullanılan yöntemler yer alıyor.

İki ayrı nesnenin özellik ve metotlarını bir nesneye toplama işlemine kalıtım almak veya miras alma olarak geçmektedir.

JavaScript kalıtım alma diğer kalıtım alma desteği sunan yazılım dillerinden farklıdır.

JavaScript ile kalıtım almak için kullanılan çeşitli yöntemler vardır.

Constructor stealing – Kurucu çağırma

Bu yöntemde kalıtım alacak nesne, kalıtım alınacak nesnenin kurucusunu call veya apply metodunu kullanarak çağırır.

<script>
"use strict";
  function Hayvan() {
    this.renk = ["siyah", "beyaz"];
  }
  function Kedi() {
    Hayvan.call(this);     // Constructor stealing - Yapıcı çalma
    //Hayvan.apply(this);  // Constructor stealing 
  }

  var vKedi = new Kedi();
  vKedi.renk.push("sarı");
  console.log(vKedi.renk);  // siyah, beyaz, sarı

  var wKedi = new Kedi();
  console.log(wKedi.renk);  // siyah, beyaz
</script>

Kedi nesnesi renk isminde değişkene sahip olmadığı halde Hayvan nesnesinden kalıtım alarak Kedi nesnesinde kullandık.

Parametre göndermek

Kalıtım alınan nesnenin kurucusuna parametre göndermek isteyebiliriz.

<script>
"use strict";
  function Hayvan(a) {
    this.ad = a;
  }
  function Kedi() {
    Hayvan.call(this, "Tekir");       // Constructor stealing - Yapıcı çalma
    //Hayvan.apply(this, ["Tekir"]);  // Constructor stealing - Yapıcı çalma

    this.renk = "Sarı";
  }

  var vKedi = new Kedi();
  console.log(vKedi.ad);    // Tekir
  console.log(vKedi.renk);  // Sarı
</script>

veya

<script>
"use strict";
  function Hayvan(a) {
    this.ad = a;
  }
  function Kedi(adi) {
    Hayvan.call(this, adi);       // Constructor stealing - Yapıcı çalma
    //Hayvan.apply(this, [adi]);  // Constructor stealing - Yapıcı çalma

    this.renk = "Sarı";
  }

  var vKedi = new Kedi("Boncuk");
  console.log(vKedi.ad);    // Boncuk
  console.log(vKedi.renk);  // Sarı
</script>

Bu yöntem ile nesne kurucusu içindeki özellik ve metotlar kalıtım alınır.

<script>
"use strict";
  function Hayvan(a) {
    this.ad = a;
  }
  Hayvan.prototype.adiNe = function() {
    return this.ad;
  }
  function Kedi(adi) {
    Hayvan.call(this, adi);       // Constructor stealing - Yapıcı çalma
    //Hayvan.apply(this, [adi]);  // Constructor stealing - Yapıcı çalma

    this.renk = "Sarı";
  }

  var vKedi = new Kedi("Boncuk");
  console.log(vKedi.ad);       // Boncuk
  console.log(vKedi.renk);     // Sarı
  console.log(vKedi.adiNe());  // ???
</script>

Ancak prototype ile eklenmiş özellik ve metotlar kalıtım alınmaz.

Prototype chaining – Prototip zinciri

Bir önceki yöntem ile sadece nesne kurucu içerisindeki özellik ve metotları kalıtım alınabiliyorduk.

Nesne kurucusu içerisine metot eklemek bellek verimliliği açısından pek tercih edilmez.

Nesneye ait metotlar genellikle nesnenin prototype özelliğine yazılır.

Nesneye ait metotların tanımlandığı prototype özelliğinden kalıtım almak için Prototype chaining yöntemi kullanılır.

<script>
"use strict";
  function Hayvan() {
    this.renk = ["Siyah", "Beyaz", "Sarı"];
  }
  Hayvan.prototype.rengiNe = function() {
    return this.renk;
  }
  function Kedi() {
    this.ad = "Boncuk";
  }

  Kedi.prototype = new Hayvan();  // Prototype chaining - Prototip zinciri

  var vKedi = new Kedi();
  console.log(vKedi.ad);          // Boncuk
  console.log(vKedi.rengiNe());   // Siyah, Beyaz, Sarı
</script>

Bu yöntem ile Nesne Yönelimli Programlamada sıkça kullanılan Method overriding yani metot ezme yapılabilir.

<script>
"use strict";
  function Hayvan() {
    this.renk = ["Siyah", "Beyaz", "Sarı"];
  }
  Hayvan.prototype.rengiNe = function() {
    return this.renk;
  }
  function Kedi() {
    this.ad = "Boncuk";
  }

  Kedi.prototype = new Hayvan();   // Prototype chaining - Prototip zinciri

  Kedi.prototype.rengiNe = function(rengim) {    // Method overriding
    return "Benim rengim " + this.renk[rengim];
  }
  var vKedi = new Kedi();
  console.log(vKedi.ad);           // Boncuk
  console.log(vKedi.rengiNe(2));   // Benim rengim Sarı
</script>

Bu yöntem kalıtım alınan nesnenin referans bilgisini tuttuğu için kalıtım alınan nesne içerisindeki değişiklikler tüm nesnelerde geçerli olur.

<script>
"use strict";
  function Hayvan() {
    this.renk = ["Siyah", "Beyaz", "Sarı"];
  }
  function Kedi() {
    this.ad = "Boncuk";
  }

  Kedi.prototype = new Hayvan();  // Prototype chaining - Prototip zinciri

  var vKedi = new Kedi();
  vKedi.renk.push("Kahverengi");
  console.log(vKedi.ad);
  console.log(vKedi.renk);        // Siyah, Beyaz, Sarı, Kahverengi

  var wKedi = new Kedi();
  console.log(wKedi.ad);
  console.log(wKedi.renk);        // Siyah, Beyaz, Sarı, Kahverengi
</script>

Yukardaki örnekte sadece vKedi isimli nesneye ait renk dizi değişkenine Kahverengi değerini eklemek istedik.

Ancak referans bilgisi tutulduğu için değişiklik tüm nesnelerde etkili oldu.

Combination inheritance – Kombinasyon kalıtım

Kurucu çalma ve prototip zincirine ait sorunları çözmek için her ikisinin birlikte kullanıldığı yöntem olan Combination inheritance yani ikisinin kombinasyonu kullanılır.

<script>
"use strict";
  function Hayvan() {
    this.renk = ["Siyah", "Beyaz", "Sarı"];
  }
  function Kedi() {
    Hayvan.call(this);       // Constructor stealing - Yapıcı çalma
    //Hayvan.apply(this);  // Constructor stealing - Yapıcı çalma
    this.ad = "Boncuk";
  }

  Kedi.prototype = new Hayvan();  // Prototype chaining - Prototip zinciri

  var vKedi = new Kedi();
  vKedi.renk.push("Kahverengi");
  console.log(vKedi.ad);
  console.log(vKedi.renk);        // Siyah, Beyaz, Sarı, Kahverengi

  var wKedi = new Kedi();
  console.log(wKedi.ad);
  console.log(wKedi.renk);        // Siyah, Beyaz, Sarı
</script>

Kurucu çalma ve prototip zinciri beraber kullanılarak her ikisinin sorunlu tarafları giderilmiştir.

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.