Object oriented JavaScript

تطورت الجافا سكريبة عبر الزمن مع تطور الويب فقد تلاحظ وجود عدة model مختلفة لل(oop) في الجافا سكربيت وهى

Classical model

Prototypal model

ES6

نأتي  لPrototypal model   ولأكن قبل الدخول فيه على شرح function & object شرح عميق بعض الشيء

يتكون object في الجافا سكربيت من جدول أو لنقل مصفوفة تحتوى على key :value والقيمة وprototype سنأتي لشرح prototype فيما بعد و ألان دعونا  نتطرق لها في classical model.

Prototypal model :

يتم أنشا  object في Prototypal model  بالطريقة التالية:

 var myClass={  
                 val:123,  
                 Name:'mustafa',  
                 GetName:function(){  
                 return this.Name;  
                 }  
  }  

وألان أنشئ ملف html  وأكتب الكود التالي في ملف javascript  وأستدعه  في  صفحة html من المتصفح كروم او فيرفوكس وكليك يمين في الصفحة وأختار inspect element وثم أختر التبويب console واللان جرب وكتب في سطر الأوامر أسم الكلاس

النتيجة تجد انه قد طبع لك الكلاس بمحتوياته في شكل جميل

وألان اكتب

myClass.name

تجد انه يطبع قيمة المتغير إذن هكذا يتم الوصول إلى محتويات الكلاس في الجافا سكريبت عن طريق كتابة إسم objectثم  نقطة ثم أسم المتغير أو الدالة

بالنسبة إلى الدوال إذاكتبة إسم الداله فقط ستحصل على undefined أو سيطبع لك جسم الدالة أما إذا كتبة الدالة مع أقواس فسيتم تنفيذ الدالة

 myClass.GetName  
 function (){ return this.Name; }   
 myClass.GetName()  
 "mustafa"  

كما ترى يمكننك استخدام الكلاس مباشرة بدون أن تقوم بعملية إنشاء اوبجيكت بالنسبة constractor فمن الأفضل أن تقوم بكتابته 
 بنفسك كما سنرى وألان نأتي لعملية instantiation و inheritance.

 var myClass={  
 constractor:function(vale){  
 this._val=vale;  
 }  
 getVale:function(){  
 return this._vale;  
 }  
 }  

شرحنا this في التدوينات السابقة علامة __أمام أسم المتغير val تعنى انه private  ولا يمكن الوصول إليه مباشرة هازه أيضا 
 شرحناه في التدوينات السابقة  وألان نريد إنشاء objectمن الكلاس myclass 

 var myObject = Object.create(myClass);  

أنشا object أسمه myobject من الكلاس myclass وألان أحفظ الملف و اعد تحميل الصفحة  أحيانناً لا يقوم المتصفح بإعادة تحميل الصفحة لذالك  أنسخ الرابط في نافذة جديدة و أكتب في console

myObject

النتيجة

Object {constructor: function, getVale: function}

  كما ترى تم نسخ جميع محتويات الكلاس إلى الاوبجيكت  وألان نستخدم constructor

myObject.constructor('mustafa');

undefined

عندما لا يكون هنالك قيم ترجع عند تنفيذ أي أمر يرجع undefined لذالك لا تقلق بشأنها ولان جرب الدالة getvale()

myObject.getVale()

"mustafa"

inheritance in Prototypal model :

هنالك خط رفيع بين عملية الوراثة وعملية instantiation عند أنشأ  object عند  استخدم Prototypal model  وألان لنقم بتطبيق مفهوم   inheritance او الوراثة.

 var childObject = Object.create(myClass);  
         childObject.getVale=function(){  
         return this._val+' is my name !!'  
    }  

النتيجة

myObject.constructor('mustafa');

undefined

myObject.getVale()

"Mustafa  is my name"

كما تر ى فأن الفرق بين instantiation و inheritanceهي overiding method  أو إعادة كتابة الدالة الموجود في الكلاس الأب  ولأكن ماذا إذا أردت تنفيذ دالة داخل نفسها  طبعا هذا غير ممكن ولأكن يمكنك استدعاء دالة الكلاس الأب  بدلان من نفس الكلاس

أريد مثلا إعادة كتابة الدالة getval

 childObject.getVale=function(){  
     return myClass. getVale +' is my name !!'  
      }  

النتيجة

myObject.getVale()

"isra  is my name"

