giriiş
Fabrika fonksiyonları ve yapılandırıcılar kavramını anlamak için öncelikle fonksiyonları ve nesneleri anlamanız gerekir.
Benzer özellik ve işlevlere sahip birçok nesne oluşturursanız, sıkıcı ve tekrarlayıcı hale gelebilir. "Kendini Tekrarlama" anlamına gelen DRY kod ilkesini aklımızda tutmak istiyoruz. Daha kısa, daha temiz ve daha verimli kod yazmamıza yardımcı olabilecek işlevsel kalıplar mevcuttur. Fabrika işlevleri ve yapılandırıcı işlevler iş görebilir, ancak hangisini kullanmalısınız? Fabrika işlevlerinin ve yapılandırıcıların ne olduğuna, ne yapıp ne yapamayacağına, benzerliklerine ve farklılıklarına biraz daha derinlemesine bakalım.
Fabrika Fonksiyonu Nedir?
Bir fabrika fonksiyonu, hammaddeleri alıp birden fazla ürünü hızla üreten gerçek bir fabrika olarak düşünülebilir. Fabrika fonksiyonları ise belirli girdileri alır ve bu girdileri kullanarak yeni bir nesne oluşturur. Peki, bu bizim için nasıl faydalı olabilir? Her nesneyi ayrı ayrı oluşturabiliriz, ancak bu biraz zaman alabilir. Aynı özelliklere ve farklı değerlere sahip nesneler oluşturuyorsanız, bir fabrika fonksiyonu oluşturmak süreci hızlandırabilir.
const car1 = {
make: 'Toyota',
model: 'Tacoma',
year: 2018,
fuelType: 'gas',
bodyType: 'mid-size pick-up truck',
getFullName() {
return `${this.year} ${this.make} ${this.model}`;
}
}
console.log(car1.getFullName()); // => 2018 Toyota TacomaYukarıdaki örnekte, belirli bir makineyi tanımlayan bir nesne oluşturuyoruz. Şimdi buna benzer bir nesne oluşturalım.
const car2 = {
make: 'Tesla',
model: 'Model S',
year: 2018,
fuelType: 'electric',
bodyType: 'sedan',
getFullName() {
return `${this.year} ${this.make} ${this.model}`;
}
}
console.log(car2.getFullName()); // => 2018 Tesla Model S Şimdi, daha fazla makine nesnesi yapmaktan bahsedebilirim ama kimin buna vakti var ki, değil mi? Bunun bir fabrika işlevi olarak nasıl çalıştığını görelim.
function createCar (make, model, year, fuelType, bodyType) {
return {
make: make,
model: model,
year: year,
fuelType: fuelType,
bodyType: bodyType,
getFullName() {
return `${year} ${make} ${model}`;
}
}
}Artık bizim için yeni nesneler oluşturan bir fabrika fonksiyonumuz var. Tek yapmamız gereken verileri iletmek ve fabrika fonksiyonunun işini yapmasına izin vermek.
function createCar (make, model, year, fuelType, bodyType) {
return {
make: make,
model: model,
year: year,
fuelType: fuelType,
bodyType: bodyType,
getFullName() {
return `${year} ${make} ${model}`;
}
}
}
const car1 = createCar('Toyota', 'Tacoma', 2018, 'gas', 'mid-size pick-up truck');
const car2 = createCar('Tesla', 'Model S', 2018, 'electric', 'sedan');
console.log(car1.getFullName()); // => 2018 Toyota Tacoma
console.log(car2.getFullName()); // => 2018 Tesla Model SKodu tekrarlamak yerine fabrika fonksiyonunu kullanarak istediğiniz sayıda nesne yaratabilirsiniz.
Yapıcılar nelerdir?
Yapıcı fonksiyon, fabrika fonksiyonlarına çok benzeyen başka bir JavaScript kalıbıdır. Ancak, fabrika fonksiyonlarının aksine, yapıcı fonksiyonlar aslında bir nesne döndürmez. Aynı özelliklere sahip farklı nesneler oluşturmak için "new" ve "this" anahtar kelimelerini kullanmamız gerekir. Bunu söyledikten sonra, yapıcı fonksiyonların görsel olarak nasıl çalıştığına bakalım.
function Car(make, model, year, fuelType, bodyType) {
this.make = make
this.model = model
this.year = year
this.fuelType = fuelType
this.bodyType = bodyType
this.getFullName = () => {
return `${this.year} ${this.make} ${this.model}`;
}
}Yukarıdaki örnekte, yapılandırıcı fonksiyon, "this" anahtar sözcüğünün kullanımı dışında bir fabrika fonksiyonuna çok benzer. "this", örnek nesneyi oluşturan yapılandırıcı fonksiyonu ifade eder. Başka bir deyişle, "this"in bir yapılandırıcı fonksiyonda hiçbir değeri yoktur. Bunu, yeni nesne için bir temel olarak düşünebilirsiniz.
function Car(make, model, year, fuelType, bodyType) {
this.make = make
this.model = model
this.year = year
this.fuelType = fuelType
this.bodyType = bodyType
this.getFullName = () => {
return `${this.year} ${this.make} ${this.model}`;
}
}
const car1 = new car('Toyota', 'Tacoma', 2018, 'gas', 'mid-size pick-up truck');
const car2 = new car('Tesla', 'Model S', 2018, 'electric', 'sedan');
console.log(car1.getFullName()); // => 2018 Toyota Tacoma
console.log(car2.getFullName()); // => 2018 Tesla Model SYapıcı fonksiyonları kullanarak nesneler oluşturmak için "new" adlı başka bir anahtar kelime kullanırız. Bir fonksiyon çağrısının önünde "new" ifadesini kullandığınızda, JavaScript bizim için otomatik olarak iki şey yapar: Fonksiyonun içinde "this" adında boş bir nesne oluşturur. "This" nesnesini, fonksiyonu başlangıçta çağıran ifadeye döndürür.
function Car(make, model, year, fuelType, bodyType) {
// const this = {};
this.make = make
this.model = model
this.year = year
this.fuelType = fuelType
this.bodyType = bodyType
this.getFullName = () => {
return `${this.year} ${this.make} ${this.model}`;
}
// return this;
}
const car1 = new car('Toyota', 'Tacoma', 2018, 'gas', 'mid-size pick-up truck');
const car2 = new car('Tesla', 'Model S', 2018, 'electric', 'sedan');
console.log(car1.getFullName()); // => 2018 Toyota Tacoma
console.log(car2.getFullName()); // => 2018 Tesla Model SMiras
Fabrika ve inşaatçı fonksiyonları arasındaki farkta miras önemli bir rol oynar.
function createCar (make, model, year, fuelType, bodyType) {
return {
make: make,
model: model,
year: year,
fuelType: fuelType,
bodyType: bodyType,
getFullName() {
return `${year} ${make} ${model}`;
}
}
}
const car1 = createCar('Toyota', 'Tacoma', 2018, 'gas', 'mid-size pick-up truck');
const car2 = createCar('Tesla', 'Model S', 2018, 'electric', 'sedan');
car1.getFullName = function() {
return `My ${fuelType} ${bodyType} is a ${year} ${make} ${model}`;
}
console.log(car1.getFullName()); // => My gas mid-size pick-up truck is a 2018 Toyota Tacoma
console.log(car2.getFullName()); // => 2018 Tesla Model Sİlk fabrika fonksiyonu örneğine geri dönelim. Peki ya car1.getFullName() fonksiyonunu yeniden tanımlamak istersek? car1.getFullName() ve car2.getFullName() bellekte aynı fonksiyon değildir. Her nesne, fonksiyonun kendi kopyasını alır. Bu, fonksiyon bir nesne oluşturup döndürdüğünde, özellikleri ve değerleri kopyalayıp fonksiyonu çağıran her nesneye bağladığı anlamına gelir.
function car(make, model, year, fuelType, bodyType) {
// const this = {};
this.make = make
this.model = model
this.year = year
this.fuelType = fuelType
this.bodyType = bodyType
this.getFullName = () => {
return `${this.year} ${this.make} ${this.model}`;
}
// return this;
}
const car1 = new car('Toyota', 'Tacoma', 2018, 'gas', 'mid-size pick-up truck');
const car2 = new car('Tesla', 'Model S', 2018, 'electric', 'sedan');
console.log(car1); // => car {make: 'Toyota', model: 'Tacoma' , etc.}Şimdi yukarıdaki kurucu fonksiyonumuza bir göz atalım. Kurucu fonksiyon oluşturulduğunda kendi prototipi vardır. "new" anahtar sözcüğünü kullanarak yeni bir Araba nesnesi oluşturduğumuzda, Araba tipinin bir örneğini oluşturur. Başka bir deyişle, car1'in prototipi Araba tipindedir. Artık car1, Araba kurucusundan miras alır. Bu, Araba prototipine özellikler eklememizi sağlar.
Car.prototype.sentence = function() {
return `My ${this.fuelType} ${this.bodyType} is a ${this.year} ${this.make} ${this.model}`;
}console.log(car1); // => Car {
// make: 'Toyota',
// model: 'Tacoma',
// year: 2018,
// fuelType: 'gas',
// bodyType: 'mid-size pick-up truck',
// getFullName: [Function (anonymous)]
// }Cümle fonksiyonunun doğrudan araba üreticisine eklenmediğine dikkat edin.
console.log(Car.prototype); // => { sentence: [Function (anonymous)] }
Ama prototipini incelediğimizde, işte orada! Artık yeni eklenen fonksiyona erişebiliyoruz.
console.log(car1.sentence()); // => My gas mid-size pick-up truck is a 2018 Toyota Tacoma
console.log(car2.sentence()); // => My electric sedan is a 2018 Tesla Model SArtık her işlemin nasıl çalıştığını bildiğimize göre, soru şu: Hangisini kullanmalıyız? Her ikisi de aynı sonucu verebilir. Yapıcılar, yapıcıdan miras alan herhangi bir nesneye özellik eklemek veya kaldırmak istediğinizde harikadır. Ancak, fabrika fonksiyonlarını anlamak daha kolay olabilir çünkü sonuçta sadece bir fonksiyondur. Fabrika fonksiyonları için "new" anahtar kelimesini kullanmamıza gerek yoktur. Kapanışların gücüyle daha esnek olabilir. Bununla "veri gizliliği" adı verilen bir şey yapabiliriz. Bunun nasıl çalıştığını açıklayan başka bir örneğe bakalım.
function createCar(make, model, year) {
return {
getFullName() {
return `${year} ${make} ${model}`;
}
}
}
const car1 = createCar('Toyota', 'Tacoma', 2018);
console.log(car1.getFullName()); // => 2018 Toyota Tacoma
console.log(car1.make); // => undefined
console.log(car1); // => { getFullName: [Function: getFullName] }Sonuç
Genel olarak, kendi kodunuzu yazmanın en önemli yanı, kodda mutlaka yanlış bir şey olmamasıdır. Kodumuzu temiz ve kısa tutmanın iyi bir yolu vardır. Fabrika fonksiyonlarını ve yapılandırıcı fonksiyonları, sizin için en uygun olduğunu düşündüğünüz yerlerde kullanın.
