Prototype Pattern

Prototype Pattern nima?

Prototype pattern — bu creational design pattern bo‘lib, objectlarni class orqali emas, balki mavjud objectni clone qilish orqali yaratishga imkon beradi. Bu pattern object yaratish jarayonini soddalashtiradi va performance ni yaxshilaydi. Prototype JavaScriptga xos (native) bo‘lgan obyekt bo‘lib, obyektlar unga prototype chain orqali murojaat qiladi.

Ba’zan biz mavjud object bilan bir xil yoki o’xshash yangi object yaratishimiz kerak bo’ladi. Agar object yaratish jarayoni murakkab bo’lsa yoki ko’p resurslarni talab qilsa, har safar yangidan yaratish samarasiz bo’ladi. Masalan:

Object ko’plab propertylar bilan to’ldirilgan
Object yaratish uchun database query kerak
Object murakkab initialization logikasiga ega

Prototype pattern mavjud objectni prototype sifatida ishlatib, uni clone qilish orqali yangi object yaratishni taklif qiladi. JavaScriptda bu quyidagilar orqali amalga oshiriladi: Object.create(),Object.assign(),spread operator ({ ...obj }),custom clone() method

Object.create() yordamida

// Prototype object
const carPrototype = {
  wheels: 4,
  engine: "V6",

  drive() {
    console.log(`${this.model} harakatlanmoqda...`);
  },

  clone() {
    return Object.create(this);
  },
};

// Prototype dan yangi object yaratish
const myCar = Object.create(carPrototype);
myCar.model = "Tesla Model 3";
myCar.color = "Qizil";

myCar.drive(); // Tesla Model 3 harakatlanmoqda...

// Clone qilish
const anotherCar = myCar.clone();
anotherCar.model = "Tesla Model Y";
anotherCar.drive(); // Tesla Model Y harakatlanmoqda...

Bu yerda:

carPrototype — prototype object
myCar va anotherCar — shu prototypedan clone qilingan objectlar

Prototype chain qanday ishlaydi?

console.log(myCar.__proto__ === carPrototype); // true

Agar method objectning o‘zida topilmasa, JavaScript uni prototype chain bo‘ylab qidiradi.

function Car(model, color) {
    this.model = model;
    this.color = color;
}

Car.prototype.clone = function() {
    return new Car(this.model, this.color);
};

Car.prototype.getInfo = function() {
    return `${this.model} - ${this.color}`;
};

const originalCar = new Car('BMW X5', "Qora");
console.log(originalCar.getInfo()); // BMW X5 - Qora

const clonedCar = originalCar.clone();
clonedCar.color = 'Oq';
console.log(clonedCar.getInfo());

class Car {
    constructor(model, color){
        this.model = model;
        this.color = color;
    }

    clone(){
        return new Car(this.model, this.color);
    }

    getInfo(){
        return `${this.model} - ${this.color}`;
    }
}

const originalCar = new Car('BMW X5', "Qora");
console.log(originalCar.getInfo()); // BMW X5 - Qora

const clonedCar = originalCar.clone();
clonedCar.color = 'Oq';
console.log(clonedCar.getInfo());

Shallow va Deep clone

class Person {
  constructor(name, address) {
    this.name = name;
    this.address = address;
  }

  // Shallow clone - faqat birinchi darajadagi propertylar
  shallowClone() {
    return Object.assign(Object.create(Object.getPrototypeOf(this)), this);
  }

  // Deep clone - barcha nested objectlar bilan
  deepClone() {
    // return JSON.parse(JSON.stringify(this));
    // 2022 yildan boshlab barcha modern browserlarda mavjud
    return structuredClone(this);
  }
}

const person1 = new Person("Anvar", { city: "Toshkent", street: "Amir Temur" });

// Shallow clone
const person2 = person1.shallowClone();
person2.address.city = "Samarqand";
console.log(person1.address.city); // Samarqand (o'zgardi!)

// Deep clone
const person3 = person1.deepClone();
person3.address.city = "Buxoro";
console.log(person1.address.city); // Samarqand (o'zgarmadi)