OOP javascript الجزء الثالث


السلام عليكم و رحمه الله تعالى و بركاته

هذا هو أهم جزء فى سلسله OOP javascript – غالبا لن تفهمه 100% من اول قراءه ، قد تناولنا فى الجزء الاول كيفيه إنشاء كائنات عن طريق object literal و قد ذكرت ان من عيوب هذه الطريقه انها تشغل مساحه من الذاكره بدون إستخدامها فور الاعلان عنها ثم انها لا تمكنك من عمل متغيرات خاصه private variables او وظائف خاصه private methods ، الحل فى إستخدام function constructors لأنه لا يوجد فى اللغه class ، الكود التالى يوضح إنشاء constructor بسيط و إستخدامه :

function User(name){
   this.name = name;
}
var me = new User("Mostafa Farghaly");
alert(me.name); // Mostafa Farghaly
alert(me.constructor.name);  // User

فى المثال السابق أنشأت function constructor إسمه User الحرف الاول منه capital للتوضيح حتى لا أستخدمه كوظيفه عاديه و لتجنب المشاكل التى سأذكرها لاحقا إن لم أستخدم الكلمه new ، داخل ال constructor اعطيته الخاصيه name و هى العباره التى تمرر لل constructor عند إنشاء object جديد منه بإسم me كما يوضح السطر الرابع ، فى السطر الاخير قمت بعمل alert لل constructor الخاص بال object الذى أنشأناه me و النتيجه User :) .

ماذا يحدث لو إستخدمنا ال User constructor بدون الكمله new ؟ جميع خواصها التى ربطناها بها عن طريق this يتم ربطها بالكائن ال global الذى فى حاله المتصفح window هذه كارثه كبيره عندما تنشأ اطر عمل او مكاتب معقده لأن المشكله وقتها لن تعرف إلا بعد عناء و صعوبه ، كما يوضح المثال التالى :

function User(name){
   this.name = name;
}
User("Mostafa Farghaly");
alert(window.name); // Mostafa Farghaly :(

فى المثالين السابقين الخاصيه name كانت عامه public يعنى يمكن الإشاره إليها من ال global scope عن طريق me.name ، هيا بنا نعدل على المثال و نضيف public method كما يوضح المثال البسيط التالى :

function User(name){
    this.name = name;
    this.saySomething = function(){
        alert("my name's " + this.name );
    }
}

var me = new User("Mostafa Farghaly");
me.saySomething(); // my name's Mostafa Farghaly

فى المثال السابق قمت بإضافه public method وظيفه عامه بإسم saySomething و إستخدمتها كما يوضح اخر سطر ، لكنه يمكنك أيضا إنشاء وظائف عامه عن طريق إستخدام الخاصيه prototype لل User constructor ، الخاصيه prototype هى أساسا عباره عن كائن يمكنك الإضافه عليه لكن من المهم ان تعرف ان كل الاضافات تكون public عامه لا يمكنك إضافه خصائص او وظائف خاصه من خلاله كما يوضح الكود التالى :

function User(name){
    this.name = name;
}
User.prototype.saySomething = function(){
    alert("my name's " + this.name );
}

var me = new User("Mostafa Farghaly");
me.saySomething(); // my name's Mostafa Farghaly

فى المثال السابق قمت بإضافه ال public method بإسم saySomething عن طريق الخاصيه prototype لل User constructor ، ليس هذا الاستعمال الوحيد للخاصيه prototype لكنها تستخدم فى الوراثه كما سنرى فى الاجزاء القادمه و تستخدم أيضا فى إضافه ميزات جديده للغه ، مثلا يمكننا إستخدامه مع String construtor لإضافه ميزات غير موجود فى كائن النصوص فى الجافاسكربت  ، مثلا جافاسكربت لا تحتوى على وظيفه strip_tags الموجوده فى php و التى تقوم بنزع كل ال html tags ، يمكننا إضافتها للغه عن طريق المثال التالى :

String.prototype.strip_tags = function(){
    this.replace(/<\/?[^>]+>/gi," "); // replace tags with whitespace
}

var str = "<b>Proud to be <i>Muslim</i> </b>";
alert(str.strip_tags()); // proud to be muslim

فى المثال السابق كلمه this تشير إلى أى string يتم إستخدام الوظيفه strip_tags من خلاله ، يمكنك إضافه ماتشاء إلى اللغه عن طريق الخاصيه prototype .

