تغيير ال scope لل anonymous function


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

داخل ال anonymous function تشير this الى ال global object اذا كانت هذه الوظيفه المجهوله تم تعريفها مباشرا فى ال global  object ، كما يوضح الكود البسيط التالى :

(function(){
    alert(this); // object window;
})();

يمكننا تغيير ال scope لل anonymous function لتشير لكائن اخر كما يوضح الكود البسيط التالى :

var o = "Keepondev";
(function(){
    alert(this); // keepondev
}).call(o);

يمكننا استخدام الطريقه السابقه لحل مشكله تصحيح ال scope للوظائف التى لاتتبع كائن ، اليك المشكله :

function User(name){
    this.name = name;
}
User.prototype.getName = function(){
    var getUserName = function(){
        alert(this.name);
    }
    getUserName();
}

var me = new User("Mostafa Farghaly");
me.getName(); // undefined

المشكله ان this داخل getUserName تشير إلى ال global scope ولا تشير إلى الكائن المشتق من User ، لذلك this.name داخلها ليس لها قيمه ، يمكننا حل المشكله عن طريق تصحيح اشاره this كما يوضح الكود البسيط التالى :

function User(name){
    this.name = name;
}
User.prototype.getName = function(){
    var that = this;
    var getUserName = function(){
        alert(that.name);
    }
    getUserName();
}

var me = new User("Mostafa Farghaly");
me.getName(); // Mostafa Farghaly

حليت المشكله عن طريق تعريف متغير بإسم that يشير الى this داخل الوظيفه التى تشير إلى this الصحيح و خارج الوظيفه التى تشير إلى this الخاطىء ، و استخدمت that داخل الوظيفه التى تشير إلى this الخاطىء ، يمكنك حل المشكله ايضا عن طريق استخدام call او apply بدون that=this كما يوضح الكود التالى :

function User(name){
    this.name = name;
}
User.prototype.getName = function(){
    var getUserName = function(){
        alert(this.name);
    }.call(this);
    getUserName();
}

var me = new User("Mostafa Farghaly");
me.getName(); // Mostafa Farghaly

الان بعد call this اصبحت this التى بداخل الوظيفه تشير إلى this الصحيحه .
المثال السابق غير مفيد فى الواقع لكنه يشرح المفهوم الذى اريد ايصاله ، خلال برمجه تطيبقات كبيره ستجد نفسك بحاجه لانشاء function داخل وظائف لكائن ما لكى تقوم بمهمه محدد داخل هذه الوظيفه بدلا من تكرار الكود بداخلها كثيرا .

يمكنك الزياده على الصنف Function بوظيفه جديده اسمها bind ترثها كل ال function يمكنها تغير ال scope من خلالها كما يوضح الكود التالى :

Function.prototype.bind = function(o){
    var f = this; // this is the current function
    return function(){
        f.call(o,arguments);
    }
}

يمكنك استخدامها كما يلى :

User.prototype.getName = function(){
    var getUserName = function(){
        alert(this.name);
    }.bind(this);
    getUserName();
}

الأوسمة:

5 تعليقات to “تغيير ال scope لل anonymous function”

  1. almhajer Says:

    بارك الله فيك اخي ومااعرف كيف اشكرك على المقالات الرائعة بصراحة وضحت شي انا كنت استخدمه ولكن عن جهل وهي اني كنت احسب ان this تشير الى نفس المكان الي بيه يعني ضمن الاجراء الي فيه ولا كنت مستوعب انها تشير الى الفئة القاعدية
    بارك الله فيك وشكرا جزيلا …….

  2. almhajer Says:

    الصراحة لم اجد مثل مرونة الجافا سكربت php,c,c++,vb مع انه لغة بسيطة المعايير وسي بلس ابلس قابلة للتوسع الا انها قيودها امرن وابسط هذا رايي واشارك دوكلاس بما قاله

  3. Omar Al-Dolaimy Says:

    فعلاً جافاسكربت لغة عجيبة🙂 ..
    شكراً على ما كتبت

  4. mostafa farghaly Says:

    الشكر لله يا مهاجر ، و الله فى جعبتى مما تعلمته فى الجافاسكربت الكثير ، و لكن لا استعجل على شرحه ، لانه فعلا صعب ، و يريد التفكير العميق لفهم كل مفهوم

  5. mostafa farghaly Says:

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

أضف تعليقاً

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

WordPress.com Logo

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

صورة تويتر

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

Facebook photo

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

Google+ photo

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

Connecting to %s


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