المسارات
/
JavaScript
JavaScript
/
المنهج
/
الدوال الراجعة
ال

الدوال الراجعة في JavaScript

تمرينان

نبذة عن الدوال الراجعة

دوال رد الاتصال هي دوال تُمرَّر كوسائط إلى دوال أخرى. ويمكن بعد ذلك استدعاء دالة رد الاتصال لتُطلق إجراءً لاحقًا. غالبًا ما تُستخدم ردود الاتصال للتعامل مع نتائج العمل المنجز، أو للتعامل مع إجراء عند وقوع حدث. ويمكن استخدام دوال رد الاتصال في البرمجة المتزامنة وغير المتزامنة.

const sideLength = 5;

// Caller function takes a callback function
function applySideLength(callback) {
  return callback(sideLength);
}

// Callback must expect the possible argument from the calling function
function areaOfSquare(side) {
  return side * side;
}

applySideLength(areaOfSquare); // => 25

يمكنك أيضًا كتابة ردود الاتصال كتعبير دالة:

applySideLength(function squarePerimeter(side) {
  return side * 4;
});

هذا نمط مفيد في JavaScript، لأن JavaScript مصمَّمة كبيئة تشغيل أحادية الخيط لا يمكن فيها تنفيذ سوى استدعاء دالة واحد في المرة. أثناء التنفيذ، لا تستطيع بيئة التشغيل الاستجابة لأحداث أخرى أو مواصلة التنفيذ حتى تُرجع الدالة.

تستخدم الكثير من استدعاءات API (دوال الإدخال والإخراج، والمؤقتات، ومستمعات الأحداث) آلية غير متزامنة لوضع استدعاء الدالة الحالي جانبًا حتى يكتمل العمل. وعند اكتماله، تُوضع دالة رد الاتصال في قائمة انتظار الرسائل، بحيث عندما تكون بيئة التشغيل بين استدعاءين، تُعالَج الرسائل عندئذٍ باستدعاء دالة رد الاتصال.

من المفيد أيضًا استخدام دوال رد الاتصال لأنها قد تشير إلى متغيرات ضمن نطاق الإغلاق الخاص بها لا تكون متاحة للدالة التي تُستدعى فيها لاحقًا.

أمثلة محددة على دوال رد الاتصال

معالجات الأحداث

معالجات الأحداث حالة استخدام شائعة لردود الاتصال في JavaScript. أحداث المتصفح مثل 'onload' أو 'onclick' إشارات يمكنها أن تؤدي إلى استدعاء دوال. وطريقة addEventListener الخاصة بكائن DOM [Document Object Model تسجّل دالة رد اتصال تُستدعى عندما "تسمع" بوقوع حدث.

document.addEventListener('onload', function () {
  alert('The webpage has now been loaded');
});

اصطلاح Node.js

في Node.js، تتبع دوال رد الاتصال اصطلاحًا للتحكم في مسار البرنامج. وهي تتبع هذا النمط: قد يستقبل الوسيط الأول لدالة رد الاتصال قيمة Error أو null؛ أما الوسيطة الثانية والوسائط اللاحقة فتستقبل البيانات التي صُمِّمت الدالة المستدعية لإرسالها.

إذا وقع خطأ، فقد لا تكون الوسيطة الثانية والوسائط اللاحقة موجودة، لذا لا يمكنك الاعتماد على وجودها.

function operation(a, b, callback) {
  // Work ...

  if (/* an error occurs */) {
    return callback(new Error('An error occurred'))
  }

  // On success:
  callback(null, data)
}

function callback(error, returnedData) {
  if (error) {
    // An error occurred, handle it here.
    return
  }

  // No error occurred, continue with the returned data.
}

operation(1, 2, callback)

ترى هذا النمط كثيرًا عند التعامل مع الدوال غير المتزامنة للمساعدة في التحكم في مسار التنفيذ.

ردود اتصال متنكّرة

تستخدم دوال Array الشائعة دوال رد الاتصال لتحديد سلوكها:

  • Array.prototype.forEach:

    • تستقبل دالة رد اتصال، وتطبّقها على كل عنصر من عناصر المصفوفة.

      [1, 2, 3].forEach(function (element) {
        doSomething(element);
      });
      // => doSomething() is invoked 3 times, once with each element
      
  • Array.prototype.map

    • تستقبل دالة رد اتصال، وتطبّقها على كل عنصر من عناصر المصفوفة، مستخدمةً النتيجة لإنشاء مصفوفة جديدة.

      [1, 2, 3].map(function (element) {
        return element + 1;
      });
      // => [2, 3, 4]
      
  • Array.prototype.reduce

    • تستقبل دالة رد اتصال، وتطبّقها على كل عنصر من عناصر المصفوفة، وتمرّر النتيجة إلى الاستدعاء التالي.

      [1, 2, 3].reduce(function (runningSum, element) {
        return runningSum + element;
      }, 0);
      // => 6
      
تعديل عبر GitHub يفتح الرابط في نافذة أو علامة تبويب جديدة

تعلّم الدوال الراجعة