درود دوستان جاوااسکریپتی! یه برنامه خوب برنامه‌ای هست که توی اون بتونیم کنترل مناسبی روی داده‌ها، ورودی و خروجی‌ها داشته باشیم. آبجکت‌ها مهمترین و پراستفاده‌ترین نوع داده توی جاوااسکریپت هستن و گاهی اوقات می‌خوایم کنترل بیشتری روی یک آبجکت خاص داشته باشیم. مثلاً می‌خوایم خوندن پراپرتی‌های آبجکت یا مقدار دادن به اونها رو کنترل کنیم.

یکی از بهترین راه‌های کنترل یک آبجکت، استفاده از پراکسی‌ها هست. با این ویژگی کارهای جالبی میشه انجام داد که توی ادامه با چند تا از اون‌ها آشنا خواهیم شد. همچنین جالبه که بدونیم توی فریم‌ورک Vue خیلی فراوون از این ویژگی استفاده شده. پراکسی از ES6 وارد جاوااسکریپت شد.

موارد زیر رو توی این قسمت بررسی می‌کنیم:

 

پراکسی (Proxy) چیه؟ 🤔

پراکسی آبجکتی هست که می‌تونه بیشتر اتفاق‌هایی که برای یک آبجکت دیگه رخ میده رو کنترل کنه. مثلاً خوندن، تغییر مقدار یا حذف یک پراپرتی.

یک پراکسی در واقع یک واسط یا Wrapper هست برای یک آبجکت دیگه تا عملیاتی که برای آبجکت اصلی رخ میده رو مدیریت کنه. مثلاً اگه بخوایم مقدار یک پراپرتی از یک آبجکت رو عوض کنیم، ابتدا این دستور باید از پراکسی عبور کنه تا تغییرات روی آبجکت اصلی اعمال بشه. اینطوری کنترل بیشتری می‌تونیم روی آبجکت داشته باشیم.

نحوه پراکسی کردن یک آبجکت به صورت زیر هست:

const myProxy = new Proxy(obj, handler);

توی کد بالا آرگومان اول (obj) آبجکتی هست که قصد داریم اون رو مدیریت کنیم. آرگومان دوم که معمولاً با عنوان هندلر (handler) شناخته میشه هم یک آبجکت هست که تنظیمات پراکسی توی اون تعریف میشه.

بهتره با مثال با این ویژگی آشنا بشیم. می‌خوایم آبجکت user رو پراکسی کنیم:

const user = { name: "Dash" };

const proxiedUser = new Proxy(user, {
  /* ... */
});

alert(user.name);        // Dash
alert(proxiedUser.name); // Dash

اینجا آبجکت user پراکسی شد. همونطور که توی خط ۸ می‌بینیم، با پراکسی هم می‌تونیم به اعضای آبجکت دسترسی داشته باشیم. ولی با این کد هیچ اتفاقی نخواهد افتاد. چون هندلر خالی هست و هنوز چیزی ننوشتیم که بتونیم آبجکت user رو مدیریت کنیم.

اگه بخوایم وقتی که یک پراپرتی از آبجکت فراخونی میشه رو مدیریت کنیم، توی هندلر از متد get استفاده می‌کنیم: