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


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

فى الجزء الاول إنتهينا من عمل namespace بإستخدام object literal و تمرير كائنات إلى الوظائف ، , و لكننا لن نتعرض كثيرا لل scope و ال context بخصوص ال object literal ، كما ذكرت من قبل كلمه this تدل على الكائن الذى يحتويها ، كما يوضح الكود التالى this تدل على الكائن الذى بنفس لونها للمزيد من التوضيح :

var YAHOO = {
    that:this, // global object window
    get:function(){
       this // reference to YAHOO object
    },
    util:{
        get:function(){
            this // reference to util object
        },
        DOM:{
           get:function(){
                this // reference to DOM object
            }
        }
    }
}

المثال السابق يوضح ال namespace للكائن YAHOO.util.DOM حيث ان DOM كائن بداخل الكائن util بداخل الكائن YAHOO ، كلمه this تشير إلى اول كائن يغلف الوظيفه  التى تحتوى على الكلمه this كما توضح الالوان ، وبهذه الطريقه يمكننا إستخدام الكلمه this للإشاره إلى خصائص ووظائف الكائن الذى تشير إليه ، لكن إحذر من ان الكلمه this خارج الوظيفه تدل ال global object الذى هو فى حاله المتصفح الكائن window ، لكن السؤال الذى يطرح على ذهنك الان كيف يشير كائنين إلى بعضهما تحت كائن واحد ، يتم ذلك هن طريق إستخدام الكائن الذى يحتويهما لأنه يكون global يمكن الإشاره إليه من اى مكان كما يوضح المثال التالى :

var myObject= {
    obj1:{
        method1:function(){
            // code here
        }
    },
    obj2:{
        method2:function(){
            this // reference to obj2 object😦
            myObject.obj1.method1();
        }
    }
}

لنكمل موضوع ال context هيا بنا نرى ماذا تدل كلمه this داخل وظيفه فى ال global scope اى ليست تحت اى كائن ، بالطبع تشير إلى ال global object الذى هو فى المتصفح الكائن window :

function changeColor(){
    this.style.backgroundColor = "#F00";
}
changeCOlor(); // error

عند إستدعاء هذه الوظيفه فإنها تعطى error لأن this بداخلها تشير للكائن window الذى لا يحتوى على الخاصيه style.backgroundColor ، إذا  كيف نستفيد من هذه الوظيفه ؟؟ لابد من ان نجعل this تشير لكائن يحتوى على الخاصيه style ، و لكن هل هذا ممكن فى الجافاسكربت – تغيير ال context ؟ نعم هذا ممكن من خلال الوظيفه call او apply للكائن Function فى المثال التالى سأستخدم call التى تقبل العباره الاولى لها الكائن الجديد الذى ستشير إليه كلمه this و العباره الثانيه هى ال arguments العبارات التى ستمرر للوظيفه نفسها و فى حالتنا هذه لا يوجد عبارات للوظيفه changeColor :

var myButton = document.getElemenyById("myBtn");
function changeColor(){
    this.style.backgroundColor = "#F00";
}
changeColor.call(myButton);

عند إستدعاء الوظيفه السابقه كما يوضح اخر سطر فإنها تغير ال context الخاص بكلمه this حتى تشير إلى الكائن myButton و بذلك سيتحول الكود بداخل الوظيفه إلى الكود التالى🙂 هههههههه

myButton.style.backgroundColor = "#F00";

و بهذا إنتهى بحمد الله الجزء التانى ، فى الجزء القادمان شاء الله سأشرح ال constructor و المتغيرات private و ال bublic التى لم نستطيع عملها بطريقه ال object literal ، بإنتظار تعليقاتكم و استفساراتكم

الأوسمة: ,

7 تعليقات to “OOP javascript الجزء الثانى”

  1. almhajer Says:

    اخي العزيز بالنسبة لكال
    call تقوم كال بالاتصال لتنفيذ طريقة جسم اخر ضمن السياق
    وحسب مافهمت فانها تقول بدمج الكتلة السابقة بالتلية فيصبح لديك ربط مشترك بين هذه الدوال
    وعلى سيبل المثال
    var t ={
    e:document.getElementById(“myBtn”)
    };

    function changeColor(){
    this.e.style.backgroundColor = “#F00”;
    }

  2. almhajer Says:

    يتبع….
    فلو انها عملية تغير سياق كماذ كرت فانها لاتنفذ كود نفس ضمن الدالة
    var t ={
    e:document.getElementById(“myBtn”)
    };

  3. almhajer Says:

    يتبع

    function changeColor(){
    var x=200;
    this.e.style.backgroundColor = ‘#F00’;
    aler t(this.e);
    aler t(x);
    }
    ولمزيد من التفاصيل http://odetocode.com/blogs/scott/archive/2007/07/04/11067.aspx
    والله ول يالتوفيق

  4. almhajer Says:

    alert(“kjk”);

  5. almhajer Says:

    عفوا المدونة فيها عيب برمجي عن اضافة اكواد الجافا سكربت وبخاصة alert()
    ففي المثال السابق وضعت يبيس امام نهاية alert();

  6. mostafa farghaly Says:

    كودك صحيح ، لكنك لم تستخدم call او apply لتغير ال context أى ماذا تشير this الى :
    changeColor.call(t);
    حتى يتحول الكود داخل الوظيفه الى
    t.e.style.backgroundColor = #F00
    قرأت المقاله التى أرسلتها ، لا يوجد بها ما ينافى او يخالف ما كتبت ، هو يزيد بشرح apply ، الفرق call و apply كما ذكرت فى الموضوع ان العباره الثانيه عباره عن نص اما فى apply عباره عن array تمرر للوظيفه بعد تغيير ال context ، ان شاء الله غدا سأشرح موضوع مفصل عن call و apply و استخداماتهم فى الواقع real world uses .
    كل الوظائف فى جافاسكربت بعد اعلانها ، تتحول لكائنات مشتقه من الصنف Function ، و بالتالى ترث منه الوظيفه call و apply ، فى الموضوع انا شرحت call ، وظيفتهم بإختصر تغير this داخل الوظيفه لتشير إلى كائن اخر ، اذا تعثر عليك فهم اى جزء فى اى موضوع اقرأه مره و اتنين و تلاته ، انا تعثر على فهم الكثير من هذه المفاهيم عندما بدأت تعلمها ، لكن الحمد لله هضمتها جيدا ، تصبح على خير الساعه الان 1:09 و انا هنام عشان اصحى بدرى😀

  7. almhajer Says:

    شكرا جزيلا واعتذر من كل قلبي على مجهودك ووقتك الثمين وارجو من الله ان يكون في صالح اعمالك واشكر اهتمامك بالردود وبارك الله و اعتذر لاقتطاع جزء من وقتك اتمنى شرح مفصل لcall ,apply لاني اقراء اكواد جاك وغيره ممزوجة ب call وapply واحب ان انوه اني من النوع لايستوعب من اول ولا ثاني فاحب كل شي طويل واكواده كثيرة حتى استوعب شكرا جزيلا ودمت بحفظ الله ورعايته والسلام علسكم ورحمة الله وبركاته

أضف تعليقاً

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

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: