كائنات وكيل جافا سكريبت

عند العمل مع الكائنات ، يمكننا إنشاء ملفكائن وكيليعترض ويغير سلوك كائن موجود.

نقوم بذلك باستخدام ملفالوكيلكائن أصلي ، تم تقديمه في ES2015.

افترض أن لدينا ملفcarموضوع:

const car = {
  color: 'blue'
}

مثال بسيط للغاية يمكننا تقديمه هو إرجاع سلسلة نصية "لم يتم العثور عليها" عندما نحاول الوصول إلى خاصية غير موجودة.

يمكنك تحديد وكيل يتم استدعاؤه كلما حاولت الوصول إلى خاصية لهذا الكائن.

يمكنك القيام بذلك عن طريق إنشاء كائن آخر له امتدادget()الذي يستقبل الكائن الهدف والخصائص كمعلمات:

const car = {
  color: 'blue'
}

const handler = { get(target, property) { return target[property] ?? ‘Not found’ } }

الآن يمكننا تهيئة كائن الوكيل عن طريق الاتصالnew Proxy()، تمرير الكائن الأصلي ومعالجنا:

const proxyObject = new Proxy(car, handler)

حاول الآن الوصول إلى خاصية موجودة في ملفcarالكائن ، ولكن الرجوع إليه منproxyObject:

proxyObject.color //'blue'

هذا مجرد مثل الاتصالcar.color.

ولكن عند محاولة الوصول إلى خاصية غير موجودة فيcar، مثلcar.test، ستعودundefined. باستخدام الوكيل ، ستستعيد ملف'Not found'السلسلة ، لأن هذا ما قلناه لها.

proxyObject.test //'Not found'

نحن لا نقتصر علىget()طريقة في معالج الوكيل. كان هذا فقط أبسط مثال يمكننا كتابته.

لدينا طرق أخرى يمكننا استخدامها:

  • applyعندما نستخدم ملفاتapply()على الكائن
  • constructيتم استدعاؤه عندما نصل إلى منشئ الكائن
  • deletePropertyيتم تنفيذه عندما نحاول حذف خاصية
  • definePropertyيتم استدعاؤه عندما نحدد خاصية جديدة على الكائن
  • setيتم تنفيذه عندما نحاول تعيين خاصية

وهكذا. في الأساس يمكننا إنشاء بوابة حراسة تتحكم في كل ما يحدث على كائن ما ، وتوفر قواعد وضوابط إضافية لتنفيذ منطقنا الخاص.

طرق أخرى (تسمى أيضًاالفخاخ) يمكننا استخدام:

  • enumerate
  • getOwnPropertyDescriptor
  • getPrototypeOf
  • has
  • isExtensible
  • ownKeys
  • preventExtensions
  • setPrototypeOf

كل ما يقابل الوظيفة المعنية.

أنت تستطيعاقرأ المزيد عن كل من هؤلاء المتواجدين على شبكة مطوري موزيلا.

لنجعل مثالًا آخر باستخدامdeleteProperty. نريد منع حذف خصائص الكائن:

const car = {
  color: 'blue'
}

const handler = { deleteProperty(target, property) { return false } }

const proxyObject = new Proxy(car, handler)

إذا اتصلناdelete proxyObject.color، سنحصل على خطأ في النوع:

TypeError: 'deleteProperty' on proxy: trap returned falsish for property 'color'

Of course one could always delete the property directly on the car object, but if you write your logic so that that object is inaccessible and you only expose the proxy, that is a way to encapsulate your logic.


More js tutorials: