<!DOCTYPE html>
مفهوم البرمجة الشيئية في JavaScript: البروتوتايب والفئات
<br> body {<br> font-family: 'Arial', sans-serif;<br> direction: rtl;<br> text-align: right;<br> padding: 20px;<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code>h1, h2, h3, h4 { text-align: center; } code { background-color: #f0f0f0; padding: 5px; font-family: 'Courier New', monospace; } pre { background-color: #f0f0f0; padding: 10px; font-family: 'Courier New', monospace; overflow-x: auto; } img { max-width: 100%; height: auto; display: block; margin: 20px auto; } </code></pre></div> <p>
مفهوم البرمجة الشيئية في JavaScript: البروتوتايب والفئات
مقدمة
تعتبر البرمجة الشيئية (OOP) من أهم أساليب البرمجة الحديثة، حيث تتيح تنظيم الكود بشكل أفضل وتسهيل إعادة الاستخدام، وتحسين قابلية الصيانة. في JavaScript، توجد طريقتان رئيسيتان لتنفيذ مبادئ البرمجة الشيئية: النماذج الأولية (Prototypes) والفئات (Classes).
في هذه المقالة، سنستكشف مفهوم البرمجة الشيئية في JavaScript، ونلقي الضوء على ميزات كل من النماذج الأولية والفئات، مع تقديم أمثلة توضيحية.
البرمجة الشيئية: المبادئ الأساسية
قبل الغوص في تفاصيل النماذج الأولية والفئات في JavaScript، دعونا نلقي نظرة سريعة على مبادئ البرمجة الشيئية الأساسية:
-
التجريد (Abstraction):
تخفي التفاصيل الداخلية للكود، مما يركز على عرض واجهة بسيطة للتعامل معها. -
التغليف (Encapsulation):
يقوم بدمج البيانات والوظائف معًا في وحدة واحدة، مع التحكم في الوصول إليها. -
التوارث (Inheritance):
تتيح إنشاء كائنات جديدة من كائنات موجودة، مع إمكانية إضافة ميزات جديدة أو تعديل خصائص موجودة. -
التعدد الشكل (Polymorphism):
يسمح بتنفيذ نفس السلوك بطرق مختلفة، بناءً على نوع الكائن.
البرمجة الشيئية باستخدام النماذج الأولية في JavaScript
تعتمد JavaScript بشكل أساسي على النماذج الأولية (Prototypes) لتنفيذ مبادئ البرمجة الشيئية. في هذا النهج، يتم إنشاء الكائنات من خلال "نموذج أولي" يُعدّ بمثابة قالب لإنشاء كائنات جديدة.
كل كائن في JavaScript له نموذج أولي خاص به، ويُمكنه الوصول إلى خصائص ووظائف هذا النموذج الأولي.
مثال توضيحي
// تعريف النموذج الأولي
function Animal(name, age) {
this.name = name;
this.age = age;
}// إضافة وظيفة للنموذج الأولي
Animal.prototype.speak = function() {
console.log("Animal sound");
};// إنشاء كائن جديد
let dog = new Animal("Buddy", 3);
let cat = new Animal("Whiskers", 2);// إظهار الخصائص
console.log(dog.name); // "Buddy"
console.log(dog.age); // 3// استدعاء الوظيفة من النموذج الأولي
dog.speak(); // "Animal sound"
cat.speak(); // "Animal sound"
في المثال أعلاه، أنشأنا النموذج الأولي
Animal
، ثم أضفنا الوظيفة
speak
إليه. عند إنشاء كائنات جديدة من
Animal
، تكون هذه الكائنات قادرة على الوصول إلى وظيفة
speak
من خلال سلسلة البروتوتايب.
البرمجة الشيئية باستخدام الفئات في JavaScript
مع إصدار ES6 من JavaScript، تم تقديم مفهوم الفئات (Classes) الذي يوفر طريقة أكثر سهولة ونظافة لتنفيذ البرمجة الشيئية.
الفئات تُشبه "نماذج أولية" تُعرّف خصائص ووظائف لكائن معين.
مثال توضيحي
// تعريف الفئة
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}speak() {
console.log("Animal sound");
}
}// إنشاء كائنات جديدة
let dog = new Animal("Buddy", 3);
let cat = new Animal("Whiskers", 2);// إظهار الخصائص
console.log(dog.name); // "Buddy"
console.log(dog.age); // 3// استدعاء الوظيفة
dog.speak(); // "Animal sound"
cat.speak(); // "Animal sound"
في هذا المثال، عرفنا فئة
Animal
مع البناء
constructor
الذي يحدد الخصائص، ووظيفة
speak
. تُشبه الفئات النماذج الأولية في عملها، لكنها توفر طريقة أكثر سهولة ووضوحًا.
التوارث في JavaScript
تتيح البرمجة الشيئية إعادة استخدام الكود من خلال التوارث (Inheritance). باستخدام التوارث، يمكن إنشاء كائنات جديدة من كائنات موجودة، مع إمكانية إضافة خصائص جديدة أو تعديل خصائص موجودة.
التوارث باستخدام النماذج الأولية
// النموذج الأولي للحيوان
function Animal(name, age) {
this.name = name;
this.age = age;
}Animal.prototype.speak = function() {
console.log("Animal sound");
};// النموذج الأولي للكلب
function Dog(name, age, breed) {
Animal.call(this, name, age); // استدعاء البناء من النموذج الأولي للحيوان
this.breed = breed;
}// ربط Dog بالنموذج الأولي لـ Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;// إضافة وظيفة محددة للكلب
Dog.prototype.bark = function() {
console.log("Woof!");
};// إنشاء كائن من Dog
let myDog = new Dog("Max", 5, "Golden Retriever");myDog.speak(); // "Animal sound"
myDog.bark(); // "Woof!"
console.log(myDog.breed); // "Golden Retriever"
التوارث باستخدام الفئات
// فئة الحيوان
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}speak() {
console.log("Animal sound");
}
}// فئة الكلب
class Dog extends Animal {
constructor(name, age, breed) {
super(name, age); // استدعاء البناء من فئة الحيوان
this.breed = breed;
}bark() {
console.log("Woof!");
}
}// إنشاء كائن من Dog
let myDog = new Dog("Max", 5, "Golden Retriever");myDog.speak(); // "Animal sound"
myDog.bark(); // "Woof!"
console.log(myDog.breed); // "Golden Retriever"
التعدد الشكل في JavaScript
التعدد الشكل (Polymorphism) هو مفهوم يسمح بتنفيذ نفس السلوك بطرق مختلفة، بناءً على نوع الكائن.
مثال توضيحي
class Animal {
speak() {
console.log("Animal sound");
}
}class Dog extends Animal {
speak() {
console.log("Woof!");
}
}class Cat extends Animal {
speak() {
console.log("Meow!");
}
}// إنشاء كائنات
let dog = new Dog();
let cat = new Cat();// استدعاء الوظيفة speak
dog.speak(); // "Woof!"
cat.speak(); // "Meow!"
في هذا المثال، كل من الكائن
dog
والكائن
cat
يُنفذان نفس الوظيفة
speak
، لكن كل منهما يُنفذها بطريقة مختلفة.
اختيار النماذج الأولية أو الفئات
قد تتساءل عن أي أسلوب أفضل: النماذج الأولية أو الفئات؟ الحقيقة هي أنه لا يوجد أسلوب أفضل من الآخر، وتعتمد الاختيار على احتياجاتك وأسلوب البرمجة المُفضل.
-
النماذج الأولية:
تُعدّ مناسبة للمشاريع الصغيرة وسهولة الفهم، لكن قد تكون صعبة الإدارة في المشاريع الكبيرة. -
الفئات:
تُعدّ مناسبة للمشاريع الكبيرة وتعزز التنظيم، لكنها قد تتطلب بعض التعلم للإلمام بأساسياتها.
الخلاصة
تعتبر البرمجة الشيئية في JavaScript أداة قوية لتنظيم الكود وتحسين قابلية الصيانة. تُتيح النماذج الأولية و الفئات أسلوبين مختلفين لتنفيذ مبادئ OOP في JavaScript. اختيار الأسلوب المناسب يعتمد على احتياجات المشروع وخبرة المطور.
في هذه المقالة، استعرضنا مبادئ البرمجة الشيئية و شرحنا استخدام النماذج الأولية و الفئات مع أمثلة توضيحية. يُمكنك التوسع في التعلم من خلال التجربة و قراءة المزيد عن مُختلف مُفاهيم OOP في JavaScript.