وهازه إجابة خاطئة لماذا؟

كما سبق عرفنا قيمة val في myobject ب"mustafa"ولأكنه طبع 'isra' لأنه أستخدم val الموجودة في myclass وليس myobject أما إذا أردة استخدام الخاصية val بmyobject نكتب

       

         childObject.getVale=function(){  
         return myClass. getVale.call(this) +' is my name !!'  
         }  

في الكود السابق استخدمنا دالة الكلاس myclass ولاكن بقيم  myobject وذالك باستدعاء الدالة call الموجودة في أي كلاس 
 وتمرير this إليها  this يعنى الكلاس الذي نحن فيه .وألان جرب استخدام الدالة و ستكون النتيجة 

 myObject.getVale()

"Mustafa  is my name"

Classical model

وألان نأتي لل Classical model وهو كما وضحنا انه أكثر الموديل استخداما  والاكثر شيوعاّ ولأكن قبل أن نخوض فيه دعونا نشرح البروتو تايب التي ذكرناها في أول المقال .

البروتو تايب هي خانة يمكن فيها إضافة المزيد من الدوال و المتغيرات في شكل object او دالة ويستخدم غالبا للوراثة او Polymorphism  فعندما يرث كلاس كلاس أخر يتم نسخ جميع محتويات الكلاس الاب الى بوتوت تايب الكلاس الإبن,   الصورة توضح مكان البروتو تايب. 

كما في الصورة في أخر خانة في أي كلاس بروتو تايب اوبجيكن وكذالك في أي function هنالك بورتو تايب function وفي داخل البروتو تايب  function يوجد بروتو تايب اوبجيكت.

بالنسبة Classical model فان كلمة prototype هى شى اساسي  في عملية instantiation  وال inheritance

يتم كتابة الكلاس في شكل functionعادية ولاكن إنتبه فال function التى نريد ان تكون كلاس تبدأ بحرف كبير اما الدوال العادية فتبدا  بحروف صغيرة هنالك الكثير من الكلام حول هازه النقطة سنشرحها في درس الفيديو:

 Function Myclass(){  
 }  

كل عنصر في الobject يكتب بعد this:

      function Myclass(){  
      this._name;  
      }  

   

constructor الكلاس هو نفس الدالة :

         function Myclass(name){  
         this._Name=name;  
         }  

 أما الدوال تكتب بهذه الطريقة :

     } ()Myclass.prototype.getName=function  
       ; return this._Name  
         {  

أما طريقة النستيشن فتتم بالطريقة العادية كما في php او java:

    var Myobject = new Myclass('mustafa-dev');  

ثم جرب ونفذ الدالة

Myobject.getName();

"mustafa-dev"

Classical model inheritance in

ناتي لعملية الوراثة في Classical model وهي تتم في ثلاث مراحل لنجعل الكلاس mysubobject يرث   myobject أولا
 كتابة الكونستركتور هنا أريد أن انسخ نفس الكونستركتر الأب إذن هنا الدالة  call ستأخذ برميترين هما thisو المتغير name

         function Myobject(name){  
         Myclass.call(this,name);  
         }  

               

  
نسخ البروتو تايب

       

      Myobject.prototype = Object.create(Myclass.prototype);  

 تعريف الكونستركتور للبروتو تايب

      

       Myobject.prototype.constructor = Myobject;  

 ولان جرب الكلاس الابن 

var subObj=new Myobject('mustafa-dev');

undefined

subObj.getName();

"mustafa-dev"

ES6

وألان نأتي للمودل الذي لم يطرح في الأسواق بعد أو قد طرح في القليل من الأسواق طبعاً لله الحمد أنهم قد جعلوه مشابه تتما لبقية لغات البرمجة

طريقة كتابة الكلاس في es6

 class myClass{  
          constructor(val){  
                 this._Name=val;  
          }  
          getName(){  
          return this._Name;  
          }  
          }  

إنشأ الاوبجيكت في es6

          var myObject = new myClass('mustafa-dev');  
          myObject.getName();  

inheritance in es6 :

          class subClass extends myClass{  
          constructor(val){  
          super(val);  
          }  
          getMeMyname(){  
          return super();  
          }  
          }  

تذكر هاذ الموديل لازال غير متاح في كل المتصفحات وعندما نقول المتصفات نعنى كروم فيرفوكس  اوبيرا وسفاري  وليس ie

انتظرونا في درس الفيديو .