تحية! سأخبرك اليوم عن كيفية استخدام المصحح لحل مشكلة JavaScript غير التافهة ، في رأيي.في JavaScript ، الكائنات هي نوع بيانات مركب ؛ يتم تمرير قيمتها حسب المرجع. بمعنى آخر ، عندما نقوم بتمرير كائن إلى دالة كمعلمة ، أو في أي مكان يمكننا تغيير خصائصه. باستخدام تعليمة تتكون من تعبير متغير يقوم بتخزين رابط ، وكذلك مشغلي النقطة والتخصيص. بعد ذلك ، ستتلقى الإرشادات الأخرى التي تعمل أو ستعمل مع هذا المتغير / المعلمة تغيير خاصية حسب المرجع.
غالبًا ما يشوه هذا السلوك بيانات المستخدم ويؤدي إلى حدوث أخطاء وغير مرغوب فيه.
قد يستغرق العثور على مصدر هذه التغييرات في الممتلكات غير المرغوب فيها وقتًا طويلاً: لذلك قد يكون البرنامج كبيرًا بالفعل ويتألف من مئات الآلاف من التعليمات.
دعنا ننظر إلى مثال بسيط.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Debug property mutation example</title> <script> const user = { firstName: 'Vasilij', middleName: 'Alibabaevich', lastName: 'Radner', aka: 'Alibaba', getFullName() { return `${this.lastName} ${this.firstName.slice(0, 1)}. ${this.middleName.slice(0, 1)}.` } }; </script> <script src="object-property-mutation.js" type="application/javascript"></script> </head> </head> <body> <script> Promise.resolve(user).then(user.getFullName.bind(user)).then(console.log); </script> </body> </html>
الآن لا يعمل برنامج الويب ، لأنه يوجد خطأ في وحدة التحكم ولا يوجد إخراج بالاسم الكامل.
نقرأ أعلى رسالة في وحدة التحكم:
Uncaught (in promise) TypeError: Cannot read property 'slice' of undefined
خطأ مثل: لم تتم معالجته (كوعود): لا أستطيع قراءة خاصية الشريحة من غير معرف.
انقر على الرابط وانتقل إلى مكان الخطأ.
getFullName() { return `${this.lastName} ${this.firstName.slice(0, 1)}. ${this.middleName.slice(0, 1)}.` }
نرى أن التعبير الخاطئ
this.firstName.slice(0, 1)
يتكون من أربعة مشغلين:
- اثنين من مشغلي نقطة
- فاصل واحد فاصل
- عامل تجميع واحد - زوج من الأقواس
دعنا نقرأ التعليمات. يتم تقييم التعبير الأيسر أولاً
this.firstName
وهو يتألف من عامل نقطة ، على اليسار التعبير الأساسي لهذا ، والمعرف firstName على اليمين. ستكون نتيجة هذا التعبير غير محددة. تنفيذ عبارة النقطة التالية يسبب خطأ. نظرًا لأن مشغل dot يعمل فقط مع أنواع الكائنات ، فإن تنفيذه من غير معرف يؤدي إلى حدوث خطأ - لا يمكنني الحصول على خاصية الشريحة من غير معرف.
اتضح أنه في مكان ما تم تعيين هذه الخاصية على ...
لحل هذه المشكلة ، دعونا نحاول عكس ذلك. سوف نستخدم أداة التصحيح
لإيقاف الاستثناء . بالانتقال من مكان الخطأ إلى أسفل مكدس الاتصال ، نحاول الانتقال إلى التعليمات التي غيرت الخاصية.
حدد أداة التوقف عند الاستثناء
نرى أن هناك مكالمتين فقط في المكدس. انتقل إلى المكالمة السابقة.
نرى أنه لا توجد تعليمات صريحة تغير خاصية الاسم الأول.
نستنتج أن التغيير لا يحدث في مكدس الاستدعاءات هذا.
كيف تحب ذلك؟
وكيف يمكن العثور على الشرير الذي قام بتغيير خاصية الكائن الخاص بي؟
الرجاء كتابة التعليقات كيف تجدها؟
الرجال الذين يعملون معي والذين أخبرتهم بك ، يرجى كتابة علامة النجمة في التعليق.
أنا مهتم جدًا بمعرفة كيفية حل متخصصي JavaScript الآخرين لهذه المشاكل.
كما تعلمون ، عندما واجهت هذا السلوك جافا سكريبت لأول مرة ، قضيت بضع ساعات في التحقيق وتمزيق خصلة شعر من الانفجارات ...
تعطيل أداة الإيقاف المؤقت على استثناء.
لذلك ، ها هي خطتنا الجديدة ، سنحدد خاصية الاسم الأول في كائن المستخدم باستخدام getter و setter.
نضيف عبارة تصحيح الأخطاء إلى setter باستخدام عبارة مصحح الأخطاء وعبارة منقوطة.
const user = { _firstName: 'Vasilij', set firstName(value) { debugger; this._firstName = value; }, get firstName() {return this._firstName}, middleName: 'Alibabaevich', lastName: 'Radner', aka: 'Alibaba', getFullName() { return `${this.lastName} ${this.firstName.slice(0, 1)}. ${this.middleName.slice(0, 1)}.`; } };
عند الانتقال إلى جانب مكدس الاستدعاءات ، نجد إرشادات تغير خاصية الاسم الأول.
توقف مصحح الأخطاء في setter قبل كتابة القيمة الجديدة إلى الكائن.
نرى أن قيمة قيمة المعلمة غير محددة.
الآن ، باستخدام مكدس الاتصال ، يمكننا الانتقال بسهولة إلى المكالمة السابقة.
ثالثا ، النصر aaaaaah.
هناك طريقة أكثر بساطة لحل هذه المشكلة باستخدام أداة تصحيح الأخطاء التي
تتوقف عند الاستثناء .
فيما يلي خطتنا الجديدة: سنجعل كائن المستخدم ليس كائنًا ، وباستخدام أداة
التوقف الاستباقي ، يمكننا بسهولة الوصول إلى التعليمات الخاطئة.
بما أننا نعلم أنه عند محاولة الحصول على خاصية من غير معروف ، يحدث خطأ.
نقوم بتشغيل أداة إيقاف الاستثناء ، وقم بتعيين متغير المستخدم إلى غير محدد.
const user = undefined;
توقفنا مرة أخرى في المكان الذي تم فيه تشويه خاصية الاسم الأول.
هذا كل ما أردت إخبارك به اليوم حول تصحيح التغييرات غير المرغوب فيها على الكائنات.
شكرا لقراءة المقال. مثل ، الاشتراك في القناة ، ومشاركة هذا الفيديو والمقال مع الأصدقاء ، كل التوفيق.
github.com/NVBespalov/js-lessons/tree/error/property-mutation