JavaScript’te Prototip Kalıbı – JSManifest

JavaScript'te Prototip Kalıbı – JSManifest

JavaScript dilinde uygulanabilecek birden fazla tasarım deseni vardır ve bu gönderide aşağıdakileri gözden geçireceğiz. prototip tasarım deseni.

bu prototip tasarım deseni nesne tabanlıdır yaratıcı tasarım deseni.

Genel olarak çakıştıkları üç tür tasarım modeli hakkında bir özete ihtiyacınız varsa, işte küçük bir genel bakış:

  1. Yaratıcı Tasarım Desenleri

Nesneleri doğrudan doğrudan başlatmak zorunda kalmanız yerine, onları yaratanlar bunlardır. senin için. Bu yaklaşımın yararı, belirli durumlar için hangi nesnelerin oluşturulması gerektiğine karar verirken programınıza biraz daha esneklik kazandırmasıdır.

  1. Davranışsal Tasarım Kalıpları

Bu desenler odaklanmış nesneler arasındaki iletişim.

  1. Yapısal Tasarım Desenleri

Ve son olarak, bu kalıplar sınıf ve nesne bileşimi. Kalıtım yoluyla arayüzler oluşturmak ve yeni işlevsellik elde etmek için birden çok nesne oluşturmanın yollarını tanımlamak için kullanılabilirler.

Prototip modelini ilk kez öğreniyorsanız, şimdi ne bekleyeceğiniz konusunda bir fikriniz olabilir. Ama yapmazsan, o zaman senin için bu gizemi çözmeye yardım etmek benim işim dostum.

Peki prototip kalıbı tam olarak nedir ve ne işe yarar?

Bu kalıbın ana odak noktası, aşağıdakiler için plan olarak kullanılabilecek nesnelerin oluşturulmasına yardımcı olmaktır. hiç yapıcılar tarafından oluşturulan nesne. Bunu denilen şey aracılığıyla yapar prototip kalıtım.

JavaScript prototip kalıtım için yerel desteğe sahip olduğundan, neyse ki dilde çalışmak, sözdiziminden başka herhangi bir yeni kavram öğrenmeniz gerekmediği noktaya kadar doğal olarak kolaylaşır.

Bununla birlikte, prototip tasarım deseni bir çok yararlı strateji – bu da onu JavaScript’te programlar oluşturmanın önemli ve faydalı bir yolu yapar. Nedenini birazdan göreceğiz.

Nesneler, yapıcı işlevi aracılığıyla oluşturulduğunda ve şunları içerdiğinde: name özelliği, daha sonra aynı yapıcı işleviyle oluşturulan diğer nesneler de aşağıda gösterildiği gibi aynı özelliğe sahip olacaktır:

function Movie(title) {
  this.title = title
}

const harryPotter = new Movie('Harry Potter')
const rushHour2 = new Movie('Rush Hour 2')
const fastAndFurious = new Movie('Fast And Furious')

console.log(harryPotter.constructor.name)
console.log(rushHour2.constructor.name)
console.log(fastAndFurious.constructor.name)

Kulağa tipik sınıf nesneleri gibi geliyor ama gerçekte kaçınır sınıfları tamamen kullanmak. Prototip tasarım deseni, yepyeni nesneleri tanımlamak yerine, mevcut işlevsel nesnelerin kopyalarını oluşturur.

Deseni JavaScript’te kullanmanın en büyük yararı, nesne yönelimli sınıfların aksine kazanılan performans artışıdır. Bu, bir nesnenin içindeki işlevleri tanımladığınızda, bunların referansla oluşturuldu. Diğer bir deyişle, tüm alt nesneler aynı yöntemi gösterecek kendi bireysel kopyalarını oluşturmak yerine!

İşte eylemdeki kalıbın bir kod örneği:

const Warrior = function(name) {
  this.name = name
  this.hp = 100
}

Warrior.prototype.bash = function(target) {
  target.hp -= 15
}

Warrior.prototype.omniSlash = function(target) {
  
  if (target.hp < 50) {
    return
  }
  target.hp -= 50
}

const sam = new Warrior('Sam')
const lenardo = new Warrior('Lenardo')

sam.bash(lenardo)

Kod örneğimizde, bir savaşçının saldırı yöntemlerini kullanarak tanımladık. Warrior.prototype.<method> = function() {...}. Bazı savaşçıları örneklediğimizi görebilirsiniz. new anahtar kelime bu yüzden şimdi iki örneğe bakıyoruz. Her iki örnek de kendi name göre mülk name arayan tarafından iletilen argüman.

Yöntemleri tanımladığımızda bash ve omniSlash gösterildiği gibi prototipte, baktığımız iki ayrı örnek aslında aynı bash ve omniSlash fonksiyonlar!

const Warrior = function(name) {
  this.name = name
  this.hp = 100
}

Warrior.prototype.bash = function(target) {
  target.hp -= 15
}

Warrior.prototype.omniSlash = function(target) {
  
  if (target.hp < 50) {
    return
  }
  target.hp -= 50
}

const sam = new Warrior('Sam')
const lenardo = new Warrior('Lenardo')

console.log(sam.bash === lenardo.bash) 

Bunun yerine onları böyle tanımlarsak, o zaman olumsuzluk aynı, yani aslında JavaScript bir başkasını yarattı sözde aynı yöntemin kopyası her örnek için:

const Warrior = function(name) {
  this.name = name
  this.hp = 100

  this.bash = function(target) {
    target.hp -= 15
  }

  this.omniSlash = function(target) {
    
    if (target.hp < 50) {
      return
    }
    target.hp -= 50
  }
}

const sam = new Warrior('Sam')
const lenardo = new Warrior('Lenardo')

console.log(sam.bash === lenardo.bash) 

Yani eğer biz yapmadı prototip kalıbını son örnekte olduğu gibi kullanın, birçok örneği somutlaştırdığımızda ne kadar çılgın olur? Temelde aynı şeyi yapan, hatta yapmayan hafızayı karıştıran klonlanmış yöntemlerimiz olurdu. ihtiyaç örneklerin içindeki duruma dayanmadığı sürece kopyalanacak!

Prototipleri genişletmenin başka bir varyasyonu, aşağıdaki gibi bir sözdizimidir:

const Warrior = function(name) {
  this.name = name
  this.hp = 100
}

Warrior.prototype = {
  bash(target) {
    target.hp -= 15
  },
  omniSlash(target) {
    
    if (target.hp < 50) {
      return
    }
    target.hp -= 50
  },
}

Hangisine eşdeğerdir:

const Warrior = function(name) {
  this.name = name
  this.hp = 100
}

Warrior.prototype.bash = function(target) {
  target.hp -= 15
}

Warrior.prototype.omniSlash = function(target) {
  
  if (target.hp < 50) {
    return
  }
  target.hp -= 50
}

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.