الفئات في JavaScript
توضح هذه المقالة الفئات في JavaScript۔
YouTube Video
الفئات في JavaScript
في JavaScript، تجمع الفئة بين مفهوم البرمجة الكائنية التوجه وتعمل كقالب للكائنات۔ من خلال الفئات، يمكنك تحديد الخواص والأساليب للكائن بإيجاز، مما يحسن من إمكانية إعادة الاستخدام وتنظيم الكود۔ تم تقديم بناء الجملة الخاص بالفئات في JavaScript مع إصدار ES6۔
تعريف الفئة
يتم تعريف الفئة باستخدام الكلمة الأساسية class وعادةً ما يتم تهيئتها باستخدام أسلوب يسمى المُنشئ۔
1class Person {
2 // Constructor method (called when the class is instantiated)
3 constructor(name, age) {
4 this.name = name; // Property definition
5 this.age = age;
6 }
7
8 // Method definition
9 greet() {
10 return `Hello, my name is ${this.name}`;
11 }
12}
13
14// Instantiation of the class
15const alice = new Person("Alice", 25);
16console.log(alice.greet()); // Hello, my name is Alice
- نقوم بتعريف فئة باستخدام
class Person۔ constructorهو أسلوب خاص يتم استدعاؤه تلقائيًا عند إنشاء كائن۔- تشير الكلمة الرئيسية
thisإلى النسخة (الكائن) الخاصة بالفئة داخل الفئة۔
خواص وأساليب الفئة
يمكن للفئة أن تحدد الخواص والأساليب۔ تمثل الخواص خصائص الكائن وتمثل الأساليب الوظائف التي يمتلكها۔
1class Car {
2 constructor(brand, model) {
3 this.brand = brand;
4 this.model = model;
5 }
6
7 // Method definition
8 drive() {
9 console.log(`Driving a ${this.brand} ${this.model}`);
10 }
11}
12
13const car1 = new Car("Toyota", "Corolla");
14car1.drive(); // Driving a Toyota Corolla
في هذا المثال، يتم إعلان فئة Car مع خاصيتي brand وmodel وأسلوب drive۔
وراثة الفئات
يمكن للفئات أن ترث من فئات أخرى۔ من خلال استخدام الوراثة، يمكنك إنشاء فئة جديدة بناءً على فئة موجودة وإضافة وظائف إضافية إليها۔
1class Animal {
2 constructor(name) {
3 this.name = name;
4 }
5
6 speak() {
7 console.log(`${this.name} makes a noise`);
8 }
9}
10
11// Inherit from the Animal class
12class Dog extends Animal {
13 constructor(name, breed) {
14 super(name); // Call the constructor of the parent class (Animal)
15 this.breed = breed;
16 }
17
18 // Override the method
19 speak() {
20 console.log(`${this.name} barks`);
21 }
22}
23
24const dog = new Dog("Rex", "German Shepherd");
25dog.speak(); // Rex barks
في هذا المثال، ترث فئة Dog من فئة Animal۔
- تُستخدم الكلمة الرئيسية
extendsللوراثة من فئةAnimal۔ - في المُنشئ لفئة
Dog، يتم استخدامsuper()لاستدعاء مُنشئ الفئة الرئيسية۔ يسمح لك هذا بوراثة عملية التهيئة الخاصة بالفئة الرئيسية۔ - داخل الفئة الموروثة، يمكنك تجاوز أساليب الفئة الرئيسية۔ في هذا المثال، بدلاً من "Rex يصدر ضجيجًا"، يتم عرض "Rex ينبح"۔
طرق ثابتة
عندما تقوم بتعريف طريقة ثابتة داخل صف، تكون الطريقة مرتبطة بالصف نفسه.۔ يمكن استدعاء الطرق الثابتة دون الحاجة إلى إنشاء مثيل من الصف.۔
1class MathUtils {
2 // Static method
3 static add(a, b) {
4 return a + b;
5 }
6}
7
8console.log(MathUtils.add(5, 10)); // 15
في هذا المثال، يحتوي الصف MathUtils على طريقة ثابتة تُدعى add.۔
- يتم استخدام الكلمة الرئيسية
staticلتعريف طريقة ثابتة.۔ - لا تنتمي الطرق الثابتة إلى الكائنات التي يتم إنشاؤها من الصف ويمكن استدعاؤها مباشرة من الصف نفسه.۔
الكواشف والمُعدِّلات
من خلال تعريف الكواشف والمُعدِّلات داخل صف، يمكنك تغليف استدعاء وضبط الخصائص.۔
1class Rectangle {
2 constructor(width, height) {
3 this.width = width;
4 this.height = height;
5 }
6
7 // Getter
8 get area() {
9 return this.width * this.height;
10 }
11
12 // Setter
13 set widthValue(newWidth) {
14 this.width = newWidth;
15 }
16}
17
18const rect = new Rectangle(10, 20);
19console.log(rect.area); // 200
20
21rect.widthValue = 15;
22console.log(rect.area); // 300
في هذا المثال، يعرف الصف Rectangle الكاشف area والمُعدِّل widthValue.۔
- يتم استدعاء الكاشف (
get) عند استرجاع قيمة خاصية.۔ - يتم استدعاء المُعدِّل (
set) عند ضبط قيمة خاصية.۔
الاختصار في كتابة الصفوف
في JavaScript، يتم تنفيذ بناء الجمل الخاصة بالصفوف داخليًا باستخدام دوال البناء والنماذج الأولية.۔ بناء جمل الصفوف هو اختصار في الكتابة لكتابة هذه الأمور بشكل أكثر اختصارًا.۔
1// Example without using class syntax
2function Person(name, age) {
3 this.name = name;
4 this.age = age;
5}
6
7Person.prototype.greet = function() {
8 return `Hello, my name is ${this.name}`;
9};
10
11const person = new Person("Alice", 25);
12console.log(person.greet()); // Hello, my name is Alice
في هذا المثال، يتم تعريف دالة بنائية Person، ويتم تعريف الطريقة greet باستخدام النموذج الأولي.۔
التعامل مع this
تشير الكلمة الرئيسية this داخل الصف إلى المثيل الخاص بذلك الصف.۔ مع ذلك، عند التعامل مع this داخل طرق الصف، يجب أن تدرك أن سلوكها قد يختلف حسب النطاق.۔ قد تنشأ مشاكل خاصة عند استخدام الطرق كوظائف استدعاء.۔
1class Counter {
2 constructor() {
3 this.count = 0;
4 }
5
6 increment() {
7 this.count++;
8 console.log(this.count);
9 }
10}
11
12const counter = new Counter();
13setTimeout(counter.increment, 1000); // NaN
14// NaN, since this.count is undefined, it becomes NaN after incrementing.
في مثل هذه الحالات، عند تمريرها كاستدعاء دالّي إلى setTimeout، قد يتغير المرجع الذي تشير إليه this.۔ لتجنب هذه المشكلة، يُوصى إما بتثبيت this باستخدام الطريقة bind أو استخدام دوال السهم.۔
1class Counter {
2 constructor() {
3 this.count = 0;
4 }
5
6 increment() {
7 this.count++;
8 console.log(this.count);
9 }
10}
11
12const counter = new Counter();
13
14// When using bind
15setTimeout(counter.increment.bind(counter), 1000);
16
17// When using an arrow function
18setTimeout(() => counter.increment(), 2000);الملخص
- الصفوف تُستخدم كقوالب لإنشاء الكائنات، وتعريف الخصائص والطرق.۔
- يمكنك استخدام الوراثة لتوسيع صف، مستفيدًا من مفاهيم البرمجة الكينونية.۔
- الطرق الثابتة تنتمي إلى الصف نفسه ويمكن استخدامها دون إنشاء مثيل.۔
- يمكنك تغليف الخصائص باستخدام الكواشف والمُعدِّلات.۔
- بنية الفئة في JavaScript هي سكر التركيب وتستخدم داخليًا الوراثة القائمة على النماذج الأولية۔
باستخدام الفئات، يمكنك التعامل مع البرمجة الكائنية بشكل أكثر طبيعية، وتحسين قابلية إعادة استخدام الكود وصيانته۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