في هذا الدرس 5تصفّح المواضيع
من أشهر الأخطاء البرمجية في JavaScript أخذ مرجع دالة من داخل كائن مثل const fn = account.printBalance; لتشغيلها لاحقاً عند وقوع تفاعل. فبمجرد استدعاء fn() منفردةً بدون نقطة، ينفصل سياق this عن الكائن الأصلي account ويصبح undefined أو يشير لعنصر الزر بدلاً من بيانات الحساب!
بخلاف .call() و.apply()، فإن استدعاء fn.bind(targetObj) لا يشغل الدالة فوراً، بل ينشئ ويرجع دالة جديدة مربوطة (Bound Function) جرى قفل الكلمة this بداخلها نهائياً على الكائن targetObj مهما كانت طريقة استدعائها لاحقاً.
const account = {
owner: 'Noura',
points: 340,
summary: function () { return this.owner + ' has ' + this.points + ' pts'; }
};
const getSummary = account.summary.bind(account);
document.getElementById('bind-out').textContent = getSummary();تدعم دالة .bind() ميزة هندسية رائعة تُعرف بـ التطبيق الجزئي للوسائط (Partial Application)؛ إذ يمكنك تمرير وسائط أولية بعد السياق مباشرةً لتثبيتها مسبقاً في مطلع معاملات الدالة الجديدة، بحيث يكتفي المستدعي لاحقاً بتمرير المعاملات المتبقية فقط.
function calcTotal(taxRate, price) {
return price + (price * taxRate);
}
const addSaudiVat = calcTotal.bind(null, 0.15);
document.getElementById('part-out').textContent = '100 SAR -> ' + addSaudiVat(100) + ' SAR';عند إسناد دالة كائن لتعمل استجابةً لنقر زر مثل btn.onclick = counter.increment.bind(counter) أو بعد مهلة زمنية في المتصفح، تضمن .bind() بقاء this مرتبطةً بكائن البيانات الخاص بك بدلاً من تحولها إلى عنصر الزر أو النافذة العامة.
const counter = {
clicks: 0,
step: function () {
this.clicks += 1;
document.getElementById('cnt-out').textContent = 'Clicks: ' + this.clicks;
}
};
document.getElementById('cnt-btn').onclick = counter.step.bind(counter);تكتمل بـ call وapply وbind ثلاثية التحكم الشامل بسياق التنفيذ في دوال JavaScript، ويُلخص الجدول التالي متى تختار كلاً منها:
| الدالة | هل تنفذ الدالة فوراً؟ | شكل تمرير الوسائط | القيمة المرجعة |
|---|---|---|---|
fn.call(ctx, a, b) | نعم، تشغلها في الحال | قيم مفردة مفصولة بفواصل | ناتج تشغيل الدالة الأصلية |
fn.apply(ctx, [a, b]) | نعم، تشغلها في الحال | مصفوفة واحدة تضم القيم | ناتج تشغيل الدالة الأصلية |
fn.bind(ctx, a) | لا، تجهزها للاستدعاء اللاحق | وسائط مسبقة اختيارية بالفواصل | دالة جديدة مثبتة السياق |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
شخّصت في هذا الدرس مشكلة ضياع this عند فصل الدوال، وأنشأت دوال مثبتة السياق عبر .bind()، وطبقت تثبيت الوسائط المسبقة، وحفظت السياق مع أزرار التفاعل، وقارنت بين call وapply وbind. الخطوة التالية: انتقل إلى درس «الكتل البرمجية Block Statement في JavaScript» لإتقان العزل الكتلي وحجب المتغيرات.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Function.bind() الأسلوب المدمج bind
- دالة مدمجة تنشئ وترجع دالة جديدة مثبتة السياق this مع إمكانية تثبيت وسائط أولية مسبقة.
- للمراجعة
- 02 Bound Function الدالة المربوطة
- كائن الدالة الجديد الناتج عن استدعاء bind الذي يوجه كل تشغيل لاحق إلى الدالة الأصلية بسياقها المحفوظ.
- للمراجعة
- 03 Partial Application التطبيق الجزئي للوسائط
- تثبيت وسيط أولي أو أكثر عبر bind لإنتاج دالة متخصصة تطلب عند استدعائها المعاملات المتبقية فقط.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 VAT VAT
- Value Added Tax
- ضريبة القيمة المضافة التي جرى تثبيت نسبتها مسبقاً عبر التطبيق الجزئي في دالة bind.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- نموذج كائنات المستند الذي تستدعي عناصره مثل الأزرار الدوال المربوطة عند نقر المستخدم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال العداد في محرر التجربة وانقر زر الزيادة عدة مرات للتحقق من حفظ سياق الكائن counter.
-
بدّل بين التبويبين الأول والثاني في المحاكي لمشاهدة كيف تعالج bind ضياع السياق في الوضع الصارم.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.