OOP javascript الجزء الاول


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

جافاسكربت لغه ذات طبيعه نادره فهى object oriented مثل ال C++ و JAVA و SmallTalk ، و نظام الوراثه بها Prototypal based مثل IO و Lua و Self ، و ذات طبيعه dynamically typed مثل ال Objective-c و Ruby و Python ، و أيضا functional مثل Lisp و Schema ، و أيضا dynamically typed مثل PHP و Perl و Groovy :) .

كل شىء فى الجافاسكربت مشتق من الكائن Object ، هذا الكلام ينطبق على number و string و regexp و array و date و math ، حتى ال function من نوع object هههههه ، فعلى سبيل المثال ال Array ترث من ال object جميع خواصه و وظائفه و تزيد عليه الخاصيه length و الوظائف push و shift و reverse و غيرهم ، لا يوجد فى الجافاسكربت classical inheritance و ذلك لأنه لا يوجد class فى الجافاسكربت ، كما قلت فى البدايه كل شىء من نوع object ، و المثير فى الموضوع ان ال Object يرث من ال Object ربما لم ترى مثل ذلك فى حياتك ، لكن كيف أنشأ object من نوع خاص و أعطيه خواص و وظائف محدده انا اعرفها ، المثال البسيط التالى يوضح ذلك :

var mm = new Object();
mm.name = “mohamed”;
mm.age = 45;
mm.saySomething = function(){
alert(“my name’s ” + this.name + ” and my age’s  “+ this.age );
}
mm.saySomething(); // my name’s mohamed and my age’s 45

فى المثال السابق قمت بإنشاء كائن من نوع Object بإسم mm ، ثم أعطيته خاصيه name بقيمه mohammed ، ثم أعطيته خاصيه age بقيمه 45 ، ثم أعطيته وظيفه saySomething التى تقوم بعمل alert لل name و ال age بإستخدام الكلمه this التى تشير إلى الكائن الحالى ، و فى حالتنا هذا this.name مساويه ل mm.name ، و فى السطر الاخير قمت بتشغيل الوظيفه saySomething للكائن mm ، و الناتج عباره عن تعليق فى اخر السطر .

وجب التنويه إنه يمكن تحقيق المثال السابق بإستخدام object literal و هو طريق لإنشاء الكائنات بدون إستخدام الكلمه new ، فمثلا الكود التالى يوضح إستخدام ال object literal مع ال array و ال regexp :

var arr = new Array(1,2,3); // using constructor Array
var arr = [1,2,3]; // using object literal
var reg = new RegExp(“abc”); // using Constructor RegExp
var reg = /abc/; // using object literal

فى المثال السابق قمت بإستخدام object literal فى السطر التانى و الرابع لتحقيق نفس النتيجه بإستخدام constructor فى السطر الاول و الثالث بالترتيب ، لكن ال object literal للكائن object مختلف تماما و المثال التالى البسيط يوضح صيغته :

var mm = {
name: “mohamed”,
age: 45,
saySomething: function(){
alert(“my name’s ” + this.name + ” and my age’s  “+ this.age );
}
}

ال Object literal الخاص بالكائن Object يتكون من {} و بينه جميع الخواص و الوظائف فى صوره أزواج name:value و يفصل تلك الازواج , و يستخدم ال oject literal هذا كوسيله أيضا لنقل البيانات بين الخادم و الزبون كما تستخدم xml فى نقل البيانات و يطلق عليه JSON إختصارا ل javascript object notation و قد تم إكتشافه بواسطه دوجلاس كروكفورد :

<name>
<firstname>mostafa</firstname>
<lastname>farghaly</lastname>
</name>

var name = {
firstname: “mostafa”,
lastname: “farghaly”
}

انا ارشحلك طريقه ال object literal لأنها تحتوى عل الكود كله بين {} و فى نفس الوقت تمكنك معرفه تركيب ال object بمجرد النظر له ، لكنها تشغل مساحه من الذاكره بدون إستخدامها بعكس constructor خاص – هنا لا أقصد Object constructor – الذى يشغل مساحه من الذاكره فقط بعد عمل instance منه ، لا يمكنك عمل private variables من خلال هذه الطريقه لأن كل الخواص تكون public ، لكن هذه الطريقه لها ميزه فريده و هى امكانيه عمل namespace 8O ، ربما تعاملت مع YUI framework من قبل و رأيت YAHOO.util.DOM يمكنك عمل مثل هذه ال namespace بسهوله بإستخدام object literal كما يوضح المثال التالى :

var YAHOO = {
    util : {
        DOM:{
            prop:value,
            prop2:value2,
            get: function(attributes){
                // code here
            }
        }
    }
}
YAHOO.util.DOM.get(attributes);

فى المثال السابق أنشأت object بإسم YAHOO ثم انشأت بداخله خاصيه بإسم util عباره عن object يحتوى بداخله على خاصيه بإسم DOM هو أيضا object يحتوى على خاصيتين prop و prop2 و يحتوى على وظيفه بإسم get مابداخلها ليس موضوعنا ، و عليه يمكنك إستخدام الوظيفه get كما يوضح اخر سطر .

وجب الاشاره أيضا إلى انه يمكن تمرير الكائنات إلى الوظائف كما يوضح الكود التالى و فى هذه الحاله يسمى الكائن object specifier :

function say(o){
    alert(o.what+ "  "+ o.name + " i miss you");
}
say({what:"hi",name:"john"}); // hi john i miss you

فى المثال السابق قمت بإنشاء وظيفه بإسم say تقبل عباره إسمها o إخصتار object و تتوقع من هذه ال object خاصيتين الاولى o.what و التانيه o.name و تقوم بعمل alert بهم بالإضافه إلى كلمه i miss you و السطرين الاخرين يوضحان كيفيه إستخدامها ، بإنتظار تعلقاتكم و استفساراتكم و فى جزء القادم سوف اشرح مواضيع اكثر تقدما ستزيد خبرتك فى الجافاسكربت .

About these ads

الأوسمة: ,

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

  1. احمد Says:

    in JavaScript function is first-class objects
    سلسله جميله شكرا لك

  2. أحمد رجب Says:

    ما شاء الله عليك … تعلمنا منك … شكراً

  3. محمد هشام Says:

    جزاك الله خيرا :)

  4. محب الله ورسوله Says:

    بدأت في الكلاسات وبعدما قرأت فيها دخلت أبحث عن أي شرح بالعربي لأراجع معلوماتي من الكتاب ووجدت سلسلتك الرائعة
    جاري متابعتها لتأكيد المعلومات
    وحقاً ال oop قمة في الغرابة في الجافا سكربت

أضف تعليق

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

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


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: