JS Proxy और Reflect

एक Proxy एक बीचवाला है जो किसी object के सामने खड़ा रहता है और उसके साथ होने वाली चीज़ों को देख या बदल सकता है, जैसे एक receptionist जो हर visitor को जांचती है। Reflect उन normal actions को आगे बढ़ाता है।

In this page:

Proxy की बुनियादी बातें
Property Changes को Intercept करना
Reflect इस्तेमाल करना
Proxy के साथ Validation
Practical Proxy Example

Syntax

javascript

const proxy = new Proxy(target, {
  get(target, property) {
    return Reflect.get(target, property);
  }
});

Proxy की बुनियादी बातें

एक Proxy आपको किसी object पर operations intercept करने देता है। एक handler तय करता है कि क्या होना चाहिए। आम traps में get, set, has, और deleteProperty शामिल हैं, हर एक wrapped object पर एक fundamental operation से जुड़ा है जिसे आप देख या override कर सकते हैं।

उदाहरण: Proxy Basics

javascript

// Declare the constant `handler`; its value is built below
// Declare the constant `handler`; its value is built below
const handler = {
  // Define the method `get` taking `target`, `prop`
  // Define the method `get` taking `target`, `prop`
  get(target, prop) {
    // Print `"Reading:", prop` to the console
    // Print `"Reading:", prop` to the console
    console.log("Reading:", prop);
    // Return `target[prop]` from this function
    // Return `target[prop]` from this function
    return target[prop];
  },
};
// Declare the constant `obj` as a new `Proxy` instance
// Declare the constant `obj` as a new `Proxy` instance
const obj = new Proxy({ name: "Sam" }, handler);
// Print `obj.name` to the console
// Print `obj.name` to the console
console.log(obj.name);

Property Changes को Intercept करना

जब Proxy के ज़रिए कोई property assign की जाती है तो set trap चलता है। set trap के बिना, proxy में किए गए बदलाव सीधे underlying object तक पहुंच जाते हैं; इसके साथ, आप बदलाव होने से पहले उसे log, validate, या reject कर सकते हैं।

उदाहरण: Intercepting Property Changes

javascript

// Declare the constant `handler`; its value is built below
// Declare the constant `handler`; its value is built below
const handler = {
  // Define the method `set` taking `target`, `prop`, `value`
  // Define the method `set` taking `target`, `prop`, `value`
  set(target, prop, value) {
    // Print `"Setting", prop, "to", value` to the console
    // Print `"Setting", prop, "to", value` to the console
    console.log("Setting", prop, "to", value);
    target[prop] = value;
    // Return `true` from this function
    // Return `true` from this function
    return true;
  },
};
// Declare the constant `obj` as a new `Proxy` instance
// Declare the constant `obj` as a new `Proxy` instance
const obj = new Proxy({}, handler);
// Assign `30` to `obj.age`
// Assign `30` to `obj.age`
obj.age = 30;

Reflect इस्तेमाल करना

Reflect object operations के लिए standard methods देता है। यह Proxy traps के अंदर अच्छे से काम करता है।

Reflect के methods उसी default व्यवहार को mirror करते हैं जिसे किसी trap को वरना manually फिर से लागू करना पड़ता, इसलिए किसी trap के अंदर Reflect.get/set कॉल करना आपको default व्यवहार को बदलने के बजाय बढ़ाने देता है।

उदाहरण: Using Reflect

javascript

// Declare the constant `handler`; its value is built below
// Declare the constant `handler`; its value is built below
const handler = {
  // Define the method `get` taking `target`, `prop`
  // Define the method `get` taking `target`, `prop`
  get(target, prop) {
    // Return `Reflect.get(target, prop)` from this function
    // Return `Reflect.get(target, prop)` from this function
    return Reflect.get(target, prop);
  },
};
// Declare the constant `obj` as a new `Proxy` instance
// Declare the constant `obj` as a new `Proxy` instance
const obj = new Proxy({ name: "Sam" }, handler);
// Print `obj.name` to the console
// Print `obj.name` to the console
console.log(obj.name);

Proxy के साथ Validation

एक Proxy values को store करने से पहले validate कर सकता है। किसी set trap के अंदर से error देना या false return करना (valid मामलों के लिए Reflect.set के साथ मिलाकर) आपको constraints लागू करने देता है, जैसे किसी property को एक allowed range में रखने की मांग करना।

उदाहरण: Validation with Proxy

javascript

// Declare the constant `handler`; its value is built below
// Declare the constant `handler`; its value is built below
const handler = {
  // Define the method `set` taking `target`, `prop`, `value`
  // Define the method `set` taking `target`, `prop`, `value`
  set(target, prop, value) {
    // Check whether `prop === "age" && value < 0`
    // Check whether `prop === "age" && value < 0`
    if (prop === "age" && value < 0) {
      // Throw a new `RangeError` with message "Age cannot be negative"
      // Throw a new `RangeError` with message "Age cannot be negative"
      throw new RangeError("Age cannot be negative");
    }
    // Return `Reflect.set(target, prop, value)` from this function
    // Return `Reflect.set(target, prop, value)` from this function
    return Reflect.set(target, prop, value);
  },
};
// Declare the constant `user` as a new `Proxy` instance
// Declare the constant `user` as a new `Proxy` instance
const user = new Proxy({}, handler);
// Assign `30` to `user.age`
// Assign `30` to `user.age`
user.age = 30;
// Print `user.age` to the console
// Print `user.age` to the console
console.log(user.age);

Practical Proxy Example

Proxy logging, validation, defaults, और object properties तक controlled access के लिए उपयोगी है।

चूंकि traps हर relevant operation के लिए चलते हैं, Proxy reactive systems, ORMs, और API wrappers बनाने के लिए उपयोगी है जिन्हें किसी भी property access पर transparently react करना होता है।

उदाहरण: Practical Proxy Example

javascript

// Declare the constant `handler`; its value is built below
// Declare the constant `handler`; its value is built below
const handler = {
  // Define the method `get` taking `target`, `prop`
  // Define the method `get` taking `target`, `prop`
  get(target, prop) {
    // Print `Accessed ${prop}` to the console
    // Print `Accessed ${prop}` to the console
    console.log(`Accessed ${prop}`);
    // Return `Reflect.get(target, prop)` from this function
    // Return `Reflect.get(target, prop)` from this function
    return Reflect.get(target, prop);
  },
};
// Declare the constant `logged` as a new `Proxy` instance
// Declare the constant `logged` as a new `Proxy` instance
const logged = new Proxy({ id: 1 }, handler);
// Print `logged.id` to the console
// Print `logged.id` to the console
console.log(logged.id);

Live Example

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson JS WeakMap and WeakSet Next Lesson → JS Error Handling

JS Proxy और Reflect

Proxy की बुनियादी बातें

Property Changes को Intercept करना

Reflect इस्तेमाल करना

Proxy के साथ Validation

Practical Proxy Example

Chapter Quiz — Complete all 6 topics to unlock

Login to run this code