JavaScript Proxy va Reflection

Bugun sizlar bilan JavaScript-ning eng qiziqarli va kuchli xususiyatlaridan ikkitasi - Proxy va Reflection haqida gaplashamiz. Bu mavzuni tushuntirishda men sizlarga oddiy va tushunarli misollar keltirishga harakat qilaman. Qani, belni mahkam bog'lab, JavaScript dunyosining bu ajoyib qismiga sayohatni boshlaymiz!

Proxy: Obyektlar ustidan "nazoratchi" qo'yish

Proxy - bu obyektlar ustidan nazorat o'rnatish imkonini beruvchi JavaScript xususiyati. Uni xuddi obyektingiz atrofida o'rnatilgan "qo'riqchi" deb tasavvur qiling. Bu qo'riqchi obyektga kirishni, undan chiqishni va unda o'zgarishlar qilishni nazorat qiladi.

Proxy yaratish

Proxy yaratish uchun biz Proxy konstruktoridan foydalanamiz. U ikkita argument qabul qiladi: asosiy obyekt va handler obyekti.

const asosiyObyekt = { ism: "Alisher", yosh: 30 };
const handler = {
  get: function(target, prop) {
    console.log(`${prop} xususiyati o'qilmoqda`);
    return target[prop];
  }
};

const proxy = new Proxy(asosiyObyekt, handler);

console.log(proxy.ism); 
// Natija:
// ism xususiyati o'qilmoqda
// Alisher

Bu misolda, biz asosiyObyekt ga kirish uchun proxy yaratdik. Har safar obyektning biror xususiyatiga murojaat qilganimizda, bizning "qo'riqchimiz" (handler) bu haqda xabar beradi.

Handler metodlari

Handler obyekti bir nechta metodlarni o'z ichiga olishi mumkin. Eng ko'p ishlatiladigan metodlar:

1. get: Xususiyatni o'qish uchun
2. set: Xususiyatga qiymat berish uchun
3. has: in operatori uchun
4. deleteProperty: delete operatori uchun

Keling, set metodini qo'shib ko'raylik:

