التعرف على الكلاس في جافاسكربت JavaScript الدرس

الكائنات calss

درس اليوم من اهم الدروس , يجب عليكم تقانه و التدرب عليه عدة مرات لأنه اذا اتقنته سوف يُسهِّل عليكم كثير اشياء في لغة الجافاسكربت, الكلاس اتى تقريباً بديل عن الفنكشن.

الشكل العام له

class User{

constructor(){

}

}

var user = new User();

اولاً نكتب class وبعدها نضع اسم للكلاس كما بالشكل السابق وضعناه User يعني إسم للكلاس وبعدها فتحنا اقواس معكوفة و ضمنها نكتب constructor ثم فتحنا اقواس معكوفه مرة ثانيه ,ولكي يعمل هذا الكلاس نكتب خارجه متغير بإسم الكلاس ونعين له الكلمه new و نضع اسم الكلاس.

البديل للفنكشن function في الكلاس هي الميثود methods, الميثود تقريباً بنفس عمل function لكن لا نكتب بالبداية فنكشن نكتب اسم الميثود بالبداية .

مثال

class User{

           constructor(){

        }
         changeBackground(){        }

}

var user = new User();

في مثالنا السابق الميثود هو changeBackground.
لنأخذ مثال مصور للفهم اكثر, نضع اولاً id للوسم body في ملف html كالتالي

ثم نفتح ملف الجافاسكربت و نكتب اكوادنا كما بالصورة التالية

كما نلاحظ بالصورة انشأنا ميثود هو تغيير الخلفية changeBackground ووضعنا الايدي له "body" و اعطيناه الخاصية style.background للتعرف انه نريد تغيير خلفية الصفحة و اعطيناها اللون الاحمر "red", و بالنهاية وضعنا تعريف التغيير عبر user.changeBackgroun و عندما نفتح ملفنا هذا في المتصفح سيظهر كالتالي

توجد طريقة اخرى لعرض البيانات وهي تنفيذ الأوامر الذي ضمن constructor

كما لاحظنا بالاسطر الاخيرة كتبنا windo.load و عيننا له الكلاس User, اي عندما يتم تحميل الصفحة html يتم تنفيذ الكلاس User, و استخدمنا الخاصيه this في constructor و الميثود الذي نريد تشغيلها حتى يتم تنفيذ هذه الأوامر, و سيعرض لنا نفس النتيجه خلفيه حمراء.

سنشرح الان كيفية انشاء كلاس مع باراميتر,يمكن اعتبار البارميتر كمتغير