بقى الان ان نضيف خواص و وظائف خاصه لا يمكن الإشاره إلييها من خارج ال object او من ال global scope عاما ، كما قلنا من قبل الوظائف و الخصائص العامه تضاف عن طريق this او ptotoype كما وضحت فى الامثله السابقه ، انا الوظائف و الخصائص الخاصه فتضاف عن طريق كلمه var كما يوضح المثال التالى :

function User(name){
    this.name = name;
    this.age;
    var secret = "iam not alone";
}

var me = new User("Mostafa Farghaly");
me.age = 21;
alert(me.name +" "+ me.age); // Mostafa Farghaly 21
alert(me.secret); // undefined;

قدمت المتغير الخاص عن طريق var اما المتغيرات العامه كما هى تم تعريفها عن طريق this او prototype كما شرحت من قبل ، يمكنك عمل ال private methods الوظائف الخاصه بنفس الطريقه كما يوضح المثال التالى :

function User(name){
    this.name = name;
    this.age;
    var secret = "iam not alone";
    var secretMethod = function(){
        alert(secret);
    }
}

var me = new User("Mostafa farghaly");
me.age = 21;
alert(me.secret); // undefined
me.secretMethod(); // error: call to undefined function

تم عمل الوظيفه الخاصه بنفس طريقه الخاصيه الخاصه عن ريق تعريفها بكلمه var بدلا من this التى تجعلها عامه ، غالبا ما يستخدم أصحاب أطر العمل مثل john resign مطور مكتبه jQuery مثل هذه الوظائف الخاصه لعمل وظائف لن تفيد مستخدم الاطار لكن ستفيد عمل إطار العمل اى مجموعه الوظائف التى تبنى عليها اطار العمل و عملها public لن يفيد المستخدم شيئا ، و كما رأيت فى المثال السابق فإن الإشاره للخصائص الخاصه الغير عامه يمكن الإشاره إليها بإسمها بدون إستخدام this – هذه ملحوظه هامه جدا .

بقى لنا اخيرا أن نلقى نظره على كيفيه عمل static properties و static method و هى الخواص و الوظائف التى يمكن إستعمالاها من ال constructor و لا يمكن إستعمالها من الكائن الذى ننشأه بإستخدام new كما يوضح الكود البسيط التالى :

Math.PI; // static property
Math.round(3.521); //static method

function User(name){
this.name=name;
}
User.staticProp = "iam static property";
User.staticMethod = function(){
    alert("iam static method");
}

var me = new User("Mostafa farghaly");
alert(me.staticProp); // undefined
alert(User.staticProp); // iam static property
me.staticMethod(); // error: me.staticMethod isn't function
User.staticMethod(); // iam static method

المثال يغنى عن الشرح لكن تذكر دائما ان ال static method/property يتم استعمالهم من ال constructor ولا يتم إستعمالهم من ال instance الذى أنشأنها بإستخدام كلمه new التى فى حالتنا الكائن me ، و بهذه قم تم شرح الجزء الثالث الاكثر إثاره و الاكثر تقدما فى اجزاء ال OOP بإنتظار تعليقاتكم و مقترحاتكم ، نراكم فى الاجزاء القادمه ان شاء الله .

About these ads

الأوسمة: ,

4 تعليقات to “OOP javascript الجزء الثالث”

  1. holooli Says:

    الله يجزيك الخير شيء أكثر من رائع ولكن في آخر مثال بعد:
    this.name=name;

    يوجد قوس متعرج } لاداعي له

  2. mostafa farghaly Says:

    لا يوجد خطأ ، هذا القوس المتعرج ينهى الوظيفه User ، ثم بعد ذلك أعلن خاصيه static و وظيفه static من خارج الوظيفه User ، ثم ابين كيفيه إستعمالها

  3. almhajer Says:

    بارك الله فيك والله يجزاك خير

  4. neero Says:

    استفدت كثيرا بارك الله فيك وانصحك بالاستمرار في اجتهادك (فلكل مجتهد نصيب)

أضف تعليق

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

You are commenting using your WordPress.com account. تسجيل خروج   / تغيير )

Twitter picture

You are commenting using your Twitter account. تسجيل خروج   / تغيير )

Facebook photo

You are commenting using your Facebook account. تسجيل خروج   / تغيير )

Google+ photo

You are commenting using your Google+ account. تسجيل خروج   / تغيير )

Connecting to %s


تابع

Get every new post delivered to your Inbox.

%d bloggers like this: