JavaScript Proxy va Reflect

Obyektdan xossa o’qilganda yoki unga qiymat berilganda oralikka tushib, o’z qoidangizni qo’yish mumkin. Buni Proxy bajaradi — zamonaviy kutubxonalarning ko’p “sehri” shu ustiga qurilgan.

Birinchi Proxy

JavaScript

const asl = { ism: "Aziz", yosh: 20 };

const kuzatuvchi = new Proxy(asl, {
get(nishon, kalit) {
  console.log("  o'qildi:", kalit);
  return nishon[kalit];
},
});

console.log(kuzatuvchi.ism);
console.log(kuzatuvchi.yosh);

set — yozishni nazorat qilish

JavaScript

const talaba = new Proxy({}, {
set(nishon, kalit, qiymat) {
  if (kalit === "yosh") {
    if (typeof qiymat !== "number") {
      throw new TypeError("yosh son bo'lishi kerak");
    }
    if (qiymat < 0 || qiymat > 150) {
      throw new RangeError("yosh 0 dan 150 gacha bo'lsin");
    }
  }
  nishon[kalit] = qiymat;
  return true;
},
});

talaba.ism = "Aziz";
talaba.yosh = 20;
console.log(talaba.ism, talaba.yosh);

try {
talaba.yosh = "yigirma";
} catch (e) {
console.log(e.name + ":", e.message);
}

try {
talaba.yosh = 200;
} catch (e) {
console.log(e.name + ":", e.message);
}

Validatsiya obyektning o’zida joylashdi — uni ishlatadigan har bir joyda qayta yozish shart emas.

Yo’q xossa uchun standart qiymat

JavaScript

const sozlama = new Proxy({ mavzu: "qorong'i" }, {
get(nishon, kalit) {
  return kalit in nishon ? nishon[kalit] : "belgilanmagan";
},
});

console.log(sozlama.mavzu);
console.log(sozlama.til);
console.log(sozlama.hajm);

undefined o’rniga ma’noli qiymat — sozlamalar bilan ishlashda qulay.

Maxfiy xossalarni yashirish

JavaScript

const asl = { ism: "Aziz", _parol: "maxfiy", yosh: 20 };

const himoya = new Proxy(asl, {
get(nishon, kalit) {
  if (typeof kalit === "string" && kalit.startsWith("_")) {
    throw new Error("Maxfiy xossaga ruxsat yo'q: " + kalit);
  }
  return nishon[kalit];
},

has(nishon, kalit) {
  if (typeof kalit === "string" && kalit.startsWith("_")) return false;
  return kalit in nishon;
},

ownKeys(nishon) {
  return Reflect.ownKeys(nishon).filter(
    (k) => !(typeof k === "string" && k.startsWith("_"))
  );
},
});

console.log(himoya.ism);
console.log("_parol" in himoya);
console.log(Object.keys(himoya));

try {
console.log(himoya._parol);
} catch (e) {
console.log(e.message);
}

Uch tuzoq birga ishladi: o’qish taqiqlandi, in yolg’on qaytardi va Object.keys ro’yxatdan chiqardi.

Reflect — standart xatti-harakat

JavaScript

const obyekt = { a: 1, b: 2 };

console.log(Reflect.get(obyekt, "a"));
console.log(Reflect.has(obyekt, "b"));
console.log(Reflect.ownKeys(obyekt));

Reflect.set(obyekt, "c", 3);
console.log(obyekt);

Reflect.deleteProperty(obyekt, "a");
console.log(obyekt);

Nega Reflect Proxy bilan birga

JavaScript

const asl = { ism: "Aziz" };

const yaxshi = new Proxy(asl, {
get(nishon, kalit, qabul) {
  console.log("  o'qildi:", String(kalit));
  return Reflect.get(nishon, kalit, qabul);
},

set(nishon, kalit, qiymat, qabul) {
  console.log("  yozildi:", String(kalit), "=", qiymat);
  return Reflect.set(nishon, kalit, qiymat, qabul);
},
});

yaxshi.yosh = 20;
console.log(yaxshi.ism, yaxshi.yosh);

nishon[kalit] o’rniga Reflect.get ishlatish to’g’riroq: u this bog’lanishini (qabul argumenti) saqlaydi va set uchun kerakli true/false ni o’zi qaytaradi.

Amaliy misol — o’zgarishlarni kuzatish

JavaScript

function kuzat(obyekt, xabar) {
return new Proxy(obyekt, {
  set(nishon, kalit, qiymat, qabul) {
    const eski = nishon[kalit];
    const natija = Reflect.set(nishon, kalit, qiymat, qabul);
    if (eski !== qiymat) xabar(kalit, eski, qiymat);
    return natija;
  },
});
}

const holat = kuzat({ soni: 0, nom: "test" }, (kalit, eski, yangi) => {
console.log(`${kalit}: ${eski} → ${yangi}`);
});

holat.soni = 1;
holat.soni = 2;
holat.soni = 2;
holat.nom = "yangi";

console.log("Yakuniy:", holat.soni, holat.nom);

Bu — Vue kabi freymvorklardagi reaktivlikning soddalashtirilgan mohiyati: ma’lumot o’zgarganda interfeys avtomatik yangilanadi.

Manfiy indeks

JavaScript

function manfiyIndeks(massiv) {
return new Proxy(massiv, {
  get(nishon, kalit) {
    if (typeof kalit === "string" && /^-\d+$/.test(kalit)) {
      return nishon[nishon.length + Number(kalit)];
    }
    return Reflect.get(nishon, kalit);
  },
});
}

const m = manfiyIndeks(["a", "b", "c", "d"]);

console.log(m[0]);
console.log(m[-1]);
console.log(m[-2]);
console.log(m.length);

Python’dagi kabi manfiy indeks JavaScript’da yo’q — Proxy uni qo’shdi.

Cheklovlar

Amaliy mashq

get tuzog’i bilan har o’qishni log qiling;
set bilan yosh maydonini tekshiring;
yo’q xossa uchun standart qiymat qaytaring;
_ bilan boshlangan xossalarni yashiring;
Reflect.get va Reflect.set ni tuzoqlarda ishlating;
o’zgarishlarni kuzatuvchi obyekt yasang.

Qisqacha xulosa

Proxy obyekt oldiga qobiq qo’yib, murojaatlarni ushlaydi.
Asosiy tuzoqlar: get, set, has, deleteProperty, ownKeys.
set tuzog’i true qaytarishi shart.
Reflect standart amallarni funksiya ko’rinishida beradi.
Tuzoq ichida Reflect ishlatish to’g’ri xatti-harakatni saqlaydi.
Proxy sekinroq va maxfiy # xossalar bilan ishlamaydi.

Keyingi darsda modul tizimi va bundler — kodni yig’ish va tarqatish.