البرمجة الكائنية Object Oriented Programming، ربما عزيزي المبرمج قد سمعت عن هذا المصطلح كثيرا وربما قد تعلمته وتعاملت معه من قبل في لغات برمجة أخرى ولكن في مقالنا هذا سنشرح كيف تتعامل معه في لغة جافا سكريبت والتي تعتبر في أصلها لغة برمجة كائنية التوجه.

قبل الشروع في عرض البرمجة الكائنية في جافا سكريبت، يتوجب علينا في بادئ الأمر أن نقوم بتعريف ما هي البرمجة الكائنية.

ما هي البرمجة الكائنية أو object oriented programming ؟

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

البرمجة الكائنية

ماه هو الكائن object في البرمجة الكائنية object oriented programming؟

إذا لاحظت ستجد أن كل ما تراه في الحياة هو عبارة عن كائن object وكل كائن أو أوبجيكت له عدد من الخواص وله وظائف فمثلا إذا نظرت للعربية على أنها كائن فستجد أن لونها هو أحد خواصها وموديل السنة الخاص بها هو خاصية فيها ومثلا عدد الركاب فيها خاصية أخرى كما أنك سترى أحد وظائفها هو الانتقال عن طريقها من مكان إلى أخر، وبهذا المنطق فإن البرمجة الكائنية مستوحاة من الطبيعة باعتبار أن كل شئ يعتبر كائن.

بعد أن قمنا بتوضيح مفهوم البرمجة الكائنية فالأن سنقوم بتوضيح البرمجة الكائنية في جافا سكريبت وكيف تستخدمها في كتابة كود جافا سكريبت منسق ومنظم ومتبع بقواعد البرمجة الكائنية.

البرمجة الكائنية في جافا سكريبت

باعتبار أنك مطور جافا سكريبت فمن المؤكد أنك تعلم أن جافا سكريبت لها عدد من الاصدارات وتنقسم هذه الإصدارات لقسمين رئيسيين وهما

1- اصدارات قديمة

2- إصدارات حديثة من الجافا سكريبت ومتمثلة في إصدار جافا سكريبت es6 وما بعده من اصدارات

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

البرمجة الكائنية في جافا سكريبت في الاصدارات القديمة

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

function Car(color, type, price) {
   this.color = color;
   this.type = type;
   this.price = price;
}

في الكود السابق هذا هو شكل الكلاس الذي يتم انشاؤه من خلال دالة وما بداخلها يكون الخصائص الخاصة بهذا الكلاس أو الأوبجيكت Object، ولكي تضيف ميثود أو ما يسمى بدوال داخلية تقوم من خلالها بفعل شئ تابع لهذا الأوبجيكت فيجب عليك اتباع مبدأ النماذج أو prototypes كما موضح بالكود التالي

function Car(color, type, price) {
   this.color = color;
   this.type = type;
   this.price = price;
}
// make a method here to output the type of the car class
Car.prototype.outPutType = function () {
   console.log(this.type);
}
// make a method here to output the price of the car class
Car.prototype.calcPrice = function () {
   console.log(this.price);
}

في البرمجة الكائنية في جافا سكريبت يمثل الأوبجيكت أو الكلاس مجموعة من الأكواد التي يمكن أن تستخدمها أكثر من مرة وفي الكود السابق قمنا بتعريف كلاس يسمى “Car” وهذا الكلاس له أكثر من معامل أو براميتر ثم بعد ذلك سنبدأ في استخدام هذا الكلاس كما هو موضح بالشكل التالي:

function Car(color, type, price) {
   this.color = color;
   this.type = type;
   this.price = price;
}
// make a method here to output the type of the car class
Car.prototype.outPutType = function () {
   console.log(this.type);
}
// make a method here to output the price of the car class
Car.prototype.calcPrice = function () {
   console.log(this.price);
}
// instantiate Car class
var hundaCar = new Car("red", "Hunda", 130000);
// call the hundaCar "outputType" function
hundaCar.outPutType();
// output: Hunda
// call the hundaCar "calcPrice" function
hundaCar.calcPrice();
// output: 130000

هذه كانت هي الطريقة القديمة في البرمجة الكائنية في جافا سكريبت لكي تقوم بانشاء أوبجيكت ومن ثم البدء في استخدامه وكما ترى أنها كانت تعتمد على النماذج prototypes.

البرمجة الكائنية في جافا سكريبت في الاصدار الحديث

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

class Car{
   
}