const handler = {
  get: function(target, prop) {
    console.log(`${prop} xususiyati o'qilmoqda`);
    return target[prop];
  },
  set: function(target, prop, value) {
    console.log(`${prop} xususiyati ${value} ga o'zgartirilmoqda`);
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy(asosiyObyekt, handler);

proxy.yosh = 31;
// Natija: yosh xususiyati 31 ga o'zgartirilmoqda

console.log(proxy.yosh);
// Natija:
// yosh xususiyati o'qilmoqda
// 31

Reflection: Obyektlar bilan ishlashning yangi usuli

Reflection - bu obyektlar bilan ishlash uchun JavaScript-ga qo'shilgan yangi API. U Proxy bilan yaqindan bog'liq va ko'pincha birgalikda ishlatiladi.

Reflection metodlari

Reflect obyekti bir qator foydali metodlarni taqdim etadi. Ularning aksariyati Proxy handler metodlariga mos keladi:

1. Reflect.get(target, propertyKey [, receiver])
2. Reflect.set(target, propertyKey, value [, receiver])
3. Reflect.has(target, propertyKey)
4. Reflect.deleteProperty(target, propertyKey)

Keling, Reflection-ni amalda ko'rib chiqaylik:

const obj = { ism: "Gulnora", yosh: 25 };

console.log(Reflect.get(obj, 'ism')); // Natija: Gulnora

Reflect.set(obj, 'kasb', 'Dasturchi');
console.log(obj.kasb); // Natija: Dasturchi

console.log(Reflect.has(obj, 'yosh')); // Natija: true

Reflect.deleteProperty(obj, 'yosh');
console.log(obj.yosh); // Natija: undefined

Proxy va Reflection birgalikda

Proxy va Reflection-ni birgalikda ishlatish juda kuchli natija beradi. Keling, bir misol ko'raylik:

const asosiyObyekt = { ism: "Botir", yosh: 40 };

const handler = {
  get(target, prop, receiver) {
    if (prop === 'yosh') {
      return `${Reflect.get(target, prop, receiver)} yosh`;
    }
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    if (prop === 'yosh' && typeof value !== 'number') {
      throw new TypeError("Yosh son bo'lishi kerak");
    }
    return Reflect.set(target, prop, value, receiver);
  }
};

const proxy = new Proxy(asosiyObyekt, handler);

console.log(proxy.ism); // Natija: Botir
console.log(proxy.yosh); // Natija: 40 yosh

proxy.yosh = 41;
console.log(proxy.yosh); // Natija: 41 yosh

try {
  proxy.yosh = "qirq ikki";
} catch (error) {
  console.error(error.message); // Natija: Yosh son bo'lishi kerak
}

Bu misolda biz Proxy va Reflection-ni birgalikda ishlatib, yosh xususiyatini maxsus boshqardik. get metodi orqali yoshni o'qiganda "yosh" so'zini qo'shdik, set metodi orqali esa yoshga faqat son qiymat berilishini ta'minladik.

Amaliy foydalanish holatlari

Proxy va Reflection juda ko'p holatlarda foydali bo'lishi mumkin:

1. Xususiyatlarni tekshirish: Obyekt xususiyatlariga beriladigan qiymatlarni tekshirish va validatsiya qilish.
2. Yozish himoyasi: Obyektning ba'zi xususiyatlarini o'zgartirib bo'lmaydigan qilish.
3. Xususiyatlarni yashirish: Ba'zi xususiyatlarni tashqaridan ko'rinmaydigan qilish.
4. Keshlashtirish: Natijalarni keshlashtirish orqali ishlash tezligini oshirish.
5. Xatolarni qayd qilish: Obyekt bilan ishlash jarayonida xatolarni qayd qilish va kuzatish.

Misol uchun, keling oddiy keshlashtirish tizimini yarataylik:

function keshlashtiruvchiProxy(target, kesh = new Map()) {
  return new Proxy(target, {
    apply(target, thisArg, argArray) {
      const key = argArray.toString();
      if (kesh.has(key)) {
        console.log('Keshdan olinmoqda');
        return kesh.get(key);
      }
      const result = Reflect.apply(target, thisArg, argArray);
      kesh.set(key, result);
      return result;
    }
  });
}

function qimmatHisoblash(x, y) {
  console.log('Hisoblash amalga oshirilmoqda...');
  return x + y;
}

const keshlanganHisoblash = keshlashtiruvchiProxy(qimmatHisoblash);

console.log(keshlanganHisoblash(5, 3)); // Hisoblash amalga oshirilmoqda... 8
console.log(keshlanganHisoblash(5, 3)); // Keshdan olinmoqda 8

Bu misolda biz Proxy yordamida funksiya natijalarini keshlashtiruvchi tizim yaratdik. Bir xil argumentlar bilan takror chaqirilganda, natija keshdan olinadi, bu esa ishlash tezligini oshiradi.

Xulosa

Proxy va Reflection - bu JavaScript-ning juda kuchli xususiyatlari bo'lib, ular bizga obyektlar ustidan to'liq nazorat o'rnatish imkonini beradi. Ular yordamida biz xavfsizlikni oshirish, ishlash tezligini yaxshilash va yangi funksionalliklar qo'shish kabi turli vazifalarni amalga oshirishimiz mumkin.

Lekin, har qanday kuchli vosita kabi, ularni ham ehtiyotkorlik bilan ishlatish kerak. Noto'g'ri ishlatilganda, ular kodning murakkabligini oshirishi va ishlash tezligiga salbiy ta'sir ko'rsatishi mumkin.

Proxy va Reflection-ni o'rganish va qo'llash orqali siz o'z JavaScript ko'nikmalaringizni yangi bosqichga ko'tarasiz. Ular sizga obyektlar bilan ishlashning yangi usullarini ochib beradi va kodingizni yanada moslashuvchan va kuchli qiladi.

Kod yozishda zavq oling, va unutmang - har bir yangi o'rganilgan texnologiya sizni yanada kuchliroq dasturchi qiladi!

Qo'shimcha manbalar

1. MDN Web Docs: Proxy
2. MDN Web Docs: Reflection
3. JavaScript.info: Proxy and Reflect