February 21, 2023

JavaScriptda Proxy

Proxy bu object bo'lib boshqa objectni o'rab oladi va o'rab olingan object ya'ni target objectining fundamental operatsiyalarini "nazorat punkti"dan o'tkazgan holatda amalga oshirish imkonini beradi. "Nazorat punkti" handler deb ataladi va u ham object hisoblanadi. Masalan bizda age va name propertylaridan iborat user objecti mavjud.

const user = {
  name: "Hojiakbar",
  age: 20
}

Agar biz shu objectdan proxy yaratadigan bo'lsak, bu object ning get, set, delete va boshqa fundamental amallarni qaytadan yozishimiz yoki o'zgartirishimiz mumkin.

// Proxy sintaksisi - new Proxy(targetObject,handler)

const userProxy = new Proxy(user,{
  get(targetObject,property){
    if(property in targetObject){
      return targetObject[property]
    }
    return "Property mavjud emas"
  }
})

console.log(userProxy.fullname) // "Property mavjud emas"

Odatda biz objectda mavjud bo'lmagan property qiymatini olishga harakat qilsak undefined qaytadi, lekin biz get amalini o'zgartirish orqali undefined o'rniga o'zimiz berib yuborgan stringni qaytaradigan qildik.

Huddi shu kabi age propertysiga qiymat berayotganda validatsiyadan o'tkazadigan qilib ko'ramiz.

const userProxy = new Proxy(user,{
  set(targetObject,property,value){
    if(property === "age"){
      if(typeof value !== "number"){
        throw new Error("Age number turda bo'lishi kerak!")
      }
      if(value <= 18){
        throw new Error("Age 18 yoshdan katta bo'lishi kerak!")
      }
    }
    targetObject[property] = value
  }
})
userProxy.age = 17 //Error: "Age 18 yoshdan katta bo'lishi kerak!"
userProxy.age = 21

console.log(userProxy.age) //21
console.log(user.age) //21

Tepadagi misolda agar property age bo'ladigan bo'lsa unga o'rnatilayotgan qiymat 18dan yuqori va number formatda bo'lishi kerakligini yozdik va proxy orqali user objectiga o'zgartirish kiritar ekanmiz handlerimiz validatsiyadan o'tkazib oladi.

Bu rasmda proxy aslida qanday ishlashi ko'rsatib o'tilgan.

Boshqa fundamental amallarni qanday o'zgartirish yoki qayta yozish mumkinligini bu link orqali ko'rib chiqishingiz mumkin.