❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

جافاسكربتالكلاس

  • مفهوم الكلاس
  • تعريف كلاس جديد
  • إضافة خصائص في الكلاس
  • إضافة دوال في الكلاس
  • مفهوم كونستركتور الكلاس
  • وضع قيم إفتراضية في الكونستركتور

مفهوم الكلاس

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

في هذا الدرس ستتعلم كيفية إنشاء كلاس جديد و كيفية إنشاء كائنات منه خطوة خطوة.

تعريف كلاس جديد

لتعريف كلاس جديد نكتب الكلمة class، يليها الإسم الذي نريد إعطاؤه له، ثم نضع أقواس تحدد بدايته و نهايته.

في المثال التالي قمنا بتعريف كلاس جديد إسمه Person.

مثال

class Person {
}
class Person { }

أول حرف في إسم الكلاس أكتبه دائماً كحرف كبير ( Capital Letter ) فهذا هو المتعارف عليه.


إنشاء كائن من الكلاس

لإنشاء كائن من الكلاس نستخدم الكلمة new و يليها كونستركتور ( Constructor ) الكلاس.

في المثال التالي قمنا بإنشاء كائن من الكلاس Person إسمه p.

مثال

// هنا قمنا بتعريف الكلاس
class Person {
}
// هنا قمنا بإنشاء كائن منه
p = new Person();
// هنا قمنا بتعريف الكلاس class Person { } // هنا قمنا بإنشاء كائن منه p = new Person();

في المثال السابق Person() يعتبر الكونستركتور الإفتراضي الموجود في الكلاس Person حيث أن مفسر جافاسكربت ينشئه له بشكل تلقائي إن لم نفعل ذلك و لهذا يمكننا استخدامه.

إضافة خصائص في الكلاس

الخصائص ( Attributes ) هي الأشياء التي يتم وضعها في الكلاس (كالمتغيرات، المصفوفات و الكائنات) و التي سيتم إعطاء نسخة خاصة منها لكل كائن يتم إنشاؤه منه.

في المثال التالي قمنا بتعريف كلاس إسمه Person يحتوي على 3 خصائص.

مثال

class Person {
name;
job;
age;
}
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>');
// 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>');
}
}
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();
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() {
}
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();
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();
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();
جرب الكود
الدرس التالي❯ ❮الدرس السابق