بداخل هذا الكلاس يمكنك تعريف كلا من الميثود أو الدوال كما يمكنك تعريف الخواص ولكن كي تقوم بتعريف الخواص داخل هذا الكلاس يتوجب عليك الأن استدعاء المنشئ أو ما يسمى بـ “constructor” داخل هذا الكلاس، وهذا الكونستراكتور يتم استدعاؤه مباشرة عند استدعاء الكلاس كما هو موضح في الكود التالي:

class Car{
   // call constructor here
   constructor(color, type, price) {
     this.color = color;
     this.type = type;
     this.price = price;
   }
}

الأن تسأل نفسك ياصديقي ماذا تفعل لتضيف دوال أو functions لهذا الكلاس لفعل أمر ما، لا تقلق عزيزي المبرمج فيمكنك فعل ذلك بسهولة حيث أسف الكونستراكتور يمكنك أن تعرف الدوال التابعة للكلاس التي تريدها كما هو موضح بالكود

class Car{
   // call constructor here
   constructor(color, type, price) {
     this.color = color;
     this.type = type;
     this.price = price;
   }
   outPutType() {
      console.log(this.type);
   }
   calcPrice() {
      console.log(this.price);
   }
}
// instatiate the class
var hundaCar = new Car("red", "Hunda", 130000);
// call the hundaCar "outputType" function
hundaCar.outPutType();
// output: Hunda
// call the hundaCar "calcPrice" function
hundaCar.calcPrice();
// output: 130000

بالتأكيد عزيزي المبرمج إذا كنت قد تعاملت مع لغة برمجة كائنية قبل ذلك غير لغة جافا سكريبت فمن المؤكد أن هذا الكود السابق مألوف بالنسبة لك وستفهمه أكثر من طريقة تعريف الأبوجيكت أو الكائئن عن طريق الدوال.

الأن عزيزي المبرمج أن على وشك معرفة أساسيات البرمجة الكائنية في جافا سكريبت ولكن ينقصك خطوة أو معلومة أخرى ألا وهي كيف تقوم بعمل امتداد أو ما يسمى بـ extends لهذا الأوبجيكت أو هذا الكلاس.

ربما تسأل نفسك الأن ماذا يعني امتداد أو extends للكلاس فلا تقلق يا عزيزي نحن سنوضح لك.

فكر معي أنك إذا أردت أن تقوم بتطوير هذا الكلاس وإضافة عدد من الدوال الأخرى له ولكن تريد أن تكون هذه الدوال منفصلة عن الدوال الأصلية للكلاس، بمعنى أنك تريد ابقاء كلاس واحد كأصل أو كأب ثم تقوم بانشاء كلاسات أبناء لهذا الكلاس تستمد الدوال الأساسية منه مع إضافة دوال أخرى وخصائص أخرى، فهنا يأتي مفهوم عمل امتداد للكلاس أو الأوبجيكت ولتقوم بهذا الأمر ستقوم بتعريف اسم الكلاس الجديدي وإضافة كلمة “extends” ثم بعد ذلك اسم الكلاس الأب الذي تريد أن ينحدر منه الكلاس الإبن كما هو موضح بالكود التالي:

// Parent Class
class Car{
   // call constructor here
   constructor(color, type, price) {
     this.color = color;
     this.type = type;
     this.price = price;
   }
   outPutType() {
      console.log(this.type);
   }
   calcPrice() {
      console.log(this.price);
   }
}
// child class extended from "Car" class
class AdvancedCar extends Car{
   // define the constructor of the child class
   constructor() {
      // you should call super before defining any property to child class
      // super refers to parent class
      super();
   }
}

كما لاحظت فستجد أنه لابد من استدعاء “super” داخل الكونستراكتور وهذا لكي نكسب الكلاس الإبن نفس خواص الكلاس الأب. قم بعد ذلك يمكنك تعريف عدد من الدوال الجديدة داخل الكلاس، وعندما تقوم باستدعاء الكلاس الابن فسيكون بامكانك استدعاء الدوال الخاصة بالكلاس الابن أيضا مثل الكود التالي:

// Parent Class
class Car{
   // call constructor here
   constructor(color, type, price) {
     this.color = color;
     this.type = type;
     this.price = price;
   }
   outPutType() {
      console.log(this.type);
   }
   calcPrice() {
      console.log(this.price);
   }
}
// child class extended from "Car" class
class AdvancedCar extends Car{
   // define the constructor of the child class
   constructor() {
      // you should call super before defining any property to child class
      // super refers to parent class
      super();
   }
}
var toyotaCar = new AdvancedCar("black", "toyota", 200000);
// call the hundaCar "outputType" function
toyotaCar .outPutType();
// output: toyota
// call the hundaCar "calcPrice" function
toyotaCar.calcPrice();
// output: 200000

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