مفهوم الكلاس
الكلاس ( Class ) عبارة عن نوع بيانات جديد يتم تعريفه، و هذا النوع يمكنه أن يحتوي على دوال، متغيرات، مصفوفات إلخ..
في هذا الدرس ستتعلم كيفية إنشاء كلاس جديد و كيفية إنشاء كائنات منه خطوة خطوة.
الكلاس ( Class ) عبارة عن نوع بيانات جديد يتم تعريفه، و هذا النوع يمكنه أن يحتوي على دوال، متغيرات، مصفوفات إلخ..
في هذا الدرس ستتعلم كيفية إنشاء كلاس جديد و كيفية إنشاء كائنات منه خطوة خطوة.
لتعريف كلاس جديد نكتب الكلمة class، يليها الإسم الذي نريد إعطاؤه له، ثم نضع أقواس تحدد بدايته و نهايته.
في المثال التالي قمنا بتعريف كلاس جديد إسمه Person.
class Person { }
أول حرف في إسم الكلاس أكتبه دائماً كحرف كبير ( Capital Letter ) فهذا هو المتعارف عليه.
لإنشاء كائن من الكلاس نستخدم الكلمة new و يليها كونستركتور ( Constructor ) الكلاس.
في المثال التالي قمنا بإنشاء كائن من الكلاس Person إسمه p.
// هنا قمنا بتعريف الكلاس class Person { } // هنا قمنا بإنشاء كائن منه p = new Person();
في المثال السابق Person() يعتبر الكونستركتور الإفتراضي الموجود في الكلاس Person حيث أن مفسر جافاسكربت ينشئه له بشكل تلقائي إن لم نفعل ذلك و لهذا يمكننا استخدامه.
الخصائص ( Attributes ) هي الأشياء التي يتم وضعها في الكلاس (كالمتغيرات، المصفوفات و الكائنات) و التي سيتم إعطاء نسخة خاصة منها لكل كائن يتم إنشاؤه منه.
في المثال التالي قمنا بتعريف كلاس إسمه Person يحتوي على 3 خصائص.
class Person { name; job; age; }
أي كائن يتم إنشاؤه من الكلاس Person سيملك نسخته الخاصة من الخصائص الموجودة فيه.
في المثال التالي قمنا بتعريف كلاس إسمه Person يملك 3 خصائص.
بعدها قمنا بإنشاء كائن منه مع إعطاء قيمة لكل خاصية يملكها، و من ثم قمنا بعرض جميع قيم خصائصه.
// Person هنا قمنا بتعريف كلاس إسمه class Person { name; job; age; } // p إسمه Person هنا قمنا بإنشاء كائن من الكلاس p = new Person(); // p هنا قمنا بإعطاء قيم لجميع خصائص الكائن p.name = 'Mhamad'; p.job = 'Programmer'; p.age = 29; // p هنا قمنا بطباعة قيم خصائص الكائن document.write('Name: ' + p.name + '<br>'); document.write('Job: ' + p.job + '<br>'); document.write('Age: ' + p.age + '<br>');
الكلاس يمكنه أن يحتوي على دوال ( Methods ) خاصة به، بمعنى أنه يمكن استدعاءها من خلال الكائنات التي ننشئها منه فقط.
أي خاصية في الكلاس تريد الوصول إليها من دالة موجودة فيه يجب أن تضع this قبلها.
class Person { // خصائص الكلاس name; job; age; // دالة تابعة للكلاس printInfo() { document.write('Name: ' + this.name + '<br>'); document.write('Job: ' + this.job + '<br>'); document.write('Age: ' + this.age + '<br>'); } }
عند تعريف دالة بداخل الكلاس فإننا نكتب إسمها فقط بدون استخدام الكلمة function.
في المثال التالي قمنا بتعريف كلاس إسمه Person يحتوي على 3 خصائص و دالة إسمها printInfo() مهمتها طباعة جميع قيم الخصائص الموجودة فيه عندما يتم إستدعاءها.
بعدها قمنا بإنشاء كائن منه مع إعطاء قيمة لكل خاصية يملكها، و من ثم قمنا باستدعاء الدالة printInfo() لعرض قيم خصائصه.
class Person { // هنا قمنا بتعريف خصائص الكلاس name; job; age; // مهمتها طباعة قيم الخصائص عندما يتم استدعائها printInfo هنا قمنا بتعريف دالة إسمها printInfo() { document.write('Name: ' + this.name + '<br>'); document.write('Job: ' + this.job + '<br>'); document.write('Age: ' + this.age + '<br>'); } } // p إسمه Person هنا قمنا بإنشاء كائن من الكلاس p = new Person(); // p هنا قمنا بإعطاء قيم لجميع خصائص الكائن p.name = 'Mhamad'; p.job = 'Programmer'; p.age = 29; // لطباعة قيم خصائصه p من الكائن printInfo() هنا قمنا باستدعاء الدالة p.printInfo();
الكونستركتور ( Constructor ) يمكن إضافته في الكلاس لجعل عملية إنشاء الكائنات منه أكثر سهولة، حيث أنه يمكن من خلاله إنشاء الخصائص و تمرير القيم لها بشكل مباشر.
في حال لم تقم بإضافة كونستركتور بنفسك في الكلاس فإن مترجم جافاسكربت سيضيف واحد فارغ فيه كما يلي.
constructor() {
}يتم تنفيذ الأوامر الموضوعة في الكونستركتور في اللحظة التي يتم فيها إنشاء كائن من الكلاس.
التعامل مع الكونستركتور مشابه جداً للتعامل مع الدوال حيث أنه يمكن وضع باراميترات فيه و يمكن إعطاءها قيم أولية أيضاً.
بفضل الكلمة this يمكنك استخدام نفس الأسماء للباراميترات و الخصائص و التفريق بسهولة بينهما.
إذا استخدمت الكلمة this للإشارة إلى خاصية غير موجودة في الكلاس فإنه سيتم إضافتها كخاصية جديدة فيه.
في المثال التالي قمنا بتعريف كلاس إسمه Person يحتوي على كونستركتور من خلاله يمكن تعريف خصائص الكلاس و تمرير القيم إليها، بالإضافة إلى دالة إسمها printInfo() تسمح بعرض قيم الخصائص.
بعدها قمنا بإنشاء كائن منه و تمرير قيم لخصائصه بشكل مباشر، و من ثم قمنا باستدعاء الدالة printInfo() لعرض قيم خصائصه.
class Person { // هنا قمنا بتعريف كونستركتور الكلاس constructor(name, job, age) { this.name = name; // name سيتم وضعها في الخاصية name القيمة التي يتم تمريرها في الباراميتر this.job = job; // job سيتم وضعها في الخاصية job القيمة التي يتم تمريرها في الباراميتر this.age = age; // age سيتم وضعها في الخاصية age القيمة التي يتم تمريرها في الباراميتر } // مهمتها طباعة قيم الخصائص عندما يتم استدعائها printInfo هنا قمنا بتعريف دالة إسمها printInfo() { document.write('Name: ' + this.name + '<br>'); document.write('Job: ' + this.job + '<br>'); document.write('Age: ' + this.age + '<br>'); } } // p إسمه Person هنا قمنا بإنشاء كائن من الكلاس p = new Person('Mhamad', 'Programmer', 29); // لطباعة قيم خصائصه p من الكائن printInfo() هنا قمنا باستدعاء الدالة p.printInfo();
بما أن الكونستركتور يحتوي على 3 باراميترات، كان لا بد لنا و أن نمرر قيمة لكل باراميتر منهم عند إنشاء الكائن.
يمكنك وضع قيم إفتراضية لباراميترات الكونستركتور حتى لا تكون مجبر على تمرير قيمة لكل باراميتر منهم عند إنشاء كائنات من الكلاس.
للدقة فإن الباراميتر الذي لا يتم تمرير قيمة له عند إنشاء الكائن سيستخدم القيمة الإفتراضية الموضوعة فيه.
في المثال التالي قمنا بتعريف كلاس إسمه Person يحتوي على كونستركتور الباراميترات فيه تملك قيم إفتراضية، بالإضافة إلى دالة إسمها printInfo() تسمح بعرض قيم خصائصه.
بعدها قمنا بإنشاء كائنين منه على النحو التالي:
في النهاية قمنا باستدعاء الدالة printInfo() من كلا الكائنين لعرض قيم خصائصهما.
class Person { // هنا قمنا بتعريف كونستركتور الكلاس و قد وضعنا قيمة إفتراضية لكل باراميتر فيه constructor(name = 'unknown', job = 'unknown', age = 0) { this.name = name; // name سيتم وضعها في الخاصية name القيمة التي يتم تمريرها في الباراميتر this.job = job; // job سيتم وضعها في الخاصية job القيمة التي يتم تمريرها في الباراميتر this.age = age; // age سيتم وضعها في الخاصية age القيمة التي يتم تمريرها في الباراميتر } // مهمتها طباعة قيم الخصائص عندما يتم استدعائها printInfo هنا قمنا بتعريف دالة إسمها printInfo() { document.write('Name: ' + this.name + '<br>'); document.write('Job: ' + this.job + '<br>'); document.write('Age: ' + this.age + '<br><hr>'); } } // p1 إسمه Person هنا قمنا بإنشاء كائن من الكلاس p1 = new Person(); // p2 إسمه Person هنا قمنا بإنشاء كائن من الكلاس p2 = new Person('Mhamad', 'Programmer', 29); // لطباعة قيم خصائصهما p2 و p1 من الكائنين printInfo() هنا قمنا باستدعاء الدالة p1.printInfo(); p2.printInfo();
قم بتوليد تمارين لا نهائية بشكل تدريجي (10 في كل مرة) بناءً على هذا الدرس. كل تمرين مصمم لرفع مستوى تفكيرك المنطقي.