JS. الوكيل. تعثر لمعرفة حول

ستكون هذه المقالة ذات فائدة لأولئك الذين يستخدمون Proxy للتفاعل أو الانعكاس.
سلوك أساليب JS معروف لنا إذا استخدمناها ببساطة داخل كائن ما.
إذا تم تمرير طريقة عبر خاصية إلى كائن آخر ، فعندئذ تعمل مع ذلك ، والذي يتم تعريفه في إطار كائن آخر.

let obj1={prop1:'HEllo',method1(){console.log(this);}} let obj2={method2:obj1.method1}; obj2.method2(); 

هذا يجب أن يكون مفهوما بوضوح عند استخدام البروكسي.

 class MyProxy{ constructor(target){ return new Proxy(target,this); } get(target,prop){ console.log(target,prop); //Label1 return target[prop]; } } class PrimitiveType { constructor(target,prop) { this.target=target; this.prop=prop; } get(){ console.log(this);// Label2 return this.target[this.prop]; } } prim=new PrimitiveType({a:''},'a'); proxy= new MyProxy(prim); proxy.get(); 

والنتيجة هي أن console.log (Label2) ؛ سيعطينا كائن وكيل ، وبعد ذلك سيعمل الوكيل على كل من الهدف والدعامة (انظر Label1) ؛ لكن الرمز يبدو للعمل. ماذا تستحم.

تبدأ الطريقة في الاتصال بالكائن (هذا) من خلال وكيل. يكون هذا مناسبًا ومنطقيًا عندما نكتب انعكاسًا (انعكاسًا لخصائص الكائن وتغييرات في السلوك دون تغيير الكائن). ولكن إذا لم نكن نحتاج إليها ونحتاج إلى طريقة للعمل بشكل خاص مع الكائن الهدف ، فما الذي يجب علينا فعله؟ لماذا نبطئ الكود؟

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

كيفية الإصلاح

كما هو معروف ، تم تجاوز هذا بالفعل للأسلوب قبل استدعاء Handler.get في Proxy. تحتاج فقط إلى إعادة تعريفه مرة أخرى على النحو التالي:

 let answer=target[prop]; if(typeof target[prop] ==='function'){ answer=target[prop].bind(target); } 

نحصل على الكود التالي:

 class MyProxy{ constructor(target){ return new Proxy(target,this); } get(target,prop){ //     valueOf.       get let answer=target[prop]; if(typeof target[prop] ==='function'){ answer=target[prop].bind(target); } return answer; } } class PrimitiveType { constructor(target,prop) { this.target=target; this.prop=prop; } get(){ console.log(this); return this.target[this.prop]; } } prim=new PrimitiveType({a:''},'a'); proxy= new MyProxy(prim); proxy.get(); 

وأخيرا ، كمكافأة.

خلق سلسلة من التفاعل / التفكير. سيكون كل كائن متداخل وكيل:

 class MyProxy{ constructor(target){ return new Proxy(target,this); } get(target,prop){ let answer; let tp=target[prop];//    target - Proxy  target[prop] -getter if(typeof tp==='object' && tp!==null){ answer =new MyProxy(tp); } else if(typeof tp ==='function'){ //   .       answer=tp.bind(target); } else { answer=tp; } return answer; } } class PrimitiveType { constructor(target,prop) { this.target=target; this.prop=prop; } valueOf(){ console.log(this); return this.target[this.prop]; } } prim=new PrimitiveType({a:''},'a'); qwer={q:prim}; proxy= new MyProxy(qwer); proxy.q 

شكرا لاهتمامكم!