0Pricing
JavaScript Academy · درس

إنشاء Proxy

غلّفوا الكائنات لاعتراض العمليات.

إنشاء Proxy درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ما هو Proxy؟

يغلّف Proxy كائنًا، ويتيح لك اعتراض العمليات الأساسية مثل قراءة الخصائص وكتابتها وحذفها.

تنشئ Proxy باستخدام new Proxy(target, handler)، حيث يحدد المعالج اعتراضات لتخصيص السلوك.

معالج فارغ

عند استخدام معالج فارغ، يتصرف Proxy تمامًا مثل الكائن الهدف. وتمر كل عملية مباشرةً من خلاله.

const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});

console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);

يشترك الكائن الهدف وProxy في الحالة

لا ينسخ Proxy الكائن الهدف، بل يشير كلاهما إلى الكائن الأساسي نفسه؛ لذلك يظهر التغيير الذي يُجرى عبر أيٍّ منهما في الآخر.

const target = { count: 0 };
const proxy = new Proxy(target, {});

proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);

إضافة اعتراض get

يعترض اعتراض get عمليات قراءة الخصائص. وفي هذه الحالة، تُسجَّل كل قراءة قبل إعادة القيمة.

const proxy = new Proxy({ name: 'Ada' }, {
  get(target, prop) {
    console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.name);

معاملات الاعتراض

يتلقى اعتراض get الكائن target واسم property وreceiver (وهو Proxy). وأنت تحدد القيمة التي سيعيدها.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 'missing';
  }
});

console.log(proxy.a);
console.log(proxy.b);

خصائص محسوبة عند القراءة

يمكن لاعتراض get إعادة قيم لا يخزنها الكائن الهدف فعليًا، وذلك بحسابها عند الطلب.

const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
  get(target, prop) {
    if (prop === 'full') return target.first + ' ' + target.last;
    return target[prop];
  }
});

console.log(proxy.full);

إضافة اعتراض set

يعترض اعتراض set عمليات الكتابة. ويجب أن يعيد true للإشارة إلى نجاح العملية، وإلا فستُعامل عملية الإسناد على أنها فاشلة.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    console.log('setting ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.score = 42;
console.log(proxy.score);

اعتراض has

يعترض اعتراض has معامل in، مما يتيح لك تخصيص عمليات التحقق من العضوية.

const proxy = new Proxy({ a: 1 }, {
  has(target, prop) {
    console.log('checking ' + prop);
    return prop in target;
  }
});

console.log('a' in proxy);
console.log('b' in proxy);

اعتراض deleteProperty

يعترض اعتراض deleteProperty العملية delete. أعد true عند النجاح.

const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
  deleteProperty(target, prop) {
    console.log('deleting ' + prop);
    delete target[prop];
    return true;
  }
});

delete proxy.secret;
console.log(Object.keys(proxy));

اعتراضات كثيرة متاحة

إلى جانب get وset، تدعم Proxies اعتراضات لـ has وdeleteProperty وownKeys وapply (للدوال) وconstruct وغير ذلك. لا تنفذ إلا الاعتراضات التي تحتاج إليها.

const proxy = new Proxy({ x: 1, y: 2 }, {
  ownKeys(target) {
    console.log('listing keys');
    return Object.keys(target);
  }
});

console.log(Object.keys(proxy));

لماذا تهم Proxies

تتيح لك Proxies إضافة التحقق والتسجيل والقيم الافتراضية والتفاعلية دون تغيير الكائن الهدف. وهي تشغّل أنظمة التفاعلية في أطر عمل مثل Vue. ستتعمق لاحقًا في اعتراضَي get وset.

const logged = new Proxy({ v: 0 }, {
  get: (t, p) => { console.log('get ' + p); return t[p]; },
  set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);

تحقق سريع

ماذا ينشئ new Proxy(target, handler)؟

مراجعة: إنشاء Proxy

لقد تعلمت اعتراض عمليات الكائنات:

  • يغلّف new Proxy(target, handler) كائنًا باستخدام اعتراضات.
  • يمرر المعالج الفارغ كل شيء مباشرةً، ويشترك Proxy والكائن الهدف في الحالة.
  • تشمل الاعتراضات الشائعة: get وset وhas وdeleteProperty وownKeys.
  • يجب أن يعيد اعتراضا set وdelete القيمة true عند النجاح.

الأسئلة الشائعة

هل درس «إنشاء Proxy» مجاني؟

نعم — نص درس «إنشاء Proxy» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «إنشاء Proxy»؟

غلّفوا الكائنات لاعتراض العمليات. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «إنشاء Proxy»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. إنشاء Proxy
  2. اعتراضا get وset
  3. واجهة Reflect API
  4. حالات استخدام عملية لـ Proxy
← العودة إلى JavaScript Academy