JS / الكلاس

الناشر :كودا فوكس -

الكلاس

مفهوم الكلاس

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

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

JS - الكلاس


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

لتعريف كلاس جديد نكتب الكلمة 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 خصائص.
بعدها قمنا بإنشاء كائن منه مع إعطاء قيمة لكل خاصية يملكها، و من ثم قمنا بعرض جميع قيم خصائصه.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <script>
		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 = 'Ahmed';
		p.job = 'Programmer';
		p.age = 29;

		// لطباعة قيم خصائصه p من الكائن printInfo() هنا قمنا باستدعاء الدالة
		p.printInfo();
    </script>
</body>
</html>

إضافة دوال في الكلاس

الكلاس يمكنه أن يحتوي على دوال ( 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() لعرض قيم خصائصه.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <script>
		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('Ahmed', 'Programmer', 29);

		// لطباعة قيم خصائصه p من الكائن printInfo() هنا قمنا باستدعاء الدالة
		p.printInfo();
    </script>
</body>
</html>

مفهوم كونستركتور الكلاس

الكونستركتور ( Constructor ) يمكن إضافته في الكلاس لجعل عملية إنشاء الكائنات منه أكثر سهولة، حيث أنه يمكن من خلاله إنشاء الخصائص و تمرير القيم لها بشكل مباشر.

في حال لم تقم بإضافة كونستركتور بنفسك في الكلاس فإن مترجم جافاسكربت سيضيف واحد فارغ فيه كما يلي.

📋
constructor() {

}

يتم تنفيذ الأوامر الموضوعة في الكونستركتور في اللحظة التي يتم فيها إنشاء كائن من الكلاس.


حل مشكلة تضارب الأسماء

التعامل مع الكونستركتور مشابه جداً للتعامل مع الدوال حيث أنه يمكن وضع باراميترات فيه و يمكن إعطاءها قيم أولية أيضاً.
بفضل الكلمة this يمكنك استخدام نفس الأسماء للباراميترات و الخصائص و التفريق بسهولة بينهما.

إذا استخدمت الكلمة this للإشارة إلى خاصية غير موجودة في الكلاس فإنه سيتم إضافتها كخاصية جديدة فيه.


إضافة كونستركتور في الكلاس

في المثال التالي قمنا بتعريف كلاس إسمه Person يحتوي على كونستركتور من خلاله يمكن تعريف خصائص الكلاس و تمرير القيم إليها، بالإضافة إلى دالة إسمها printInfo() تسمح بعرض قيم الخصائص.

بعدها قمنا بإنشاء كائن منه و تمرير قيم لخصائصه بشكل مباشر، و من ثم قمنا باستدعاء الدالة printInfo() لعرض قيم خصائصه.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <script>
		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('Ahmed', 'Programmer', 29);

		// لطباعة قيم خصائصه p من الكائن printInfo() هنا قمنا باستدعاء الدالة
		p.printInfo();
    </script>
</body>
</html>

بما أن الكونستركتور يحتوي على 3 باراميترات، كان لا بد لنا و أن نمرر قيمة لكل باراميتر منهم عند إنشاء الكائن.

وضع قيم إفتراضية في الكونستركتور

يمكنك وضع قيم إفتراضية لباراميترات الكونستركتور حتى لا تكون مجبر على تمرير قيمة لكل باراميتر منهم عند إنشاء كائنات من الكلاس.
للدقة فإن الباراميتر الذي لا يتم تمرير قيمة له عند إنشاء الكائن سيستخدم القيمة الإفتراضية الموضوعة فيه.


التعامل مع القيم الإفتراضية

في المثال التالي قمنا بتعريف كلاس إسمه Person يحتوي على كونستركتور الباراميترات فيه تملك قيم إفتراضية، بالإضافة إلى دالة إسمها printInfo() تسمح بعرض قيم خصائصه.

بعدها قمنا بإنشاء كائنين منه على النحو التالي:

  • في الكائن الأول لم نمرر قيم حتى يتم استخدام القيم الإفتراضية.
  • في الكائن الثاني قمنا بتمرير قيم لخصائصه بشكل مباشر

في النهاية قمنا باستدعاء الدالة printInfo() من كلا الكائنين لعرض قيم خصائصهما.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <script>
		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('Ahmed', 'Programmer', 29);

		// لطباعة قيم خصائصهما p2 و p1 من الكائنين printInfo() هنا قمنا باستدعاء الدالة
		p1.printInfo();
		p2.printInfo();
    </script>
</body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال