JavaScript Me Proxy & Reflect API Kya Hote Hain?

Metaprogramming ke through object ke behavior ko intercept aur customize karna sikhein.

Introduction to Metaprogramming

Metaprogramming ka matlab hai aisi programming jisme hum apne code ka behavior runtime par dynamically change, control, ya customize kar sakein. JavaScript ke Proxy aur Reflect API (ES6 me introduce hue) iska ek powerful example hain.

Samajh lo tumhare ghar ka ek watchman (Proxy) hai jo kisi bhi guest ko andar aane se pehle verify karta hai (custom logic), aur phir main gate ka key system (Reflect) jo actually gate ko open karta hai (default operation).

1. Proxy Kya Hota Hai?

Proxy ek "wrapper" hai jo kisi target object ya function ke upar lagta hai. Yeh aapko control deta hai ki jab koi us object ke saath interact kare, toh aap us interaction ko "intercept" (beech me rok kar) customize kar sako.

Syntax:

const proxy = new Proxy(target, handler);
  • target: Original object ya function jiska behavior hum modify karna chahte hain.
  • handler: Ek object jisme "traps" (methods) hote hain jo specific operations (jaise get, set) ko intercept karte hain.

Example: Validation & Logging

const target = { name: "Rahul", age: 25 };

const handler = {
  get: function(obj, prop) {
    console.log(`Property "${prop}" accessed`);
    return prop in obj ? obj[prop] : "Not Found";
  },
  set: function(obj, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("Age must be a number");
    }
    obj[prop] = value;
    console.log(`Property "${prop}" updated to ${value}`);
    return true; // Important to return true on success
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Logs access + "Rahul"
proxy.age = 30; // Valid update, logs the change
// proxy.age = "thirty"; // Throws TypeError

2. Reflect API Kya Hota Hai?

Reflect ek built-in object hai jo object ke saath kaam karne ke liye standardized methods deta hai. Yeh methods wahi kaam karte hain jo normal JavaScript operations (jaise `target[prop]`, `delete target.prop`) karte hain, lekin ek function ke roop me.

Proxy traps ke andar, default operation ko aage badhane ke liye `Reflect` ka use karna best practice hai.

Proxy + Reflect Example:

const target = { name: "Priya" };

const handler = {
  get(obj, prop, receiver) {
    console.log(`Getting property: ${prop}`);
    // Default 'get' operation ko call karna
    return Reflect.get(obj, prop, receiver);
  },
  set(obj, prop, value, receiver) {
    console.log(`Setting property: ${prop} = ${value}`);
    // Default 'set' operation ko call karna
    return Reflect.set(obj, prop, value, receiver);
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.name); // Logs "Getting property: name", then returns "Priya"
proxy.age = 28; // Logs "Setting property: age = 28"

Common Proxy Traps

Trap NameIntercepts OperationExample Trigger
getProperty readproxy.prop
setProperty writeproxy.prop = value
hasin operator"prop" in proxy
deletePropertydelete operatordelete proxy.prop
applyFunction callproxy()
constructnew operatornew proxy()

Key Takeaways

  • Proxy: Object ke operations ko intercept karne ke liye ek "wrapper" hai.
  • Reflect: Object ke default operations ko as functions provide karta hai.
  • Proxy traps me default behavior ko call karne ke liye Reflect ka use karna best practice hai.
  • Proxy ka use data validation, logging, security, aur modern frameworks (jaise Vue 3) me reactivity ke liye hota hai.
Bonus: Practical Application!
Ab in concepts ko practically use karke dekhein.

Ek object par Proxy lagayein jo `get` trap ka use karke non-existent properties ke liye ek default value return kare.

Practice in JS Editor
Test Your Knowledge!
Kya aap Proxy aur Reflect API ke baare mein seekh chuke hain? Chaliye dekhte hain!

Apni knowledge test karne ke liye is quick quiz ko dein.

Start Quiz