مهما كنّا عباقرة نحن معشر المبرمجين، فلا بدّ أن تكون في السكربتات مشكلة ما. تحدث هذه المشاكل إمّا بسببنا، أو بسبب شيء أدخله المستخدم لم نتوقّعه، أو بسبب ردّ فيه خطأ من الخادوم، أو بمليار سبب آخر.

في العادة ”يموت“ السكربت (أي يتوقّف مباشرة) لو حدث خطأ، ويطبع ذلك في الطرفية، لكن في كل الأحوال يمكن التعامل مع هذا الخطأ بعدة طرق.

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

تتيح لنا الصياغة try..catch إمكانية ”التقاط“ هذه الأخطاء والقيام بما هو مفيد بدل أن يموت السكربت.

صياغة try..catch

للتعبير try..catch كتلتين برمجيتين أساسيتين: التجربة try والالتقاط catch بعدها:

try {

  // الشيفرة...

} catch (err) {

  // التعامل مع الأخطاء

}

يعمل التعبير هكذا:

1. أولًا، يجري تنفيذ الشيفرة في try {...}‎.
2. لم نجح التنفيذ دون أيّ أخطاء، تُهمل الكتلة catch(err)‎ وتصل عملية التنفيذ إلى نهاية try وتواصل عملها بعد تجاهل catch.
3. إن حدث أيّ خطأ يتوقّف التنفيذ داخل كتلة try وينتقل سير العملية إلى بداية الكتلة catch(err)‎. سيحتوي المتغير err (يمكننا استبداله بأيّ اسم آخر) كائن خطأ فيه تفاصيل عمّا حدث.

بهذا لا تقتل الأخطاء داخل كتلة try {…}‎ السكربت، فما زال ممكنًا أن نتعامل معها في catch.

وقت الأمثلة.

• إليك مثالًا ليس فيه أخطاء: يعرض alert السطرين (1) و (2):

  try {
  
    alert('Start of try runs');  // (1) <-- بداية التشغيلات
  
    // ...ما من أخطاء هنا
  
    alert('End of try runs');   // (2) <-- نهاية التشغيلات
  
  } catch(err) {
     // (3)‫  تُهمل catch إذ ليست هناك أخطاء
    alert('Catch is ignored, because there are no errors');
  
  }

• مثال فيه خطأ: يعرض السطرين (1) و(3):

  try {
  
    alert('Start of try runs');  // (1) <-- بداية التشغيلات
  
    lalala; // error, variable is not defined! خطأ: المتغير غير معرّف!
  
    alert('End of try (never reached)');  // (2)‫ نهاية كتلة try (لا نصل إليها أبدًا)
  
  } catch(err) {
  
    alert(`Error has occurred!`); // (3) <-- حدث خطأ!
  
  }

تحذير: لا يعمل تعبير try..catch إلّا مع الأخطاء أثناء التشغيل يجب أن تكون الشيفرة البرمجية صياغتها صحيحة لكي تعمل try..catch بعبارة أخرى، يجب أن تكون الشيفرة البرمجية خالية من أخطاء الصياغة.

لن تعمل في هذه الحالة لأن هنالك أقواسًا مفتوحة بدون غُلاقاتها.

try {
  {{{{{{{{{{{{
} catch(e) {
  alert("لا يمكن للمحرك فهم هذه الشيفرة فهي غير صحيحة");
}

أولًا يقرأ محرك جافاسكربت الشيفرة البرمجية، ومن ثمّ يشغّلها. تدعى الأخطاء التي تحدث في مرحلة القراءة أخطاء التحليل (parse-time) ولا يمكن إصلاحها (من داخل الشيفرة البرمجية نفسها). وذلك لأن محرك لغة جافاسكربت لا يستطيع فهم الشيفرة البرمجية من الأساس. تحذير:تعمل الصياغة try..catch بشكل متزامن. إذا حدث خطأ ما في شيفرة برمجية مجدولة مثلما في setTimeout فلن تستطيع الصياغة try..catch أن تلتقطه:

try {
  setTimeout(function() {
    noSuchVariable; // السكربت سيموت هنا
  }, 1000);
} catch (e) {
  alert( "won't work" );
}

وذلك لأن التابِع سيُنفذ لاحقًا، بينما يكون محرك جافاسكربت غادر باني try..catch.

للتقاط خطأ بداخل تابِع مُجدوَل يجب أن تكون الصياغة try..catch في داخل هذا التابِع.

setTimeout(function() {
  try {    
// صياغة ‫try..catch تُعالح الخطأ 
    noSuchVariable; // try..catch handles the error!
  } catch {
    alert( "error is caught here!" );
  }
}, 1000);

كائن الخطأ Error

تولّد جافاسكربت -متى حدث الخطأ- كائنًا يحوي تفاصيل الخطأ كاملةً، بعدها تُمرّرها وسيطًا إلى catch:

try {
  // ...
} catch(err) { // ‫ هذا ”كائن الخطأ“، ويمكننا استعمال أيّ اسم نريد بدل err
  // ...
}

لكائن الخطأ (في حالة الأخطاء المضمّنة في اللغة) خاصيتين اثنتين:

• name: اسم الخطأ. فمثلًا لو كان المتغير غير معرّفًا فسيكون الاسم "ReferenceError".

• message: الرسالة النصية بتفاصيل الخطأ.

كما هناك خاصيات أخرى غير قياسية في أغلب بيئات جافاسكربت. أكثرها استعمالًا ودعمًا هي:

• stack: مَكدس الاستدعاء الحالي: سلسلة نصية فيها معلومات عن سلسلة الاستدعاءات المتداخلة التي تسبّبت بالخطأ. نستعمل الخاصية للتنقيح فقط.

مثال:

try {
*!*
  lalala; // خطأ المتغيّر غير معرّف
*/!*
} catch(err) {
  alert(err.name); // ReferenceError(خطأ في الإشارة)
  alert(err.message); // المتغيّر ‫lalala غير معرف
  alert(err.stack); // ‫ReferenceError:(خطأ في الإشارة) المتغيّر ‫lalala غير معرّف في (...call stack)

  //يمكننا أيضًا عرض الخطأ بالكامل
  //تحول الخطأ إلى سلسلة نصية هكذا ‫:"name: message"

  alert(err); // ‫ReferenceError:(خطأ في الإشارة) المتغيّر ‫lalala غير معرّف
}

إسناد "catch" الاختياري

تحذير:هذه إضافة حديثة للغة من الممكن أن تحتاج لترقيع الخطأ في المتصفحات القديمة لأن هذه الميّزة جديدة.

لو لم تريد تفاصيل الخطأ فيمكنك إزالتها من catch:

try {
  // ...
} catch { // <-- بدون المتغير (err)
  // ...
}

استعمال "try..catch"

هيًا نرى معًا مثالًا واقعيًا عن try..catch:

كما نعلم فجافاسكربت تدعم التابِع JSON.parse(str)‎ ليقرأ القيم المرمّزة بِـ JSON.

عادةً ما نستعمله لفكّ ترميز البيانات المستلمة من الشبكة، كانت آتية من خادوم أو من أيّ مصدر غيره.

نستلم البيانات ونستدعي JSON.parse هكذا:

let json = '{"name":"John", "age": 30}'; // بيانات من الخادوم

// لاحظ
let user = JSON.parse(json); // نحوّل التمثيل النصي إلى كائن جافاسكربت

// الآن صار ‫user كائنًا فيه خاصيات أتت من السلسلة النصية
alert( user.name ); // John
alert( user.age );  // 30

يمكنك أن ترى تفاصيل أكثر عن JSON في درس JSON methods, toJSON.

لو كانت سلسلة json معطوبة، فسيُولّد JSON.parse خطأً و”ويموت“ السكربت.

هل نقبل بالأمر الواقع المرير؟ لا وألف لا!

في هذا الحال لن يعرف الزائر ما يحدث لو حدث للبيانات أمر (ما لم يفتح طرفية المطوّرين). وعادةً ما لا يحب الناس ما ”يموت“ أمامهم دون أن يُعطيهم رسالة خطأ.

فلنستعمل try..catch للتعامل مع هذه المعضلة:

let json = "{ bad json }";

try {

  let user = JSON.parse(json); // <-- لو حدث خطأ...
  alert( user.name ); // فلن يعمل هذا

} catch (e) {
  // ...تنتقل عملية التنفيذ إلى هنا
  alert( "Our apologies, the data has errors, we'll try to request it one more time." ); // المعذرة، في البيانات أخطاء. سنحاول طلبها مرة ثانية.
  alert( e.name );
  alert( e.message );
}

استعملنا هنا الكتلة catch لعرض رسالة لا أكثر، ولكن يمكن أن نستغلّها أفضل من هذا: مثل إرسال طلب إلى الشبكة، أو اقتراح عملية بديلة على الزائر أو إرسال معلومات الخطأ إلى … تسجيل، وغيرها… هذا كلّه أفضل من الموت والموت فقط.

رمي أخطائنا نحن

ماذا لو كان كائن json صحيح صياغيًا إلّا أنّ الخاصية المطلوبة name ليست فيه؟ هكذا مثلًا:

let json = '{ "age": 30 }'; // البيانات ناقصة

try {

  let user = JSON.parse(json); // <-- لا أخطاء
  alert( user.name ); // ما من اسم!

} catch (e) {
  alert( "doesn't execute" ); // لا يتنفّذ السطر
}

هنا سيعمل التابِع JSON.parse كما يجب، لكن عدم وجود الخاصية name هي المشكلة والخطأ في هذه الحالة.

لتوحيد طريقة معالجة الأخطاء، سنستخدم مُعامل throw.

مُعامل "الرمي" throw

يُولّد لنا مُعامل الرمي throw خطأً.

صياغته هي:

throw <error object>

يمكننا تقنيًا استعمال ما نريد ليكون كائن خطأ، مثل الأنواع الأولية كالأعداد والسلاسل النصية. ولكن من الأفضل استعمال الكائنات ومن الأفضل أكثر أن تملك خاصيتي الاسم name والرسالة message (لتكون متوافقة إلى حدٍّ ما مع الأخطاء المضمّنة).

في جافاسكربت مختلف البانيات المضمّنة للأخطاء القياسية: الخطأ Error والخطأ الصياغي SyntaxError والخطأ في الإشارة ReferenceError والخطأ في النوع TypeError وغيرها. يمكننا استعمال هذه البانيات أيضًا لإنشاء كائنات الخطأ.

صياغتها هي:

let error = new Error(message);
// أو
let error = new SyntaxError(message);
let error = new ReferenceError(message);
// ...

في الأخطاء المضمّنة في اللغة (ولا أعني الكائنات أيًا كانت، الأخطاء بعينها) تكون قيمة الخاصية name هي ذاتها اسم الباني، وتُؤخذ الرسالة message من الوسيط.

مثال:

let error = new Error("Things happen o_O"); // غرائب وعجائب ة_ه

alert(error.name); // خطأ
alert(error.message); // غرائب وعجائب ة_ه

لنرى نوع الخطأ الذي يُولّده التابِع JSON.parse:

try {
  JSON.parse("{ bad json o_O }"); // جيسون شقي ة_ه
} catch(e) {
  alert(e.name); // SyntaxError خطأ صياغي
  alert(e.message); // Unexpected token o in JSON at position 2
}

كما رأينا فهو خطأ صياغي SyntaxError.

وفي حالتنا نحن فعدم وجود الخاصية name هي خطأ، إذ لا بدّ أن يكون للمستخدم اسمًا.

هيًا نرمِ الخطأ:

let json = '{ "age": 30 }'; // البيانات ناقصة

try {

  let user = JSON.parse(json); // <-- لا أخطاء

  if (!user.name) {
    throw new SyntaxError("Incomplete data: no name"); // (*) البيانات ناقصة: ليس هنالك اسم
  }

  alert( user.name );

} catch(e) {

alert( "JSON Error: " + e.message ); // خطأ ‫JSON: البيانات ناقصة: ليس هنالك اسم
}

يُولّد مُعامل throw (في السطر (*)) خطأً صياغيًا SyntaxError له الرسالة الممرّرة message، تمامًا كما تُولّد جافاسكربت نفسها الخطأ. بهذا يتوقّف التنفيذ داخل try وينتقل سير العملية إلى catch.

الآن صارت الكتلة catch هي المكان الذي نتعامل فيه مع الأخطاء فحسب، أكانت أخطاء JSON.parse أم أخطاء أخرى.

إعادة الرمي

يمكننا في المثال أعلاه استعمال try..catch للتعامل مع البيانات الخاطئة. ولكن هل يمكن أن يحدث خطأ آخر غير متوقّع في كتلة try {...}‎؟ مثلًا لو كان خطأ المبرمج (لم يعرّف المتغير) أو شيئًا آخر ليس أنّ ”البيانات خاطئة“؟

مثال:

let json = '{ "age": 30 }'; // البيانات ناقصة

try {
  user = JSON.parse(json); // ‫ نسينا ”let“ قبل user

  // ...
} catch(err) {

  alert("JSON Error: " + err);   // خطأ ‫JSON: خطأ في الإشارة: user غير معرّف (في الواقع، ليس خطأ JSON)

}

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

في حالتنا هذه على try..catch التقاط أخطاء ”البيانات الخاطئة“ فقط، ولكنّ طبيعة catch هي أن تلتقط كلّ الأخطاء من try. فهنا مثلًا التقطت خطأً غير متوقع ولكنها ما زالت تصرّ على رسالة "JSON Error". هذا ليس صحيحًا ويصعّب من تنقيح الشيفرة كثيرًا.

لحسن الحظ فيمكننا معرفة الخطأ الذي التقطناه، من اسمه name مثلًا:

try {
  user = { /*...*/ };
} catch(e) {
  alert(e.name); // ‫”خطأ في الإشارة” محاولة الوصول لمتغيّر غير معرّف
}

القاعدة ليست بالمعقّدة:

على catch التعامل مع الأخطاء التي تعرفها فقط، و”إعادة رمي“ ما دونها.

يمكننا توضيح فكرة ”إعادة الرمي“ بهذه الخطوات:

1. تلتقط catch كلّ الأخطاء.
2. نحلّل كائن الخطأ err في كتلة catch(err) {...}‎.
3. لو لم نعرف طريقة التعامل معه، رميناه throw err.

في الشيفرة أسفله استعملنا إعادة الرمي لتتعامل الكتلة catch مع أخطاء الصياغة فقط SyntaxError:

let json = '{ "age": 30 }'; // البيانات ناقصة
try {

  let user = JSON.parse(json);

  if (!user.name) {
    throw new SyntaxError("Incomplete data: no name"); // البيانات ناقصة: لا اسم
  }

  blabla(); // خطأ غير متوقع

  alert( user.name );

} catch(e) {

  if (e.name == "SyntaxError") {
    alert( "JSON Error: " + e.message ); // خطأ JSON: كذا كذا
  } else {
    throw e; // نُعيد رميه (*)
  }

}

الخطأ المرمي في السطر (*) داخل كتلة catch ”يسقط خارج أرض“ try..catch ويمكننا إمّا التقاطه باستعمال تعبير try..catch خارجي (لو كتبناه) أو سيقتل الخطأ السكربت.

هكذا لا تتعامل الكتلة catch إلا مع ما تعرف مع أخطاء وتتخطّى (إن صحّ القول) الباقي.

يوضّح المثال أسفله كيفية التقاط هذه الأخطاء بمستويات أخرى من try..catch:

function readData() {
  let json = '{ "age": 30 }';

  try {
    // ...
    blabla(); // خطأ!
  } catch (e) {
    // ...
    if (e.name != 'SyntaxError') {
      throw e; // ‫نُعيد رميه (لا ندري طريقة التعامل معه)
    }
  }
}

try {
  readData();
} catch (e) {
  alert( "External catch got: " + e ); // التقطناه أخيرًا!
}

هكذا لا تعرف الدالة readData إلّا طريقة التعامل مع أخطاء الصياغة SyntaxError، بينما تتصرّف تعابير try..catch الخارجية بغيرها من أخطاء (إن عرفتها).

try..catch..finally

لحظة… لم ننتهي بعد.

يمكن أيضًا أن يحتوي تعبير try..catch على مُنغلقة أخرى: finally.

لو كتبناها فستعمل في كلّ الحالات الممكنة:

• بعد try لو لم تحدث أخطاء
• وبعد catch لو حدثت أخطاء.

هكذا هي الصياغة ”الموسّعة“:

try {
   ... نحاول تنفيذ الشيفرة ...
} catch(e) {
   ... نتعامل مع الأخطاء ...
} finally {
   ... ننفّذه مهما كان الحال ...
}

جرّب تشغيل هذه الشيفرة:

try {
  alert( 'try' );
  if (confirm('Make an error?')) BAD_CODE(); // أتريد ارتكاب خطأ؟
} catch (e) {
  alert( 'catch' ); // أمسكناه
} finally {
  alert( 'finally' ); // بعد ذلك
}

يمكن أن تعمل الشيفرة بطريقتين اثنتين:

1. لو كانت الإجابة على ”أتريد ارتكاب خطأ؟“ ”نعم“، فستعمل هكذا try -> catch -> finally.
2. لو رفضت ذلك، فستعمل هكذا try -> finally.

نستعمل عادةً مُنغلقة finally متى ما شرعنا في شيء وأردنا إنهائه مهما كانت نتيجة الشيفرة.

فمثلًا نريد قياس الوقت الذي تأخذه دالة أعداد فيبوناتشي fib(n)‎. الطبيعي أن نبدأ القياس قبل التشغيل ونُنهيه بعده، ولكن ماذا لو حدث خطأ أثناء استدعاء الدالة؟ مثلًا خُذ شيفرة الدالة fib(n)‎ أسفله وسترى أنّها تُعيد خطأً لو كانت الأعداد سالبة أو لم تكن أعدادًا صحيحة (not integer).

مُنغلقة finally هي المكان الأمثل لإنهاء هذا القياس مهما كانت النتيجة، فتضمن لنا بأنّ الوقت سيُقاس كما ينبغي في الحالتين معًا، نجح تنفيذ أم لم ينجح وأدّى لخطأ:

let num = +prompt("Enter a positive integer number?", 35)

let diff, result;

function fib(n) {
  if (n < 0 || Math.trunc(n) != n) {
    throw new Error("Must not be negative, and also an integer.");
  }
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}

let start = Date.now();

try {
  result = fib(num);
} catch (e) {
  result = 0;
*!*
} finally {
  diff = Date.now() - start;
}
*/!*

alert(result || "error occurred");

alert( `execution took ${diff}ms` );

يمكنك التأكّد بتشغيل الشيفرة وإدخال 35 في prompt، وستعمل كما يجب، أي تكون finally بعد try. وبعد ذلك جرّب إدخال ‎-1 وسترى خطأً مباشرةً وسيأخذ تنفيذ الشيفرة مدّة 0ms، وكِلا الزمنين المقيسين صحيحين.

أي أنّه يمكن للدالة أن بعبارة return أو throw، لا مشكلة إذ ستُنفّذ مُنغلقة finally في أيّ من الحالتين.

ملاحظة:المتغيّرات في صياغة try..catch..finally محلية. لاحظ أن المتغيرات result و diff في الشيفرة البرمجية أعلاه معرّفة قبل الصياغة try..catch.

وبذلك إذا عرفنا let في الصياغة try فستبقى مرئية بداخلها فقط.

ملاحظة: بخصوص finally و return فإن مُنغلقة finally تعمل مع أي خروج من صياغة try..catch والتي تتضمن خروج واضح من خلال تعليمة return.

في المثال أدناه هنالك تعليمة return في try في هذه الحالة ستنفذّ finally قبل عودة عنصر التحكم إلى الشيفرة البرمجية الخارجية مباشرة.

function func() {

  try {
*!*
    return 1;
*/!*

  } catch (e) {
    /* ... */
  } finally {
*!*
    alert( 'finally' );
*/!*
  }
}

alert( func() ); // ‫أولًا ستعمل تعليمة alert من المنغلقة finally ومن ثمّ هذه

ملاحظة: إن باني try..finally بدون منغلقة catch مفيد أيضًا إذ يمكننا استخدامه عندما لا نريد معالجة الأخطاء وإنما نريد التأكد من أن العمليات التي بدأناها انتهت فعلًا.

function func() {
// ‫نبدأ بشيء يحتاج لإكمال (مثل عملية القياس)‎

  try {
    // ...
  } finally {
    // نكمله هنا حتى وإن كلّ السكربت مات
  }
}

في الشيفرة البرمجية أعلاه، هنالك خطأ دائمًا يحدث في try لأنه لا يوجد catch. ومع ذلك ستعمل finally قبل الخروج من التابع.

الالتقاط العمومي

تحذير: مخصص لبيئة العمل إن المعلومات في هذه الفقرة ليست جزءًا من لغة جافاسكربت

لنقل مثلًا أنْ حصل خطأ فادح خارج تعبير try..catch، ومات السكربت (مثلًا كان خطأ المبرمج أو أيّ شيء آخر مريب).

أهناك طريقة يمكننا التصرّف فيها في هكذا حالات؟ لربّما أردنا تسجيل الخطأ أو عرض شيء معيّن على المستخدم (عادةً لا يرى المستخدمون رسائل الأخطاء) أو غيرها.

لا نجد في المواصفة أيّ شيء عن هذا، إلّا أنّ بيئات اللغة تقدّم هذه الميزة لأهميتها البالغة. فمثلًا تقدّم Node.js الحدث process.on("uncaughtException")‎. ولو كنّا نُطوّر للمتصفّح فيمكننا إسناد دالة إلى خاصية window.onerror الفريدة (إذ تعمل متى حدث خطأ لم يُلتقط).

الصياغة هي:

window.onerror = function(message, url, line, col, error) {
  // ...
};

• message: رسالة الخطأ.

• url: عنوان URL للسكربت أين حدث الخطأ.

• line وcol: رقم السطر والعمود أين حدث الخطأ.

• error: كائن الخطأ.

مثال:

<script>

  window.onerror = function(message, url, line, col, error) {
    alert(`${message}\n At ${line}:${col} of ${url}`);
  };


  function readData() {
    badFunc(); // Whoops, something went wrong!
  }

  readData();
</script>

عادةً، لا يكون الهدف من …. العمومي window.onerror استعادة تنفيذ السكربت (إذ هو أمر مستحيل لو كانت أخطاء من المبرمج) بل يكون لإرسال هذه الرسائل إلى المبرمج.

كما أنّ هناك خدمات على الوِب تقدّم مزايا لتسجيل الأخطاء في مثل هذه الحالات، أمثال https://errorception.com وhttp://www.muscula.com.

وهكذا تعمل:

1. نُسجّل في الخدمة ونأخذ منهم شيفرة جافاسكربت صغيرة (أو عنوانًا للسكربت) لنضعها في صفحاتنا.
2. يضبط هذا السكربت دالة window.onerror مخصّصة.
3. ومتى حدث خطأ أرسلَ طلب شبكة بالخطأ إلى الخدمة.
4. ويمكننا متى أردنا الولوج إلى واجهة الوِب للخدمة ومطالعة تلك الأخطاء.

خلاصة

يتيح لنا تعبير try..catch التعامل مع الأخطاء أثناء تنفيذ الشيفرات. كما يدلّ اسمها فهي تسمح ”بتجربة“ تنفيذ الشيفرة و”والتقاط“ الأخطاء التي قد تحدث فيها.

صياغتها هي:

try {
  // شغّل الشيفرة
} catch(err) {
  // انتقل إلى هنا لو حدث خطأ
  // ‫err هو كائن الخطأ
} finally {
  // مهما كان الذي حدث، نفّذ هذا
}

يمكننا إزالة قسم catch أو قسم finally، واستعمال الصيغ الأقصر try..catch وtry..finally.

لكائنات الأخطاء الخاصيات الآتية:

• message: رسالة الخطأ التي نفهمها نحن البشر.
• name: السلسلة النصية التي فيها اسم الخطأ (اسم باني الخطأ).
• stack (ليست قياسية ولكنّها مدعومة دعمًا ممتازًا): المَكدس في لحظة إنشاء الخطأ.

لو لم تُرد كائن الخطأ فيمكنك إزالتها باستعمال catch { بدل catch(err) {‎.

يمكننا أيضًا توليد الأخطاء التي نريد باستعمال مُعامل throw. تقنيًا يمكن أن يكون وسيط throw ما تريد ولكن من الأفضل لو كان كائن خطأ يرث صنف الأخطاء Error المضمّن في اللغة. سنعرف المزيد عن توسعة الأخطاء في القسم التالي.

كما يُعدّ نمط ”إعادة الرمي“ البرمجي نمطًا مهمًا عند التعامل مع الأخطاء، فلا تتوقّع كتلة catch إلّا أنواع الأخطاء التي تفهمها وتعرف طريقة التعامل معها، والباقي عليها إعادة رميه لو لم تفهمه.

حتّى لو لم نستعمل تعبير try..catch فأغلب البيئات تتيح لنا إعداد … أخطاء ”عمومي“ لالتقاط الأخطاء التي ”تسقط أرضًا“. هذا … في المتصفّحات اسمه window.onerror.

تمارين

أخيرًا أم الشيفرة؟

الأهمية: 5

وازِن بين الشيفرتين هتين.

1. تستعمل الأولى finally لتنفيذ الشيفرة بعد try..catch:

   try {
     عمل عمل عمل
   } catch (e) {
     نتعامل مع الأخطاء
   } finally {
     ننظّف مكان العمل // هنا
   }

    

2. الثانية تضع عملية التنظيف بعد try..catch:

   try {
     عمل عمل عمل
   } catch (e) {
     نتعامل مع الأخطاء
   }
   
   ننظّف مكان العمل // ‎هنا

   سنحتاج بكل بتأكيد للتنظيف بعد العمل. بغض النظر إن وجدَنا خطأً ما أم لا.

هل هنالك ميزة إضافية لاستخدام finally؟ أم أن الشيفرتين السابقتين متساويتين؟ إن كان هنالك ميزّة اكتب مثلًا يوضحها.

الحل

عندما ننظر إلى الشيفرة الموجودة بداخل التابع يصبح الفرق جليًا.

يختلف السلوك إذا كان هناك "قفزة" من "try..catch".

على سبيل المثال، عندما يكون هناك تعليمة return بداخل صياغة try..catch. تعمل منغلقة finally في حالة وجود أي خروج من صياغة try..catch، حتى عبر تعليمة return: مباشرة بعد الانتهاء من try..catch ، ولكن قبل أن تحصل شيفرة الاستدعاء على التحكم.

function f() {
  try {
    alert('start');
    return "result";
  } catch (e) {
    /// ...
  } finally {
    alert('cleanup!');
  }
}

f(); // cleanup!

… أو عندما يكون هناك throw، مثل هنا:

function f() {
  try {
    alert('start');
    throw new Error("an error");
  } catch (e) {
    // ...
    if("can't handle the error") {
      throw e;
    }

  } finally {
    alert('cleanup!')
  }
}

f(); // cleanup!

تضمنُ finally عملية التنظيف هنا. إذا وضعنا الشيفرة البرمجية في نهاية f ، فلن تشغّل في هذا السيناريو.

ترجمة -وبتصرف- للفصل Error handling, "try..catch"‎ من كتاب The JavaScript language.

لا يمكننا في جافاسكربت إلّا أن نرث كائنًا واحدًا فقط. وليس هناك إلّا كائن [[Prototype]] واحد لأيّ كائن. ولا يمكن للصنف توسعة أكثر من صنف واحد.

وأحيانًا يكون ذلك مُقيّدًا نوعًا ما. فنقل بأنّ لدينا صنف ”كنّاسة شوارع“ StreetSweeper وصنف ”دراجة هوائية“ Bicycle، وأردنا صنع شيء يجمعهما: ”كنّاسة شوارع بدراجة هوائية“ StreetSweepingBicycle.

أو ربّما لدينا صنف المستخدم User وصنف ”مُطلق الأحدث“ EventEmitter حيث فيه خاصية توليد الأحداث، ونريد إضافة ميزة EventEmitter إلى User كي يُطلق المستخدمون الأحداث أيضًا.

هناك مفهوم في اللغة يساعد في حلّ هذه وهو ”المخاليط“ (Mixins).

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

أي بعبارة أخرى، يُقدّم المخلوط توابِع فيها وظائف وسلوك معيّن، ولكنّا لا نستعمله لوحده بل نُضيف تلك الوظيفة أو ذاك السلوك إلى الأصناف الأخرى.

مثال عن المخاليط

أبسط طريقة لكتابة تنفيذ مخلوط في جافاسكربت هو صناعة كائن فيه توابِع تُفيدنا في أمور معيّنة كي ندمجها بسهولة داخل كائن prototype لأيّ صنف كان.

لنقل مثلًا لدينا المخلوط sayHiMixin ليُضيف بعض الكلام للمستخدم أو الصنف User:

// مخلوط
let sayHiMixin = {
  sayHi() {
    alert(`Hello ${this.name}`); // مرحبًا يا فلان
  },
  sayBye() {
    alert(`Bye ${this.name}`); // وداعًا يا فلان
  }
};

// الاستعمال:
class User {
  constructor(name) {
    this.name = name;
  }
}

// ننسخ التوابِع
Object.assign(User.prototype, sayHiMixin);

// الآن يمكن أن يرحّب المستخدم بغيره
new User("Dude").sayHi(); // Hello Dude! مرحبًا يا Dude!

ما من وراثة هنا، بل نسخ بسيط للتوابِع. هكذا يمكن أن يرث صنف المستخدم من أيّ صنف آخر وأن يُضيف هذا المخلوط ليدمج فيه توابِع أخرى، هكذا:

class User extends Person {
  // ...
}

Object.assign(User.prototype, sayHiMixin);

يمكن أن تستفيد المخاليط من الوراثة بينها ذاتها المخاليط. فمثلًا، نرى هنا كيف يرث sayHiMixin المخلوطَ sayMixin:

let sayMixin = {
  say(phrase) {
    alert(phrase);
  }
};

let sayHiMixin = {
  __proto__: sayMixin, // ‫(أو نستعمل Object.create لضبط كائن prototype هنا)

  sayHi() {
    // نستدعي التابِع الأب
    super.say(`Hello ${this.name}`); // (*)
  },
  sayBye() {
    super.say(`Bye ${this.name}`); // (*)
  }
};

class User {
  constructor(name) {
    this.name = name;
  }
}

// ننسخ التوابِع
Object.assign(User.prototype, sayHiMixin);

// الآن يمكن أن يرحّب المستخدم بالناس
new User("Dude").sayHi(); // مرحبًا يا ‫ Dude!

لاحظ كيف يبحث استدعاء التابِع الأب super.say()‎ في sayHiMixin (في الأسطر عند (*)) - كيف يبحث عن التابِع داخل كائن prototype المخلوطَ وليس داخل الصنف.

إليك صورة (طالع الجانب الأيمن فيها):

يعزو ذلك إلى أنّ التابِعين sayHi وsayBye أُنشآ في البداية داخل sayHiMixin. فحتّى حين ننسخهما تُشير خاصية [[HomeObject]] الداخلية فيهما إلى sayHiMixin كما نرى في الصورة.

وطالما يبحث super عن التوابِع الأب في [[HomeObject]].[[Prototype]] يكون البحث داخل sayHiMixin.[[Prototype]]‎ وليس داخل User.[[Prototype]]‎.

مخلوط الأحداث EventMixin

الآن حان وقت استعمال المخاليط في الحياة العملية.

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

• سيقدّم المخلوط تابِعًا باسم ‎.trigger(name, [...data])‎ ”يُولّد حدثًا“ متى حدث شيء مهم. وسيط الاسم name هو… اسم الحدث، وبعده تأتي بيانات الحدث إن احتجناها.
• كما والتابِع .on(name, handler)‎ الذي سيُضيف دالة ”معاملة“ handler لتستمع إلى الأحداث حسب الاسم الذي مرّرناه. ستُستدعى الدالة متى تفعّل الحدث بالاسم name وسيُمرّر لها الوسطاء في استدعاء .trigger.
• وأيضًا… التابِع ‎.off(name, handler)‎ الذي سيُزيل المستمع handler.

بعدما نُضيف المخلوط سيقدر كائن المستخدم user على توليد حدث ولوج "login" متى ولج الزائر إلى الموقع. ويمكن لكائن آخر (لنقل التقويم calendar) الاستماع إلى هذا الحدث للقيام بمهمة ما (مثلًا تحميل تقويم المستخدم الذي ولج).

أو يمكن أن تُولّد القائمة menu حدثَ الاختيار "select" متى اختار المستخدم عنصرًا منها، ويمكن للكائنات الأخرى إسناد ما تحتاج من معالجات للاستماع إلى ذلك الحدث. وهكذا.

إليك الشيفرة:

let eventMixin = {
  /**
   *طريقة الانضمام إلى الحدث
   *  menu.on('select', function(item) { ... }
  */
  on(eventName, handler) {
    if (!this._eventHandlers) this._eventHandlers = {};
    if (!this._eventHandlers[eventName]) {
      this._eventHandlers[eventName] = [];
    }
    this._eventHandlers[eventName].push(handler);
  },

  /**
   * طريقة إلغاء الانضمام إلى الحدث
   *  menu.off('select', handler)
   */
  off(eventName, handler) {
    let handlers = this._eventHandlers && this._eventHandlers[eventName];
    if (!handlers) return;
    for (let i = 0; i < handlers.length; i++) {
      if (handlers[i] === handler) {
        handlers.splice(i--, 1);
      }
    }
  },

  /**
   * توليد حدث من خلال الاسم والبيانات المعطاة
   *  this.trigger('select', data1, data2);
   */
  trigger(eventName, ...args) {
    if (!this._eventHandlers || !this._eventHandlers[eventName]) {
      return; // no handlers for that event name
    }

    // call the handlers
    this._eventHandlers[eventName].forEach(handler => handler.apply(this, args));
  }
};

• ‎.on(eventName, handler)‎ -- يضبط الدالة handler لتُشغّل متى ما حدث الحدث بهذا الاسم. تقنيًا تُخزّن خاصية ‎_eventHandlerslrm مصفوفة من دوال المعاملة لكلّ حدث، وتُضيف الدالة إلى القائمة.
• ‎.off(eventName, handler)‎ -- يحذف الدالّة handler من القائمة.
• ‎.trigger(eventName, ...args)‎ -- يولّد حدث: كلّ المعاملات تُستدعى من ‎_eventHandlers[eventName]‎ مع قائمة الوسطاء ‎...args.

الاستعمال:

// أنشئ صنف
class Menu {
  choose(value) {
    this.trigger("select", value);
  }
}
// أضف مخلوط مع التوابع المرتبط به
Object.assign(Menu.prototype, eventMixin);

let menu = new Menu();
// أضف معالج حدث من أجل أن يستدعى عند الإختيار
*!*
menu.on("select", value => alert(`Value selected: ${value}`));
*/!*
// ينطلق الحدث=> يُشغّل المعالج مباشرةً ويعرُض
// القيمة المختارة:123
menu.choose("123");

يمكننا الآن أن نحوّل أيّ شيفرة لتتفاعل متى ما اخترنا شيئًا من القائمة بالاستماع إلى الحدث عبر menu.on(...)‎.

كما ويُسهّل المخلوط eventMixin من إضافة هذا السلوك (أو ما يشابهه) إلى أيّ صنف نريد دون أن نتدخّل في عمل سلسلة الوراثة.

خلاصة

مصطلح المخلوط في البرمجة كائنية التوجّه: صنف يحتوي على توابِع نستعملها في أصناف أخرى.

بعض اللغات تتيح لنا الوراثة من أكثر من صنف، أمّا جافاسكربت فلا تتيح ذلك، ولكن يمكننا التحايل على الأمر وذلك بنسخ التوابع إلى النموذج الأولي prototype.

يمكننا استعمال المخاليط بطريقة لتوسيع الصنف وذلك بإضافة سلوكيات متعددة إليه، مثل: معالج الأحداث كما رأينا في المثال السابق.

من الممكن أن تصبح المخاليط نقطة تضارب إذا قاموا بدون قصد بإعادة تعريف توابع الأصناف. لذا عمومًا يجب التفكير مليًا بأسماء المخاليط لتقليل احتمالية حدوث ذلك.

ترجمة -وبتصرف- للفصل Mixins من كتاب The JavaScript language

يُتيح لنا المُعامل instanceof (أهو سيرورة من) فحص هل الكائن ينتمي إلى الصنف الفلاني؟ كما يأخذ الوراثة في الحسبان عند الفحص.

توجد حالات عديدة يكون فيها هذا الفحص ضروريًا. **سنستعمله هنا لصناعة دالة **، أي دالة تغيّر تعاملها حسب نوع الوسطاء الممرّرة لها.

معامل instanceof

صياغته هي:

obj instanceof Class

يُعيد المُعامل قيمة true لو كان الكائن obj ينتمي إلى الصنف Class أو أيّ صنف يرثه.

مثال:

class Rabbit {}
let rabbit = new Rabbit();

// ‫هل هو كائن من الصنف Rabbit؟
alert( rabbit instanceof Rabbit ); // true نعم

كما يعمل مع الدوال البانية:

// ‫بدل استعمال class
function Rabbit() {}

alert( new Rabbit() instanceof Rabbit ); // true نعم

كما والأصناف المضمّنة مثل المصفوفات Array:

let arr = [1, 2, 3];
alert( arr instanceof Array ); // true نعم
alert( arr instanceof Object ); // true نعم

لاحظ كيف أنّ الكائن arr ينتمي إلى صنف الكائنات Object أيضًا، إذ ترث المصفوفات -عبر prototype- الكائناتَ.

عادةً ما يتحقّق المُعامل instanceof من سلسلة prototype عند الفحص. كما يمكننا وضع المنطق الذي نريد لكلّ صنف في التابِع الثابت Symbol.hasInstance.

تعمل خوارزمية obj instanceof Class بهذه الطريقة تقريبًا:

1. لو وجدت التابِع الثابت Symbol.hasInstance تستدعيه وينتهي الأمر: Class[Symbol.hasInstance](obj)‎. يُعيد التابِع إمّا true وإمّا false. هكذا نخصّص سلوك المُعامل instanceof.

   مثال:

   // ‫ضبط instanceOf للتحقق من الافتراض القائل
   // ‫بأن كل شيء يملك الخاصية canEat هو حيوان
   class Animal {
     static [Symbol.hasInstance](obj) {
       if (obj.canEat) return true;
     }
   }
   
   let obj = { canEat: true };
   
   alert(obj instanceof Animal); // true
   // ‫تستدعى Animal[Symbol.hasInstance](obj)‎

    

2. ليس لأغلب الأصناف التابِع Symbol.hasInstance. في هذه الحالة تستعمل المنطق العادي: يفحص obj instanceOf Class لو كان كائن Class.prototype مساويًا لأحد كائنات prototype في سلسلة كائنات prototype للكائن obj.

   وبعبارة أخرى ، وازن بينهم واحدًا تلو الآخر:

   obj.__proto__ === Class.prototype?
   obj.__proto__.__proto__ === Class.prototype?
   obj.__proto__.__proto__.__proto__ === Class.prototype?
   ...
   // ‫لو كانت إجابة أيًا منها true، فتُعيد true
   // ‫وإلّا متى وصلت نهاية السلسلة أعادت false

   في المثال أعلاه نرى rabbit.__proto__ === Rabbit.prototype، بذلك تُعطينا الجواب مباشرةً.

   أمّا لو كنّا في حالة وراثة، فستتوقّف عملية المطابقة عند الخطوة الثانية:

   class Animal {}
   class Rabbit extends Animal {}
   
   let rabbit = new Rabbit();
   alert(rabbit instanceof Animal); // ‏(هنا) نعم
   
   // rabbit.__proto__ === Rabbit.prototype
   // rabbit.__proto__.__proto__ === Animal.prototype (تطابق!)

    

إليك صورة توضّح طريقة موازنة rabbit instanceof Animal مع Animal.prototype:

كما وهناك أيضًا التابِع objA.isPrototypeOf(objB)‎، وهو يُعيد true لو كان الكائن objA في مكان داخل سلسلة prototype للكائن objB. يعني أنّنا نستطيع كتابة الفحص هذا obj instanceof Class هكذا: Class.prototype.isPrototypeOf(obj)‎.

الأمر مضحك إذ أنّ باني الصنف Class نفسه ليس لديه أيّ كلمة عن هذا الفحص! المهم هو سلسلة prototype وكائن Class.prototype فقط.

يمكن أن يؤدّي هذا إلى عواقب مثيرة متى تغيّرت خاصية prototype للكائن بعد إنشائه. طالع:

function Rabbit() {}
let rabbit = new Rabbit();

// غيّرنا كائن prototype
Rabbit.prototype = {};

// ...لم يعد أرنبًا بعد الآن!
alert( rabbit instanceof Rabbit ); // false لا

التابع Object.prototype.toString للأنواع

نعلم بأنّ الكائنات العادية حين تتحوّل إلى سلاسل نصية تصير [object Object]:

let obj = {};

alert(obj); // [object Object]
alert(obj.toString()); // كما أعلاه

يعتمد هذا على طريقة توفيرهم لتنفيذ التابِع toString. ولكن هناك ميزة مخفيّة تجعل هذا التابِع أكثر فائدة بكثير ممّا هو عليه، أن نستعمله على أنّه مُعامل typeof موسّع المزايا، أو بديلًا عن التابِع toString.

تبدو غريبة؟ أليس كذلك؟ لنُزل الغموض.

حسب المواصفة، فيمكننا استخراج التابِع toString المضمّن من الكائن وتنفيذه في سياق أيّ قيمة أخرى نريد، وسيكون ناتجه حسب تلك القيمة.

• لو كان عددًا، فسيكون [object Number]
• لو كان قيمة منطقية، فسيكون [object Boolean]
• لو كان null: ‏[object Null]
• لو كان undefined: ‏[object Undefined]
• لو كانت مصفوفة: [object Array]
• …إلى آخره (ويمكننا تخصيص ذلك).

هيًا نوضّح:

// ننسخ التابِع‫ toString إلى متغير ليسهل عملنا
let objectToString = Object.prototype.toString;

// ما هذا النوع؟
let arr = [];

alert( objectToString.call(arr) ); // [object Array] مصفوفة!

استعملنا هنا call كما وضّحنا في درس ”المزخرفات والتمرير“ لتنفيذ الدالة objectToString بسياق this=arr.

تفحص خوارزمية toString داخليًا قيمة this وتُعيد الناتج الموافق لها. إليك أمثلة أخرى:

let s = Object.prototype.toString;

alert( s.call(123) ); // [object Number]
alert( s.call(null) ); // [object Null]
alert( s.call(alert) ); // [object Function]

Symbol.toStringTag

يمكننا تخصيص سلوك التابِع toString للكائنات باستعمال خاصية الكائنات Symbol.toStringTag الفريدة.

مثال:

let user = {
  [Symbol.toStringTag]: "User" // مستخدم
};

alert( {}.toString.call(user) ); // [object User] // لاحظ

لأغلب الكائنات الخاصّة بالبيئات خاصية مثل هذه. إليك بعض الأمثلة من المتصفّحات مثلًا:

// تابِع ‫toStringTag للكائنات والأصناف الخاصّة بالمتصفّحات:
alert( window[Symbol.toStringTag]); // window
alert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest

alert( {}.toString.call(window) ); // [object Window]
alert( {}.toString.call(new XMLHttpRequest()) ); // [object XMLHttpRequest]

كما نرى فالناتج هو تمامًا ما يقوله Symbol.toStringTag (لو وُجد) بغلاف [object ...‎].

في النهاية نجد أن لدينا "نوع من المنشطات" لا تعمل فقط على الأنواع الأولية للبيانات بل وحتى الكائنات المضمنة في اللغة ويمكننا تخصيصها أيضًا.

يمكننا استخدام ‎{}.toString.call بدلًا من instanceof للكائنات المضمنة في اللغة عندما نريد الحصول على نوع البيانات كسلسلة بدلًا من التحقق منها.

خلاصة

لنلخّص ما نعرف عن التوابِع التي تفحص الأنواع:

كما نرى فعبارة ‎{}.toString هي تقنيًا typeof ولكن ”متقدّمة أكثر“.

بل إن التابع instanceof يؤدي دور مميّز عندما نتعامل مع تسلسل هرمي للأصناف ونريد التحقق من صنفٍ ما مع مراعاة الوراثة.

تمارين

instnaceof غريب عجيب

الأهمية: 5

في الشيفرة أسفله، لماذا يُعيد instanceof القيمة true. يتّضح جليًا بأنّ B()‎ لم يُنشِئ a.

function A() {}
function B() {}

A.prototype = B.prototype = {};

let a = new A();

// هنا
alert( a instanceof B ); // true

الحل

أجل، غريب عجيب حقًا.

ولكن كما نعرف فلا يكترث المُعامل instanceof بالدالة، بل بكائن prototype لها حيث تُطابقه مع غيره في سلسلة prototype.

وهنا نجد a.__proto__ == B.prototype، بذلك يُعيد instanceof القيمة true.

إذًا فحسب منطق instanceof، كائن prototype هو الذي يُعرّف النوع وليس الدالة البانية.

ترجمة -وبتصرف- للفصل Class checking: "instanceof"‎ من كتاب The JavaScript language

يمكننا توسيع الأصناف المضمّنة مثل المصفوفات والخرائط وغيرها. فمثلًا يرث صنف PowerArray من المصفوفة Array الأصيلة:

// نُضيف تابِعًا آخر إليها (أو أكثر لو أردنا‫)
class PowerArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
}

let arr = new PowerArray(1, 2, 5, 10, 50);
alert(arr.isEmpty()); // false

let filteredArr = arr.filter(item => item >= 10);
alert(filteredArr); // 10, 50
alert(filteredArr.isEmpty()); // false

من الجدير بالملاحظة أن التوابع المضمّنة في اللغة مثل: filter و map وغيرهم، تعيد كائنات جديدة من نفس النوع الموروث بالضبط PowerArray. وذلك لأن التطبيق الداخلي للتوابع يستخدم الباني المخصص لتلك الكائنات. في المثال أعلاه:

arr.constructor === PowerArray

متى استدعينا arr.filter()‎ أنشأ التابِع داخليًا مصفوفةً جديدة من النتائج باستعمال arr.constructor ذاتها، وليس المصفوفة العادية Array. هذا أمر رائع جدًا إذ يمكننا استعمال توابِع PowerArray على النتائج أيضًا.

يمكننا حتّى تخصيص هذا السلوك كما نرغب. فنُضيف جالِبًا ثابتًا Symbol.species إلى الصنف. لو كان موجودًا فسيُعيد الباني الذي ستستعمله جافاسكربت داخليًا لإنشاء المدخلات الجديدة في التوابِع map و filter وغيرها.

لو أردنا من التوابِع المضمّنة مثل map و filter - لو أردنا أن تُعيد المصفوفات الطبيعية، فعلينا إعادة صنف Array في رمز Symbol.species هكذا:

class PowerArray extends Array {
  isEmpty() {
    return this.length === 0;
  }

  // ستستعمل التوابِع المضمّنة هذا الصنف ليكون بانيًا
  static get [Symbol.species]() {
    return Array;
  }
}

let arr = new PowerArray(1, 2, 5, 10, 50);
alert(arr.isEmpty()); // false

// يصنع التابِع ‫ filter مصفوفةً جديدة باستعمال arr.constructor[Symbol.species]‎ بانيًا
let filteredArr = arr.filter(item => item >= 10);

// نوع ‫ filteredArr ليس PowerArray بل Array
alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function

كما نرى فالآن يُعيد التابِع ‎.filter مصفوفةً Array. بذلك تلك الميزة الموسّعة لن تُمرّر أكثر وأكثر.

ملاحظة: هنالك مجموعات أخرى تعمل بنفس الطريقة مثل: Map أو Set ويستخدمون أيضًا Symbol.species.

الأنواع المضمّنة لا ترث الثوابت

للكائنات المضمّنة أيضًا توابِع ثابتة مثل Object.keys و Array.isArray وغيرها.

وكما نعلم فالأصناف الأصيلة تُوسّع نفسها. فمثلًا تُوسّع المصفوفات Array الكائناتَ Object.

وعادةً متى وسّع الصنف صنفًا آخر ورث التوابِع الثابتة وغير الثابتة. شرحنا هذا بالتفصيل في المقال ”الخاصيات والتوابع الثابتة“.

ولكن الأصناف المضمّنة في اللغة استثناء لهذا، ولا ترث الحقول الثابتة من بعضها البعض.

مثال: ترث المصفوفات والتواريخ الكائناتَ، بذلك نرى لسيروراتها توابِع أتت من Object.prototype. ولكنّ كائن Array.[[Prototype]]‎ لا يُشير إلى Array، بذلك لا نرى توابِع ثابتة مثل Array.keys()‎ أوArray.keys()‎ مثلًا.

تغني الصورة عن ألف كلمة، إليك واحدة توضّح بنية التواريخ Date والكائنات Object:

كما ترى فليس هناك رابط بين التواريخ والكائنات، فهي مستقلة بذاتها. كائن Date.prototype فقط هو من يرث Object.prototype.

هذا فرق مهمّ للوراثة بين الكائنات المضمّنة في اللغة وتلك التي نحصل عليها باستعمال extends.

ترجمة -وبتصرف- للفصل Extending built-in classes من كتاب The JavaScript language

في البرمجة كائنية التوجّه، يُعدّ أكثر المبادئ أهمية هو فصل الواجهة الداخلية عن الخارجية.

هذا المبدأ ”إلزامي“ متى ما طوّرنا تطبيقًا يفوق تطبيقات ”أهلًا يا عالم“ تعقيدًا.

سنضع البرمجة ”على جنب“ ونرى الواقع؛ لنفهم هذا المبدأ.

الأجهزة الّتي نستعملها يوميًا عادةً ما تكون معقّدة، إلّا أنّ فصل واجهتها الداخلية عن تلك الخارجية يُتيح لنا استعمالها دون مشاكل تُذكر.

مثال من الحياة العملية

لنقل مثلًا آلة صنع القهوة، من الخارج بسيطة: زرّ تشغيل وشاشة عرض وبعض الفتحات وطبعًا لا ننسى الناتج… القهوة المميّزة الطعم!

ولكن من الداخل نرى… (هذه الصورة من كتيّب التصليح)

نرى تفاصيل وتفاصيل ولا شيء إلّا التفاصيل، ولكنّنا نستعملها دون أيّ فكرة عن تلك التفاصيل.

يمكننا أن نثق بجودة آلات صنع القهوة، ألا توافقني الرأي؟ فنحن نستعملها لسنوات وسنوات وإن ظهر أيّ عُطل، أخذناها للتصليح.

يكمن سرّ هذه الثقة وهذه البساطة لآلات صنع القهوة في أنّ التفاصيل كلّها مضبوطة كما يجب ومخفية داخلها.

إن أزلنا غطاء الحماية من الآلة وحاولنا استعمالها لكان الأمر أكثر تعقيدًا (أيّ زرّ نضغط؟) وخطرًا (الصدمات الكهربية).

كما سنرى أسفله، فالكائنات في البرمجة تشبه تمامًا آلات صنع القهوة.

ولكن لنُخفي التفاصيل الداخلية لن نستعمل غطاء حماية بل صياغة خاصّة في اللغة، كما وما هو متّفق عليه بين الناس.

الواجهتان الداخلية والخارجية

في البرمجة كائنية التوجّه، تنقسم الخاصيات والتوابِع إلى قسمين:

• واجهة داخلية (Internal interface): فيها التوابِع والخاصيات الّتي يمكن أن تصل إليها توابِع هذا الصنف، ولا يمكن أن يصل إليها ما خارج هذا الصنف.
• واجهة خارجية (External interface): فيها التوابِع والخاصيات الّتي يمكن أن يصل إليها ما خارج هذا الصنف أيضًا.

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

إذًا، ما نريده لنستعمل الكائنات هو معرفة واجهته الخارجية. أمّا معرفة طريقة عمله بالتفاصيل الدقيقة ليس أمرًا مهمًا أبدًا، وهذا في الواقع تسهيل عظيم.

شرحنا الآن الفكرة بشكلٍ عام.

أمّا في جافاسكربت فهناك نوعين من حقول الكائنات (الخاصيات والتوابِع):

• عامّة: يمكن أن نصل إليها من أيّ مكان، وهي تصنع تلك الواجهة الخارجية. حتّى اللحظة في هذا الكتاب كنّا نستعمل الخاصيات والتوابِع العموميّة فقط.
• خاصّة: يمكن أن نصل إليها من داخل الصنف فقط، وهي تصنع الواجهة الداخلية.

كما هناك في اللغات الأخرى حقول ”محميّة“: أي نصل إليها من داخل الصنف ومن أيّ صنف آخر يوسّعه (تعمل مثل الخاصّة، علاوةً على الوصول إليها من الأصناف الموروثة). هذه الحقول مفيدة جدًا للواجهة الداخلية، وهي منطقيًا أكثر استعمالًا من الخاصّة إذ حين نرث صنفًا نريدُ أن نصل إلى تلك الحقول الّتي فيه عادةً.

ليس هناك تعريف لتنفيذ هذه الحقول في جافاسكربت على مستوى اللغة، ولكنّها عمليًا تُسهّل الأمور كثيرًا، بذلك نحاكي عملها.

الآن حان وقت صناعة آلة قهوة بجافاسكربت مستعملين تلك الأنواع من الخاصيات. طبعًا لآلة القهوة تفاصيل عديدة ولن نضعها كلها في صنفنا لتسهيل الأمور (ولكن ما من مانع لتفعل أنت ذلك).

حماية ”مقدار الماء“

لنصنع أولًا صنفًا بسيطًا لآلة قهوة:

class CoffeeMachine {
  waterAmount = 0; // مقدار الماء في الآلة

  constructor(power) {
    this.power = power;
    alert( `Created a coffee-machine, power: ${power}` ); // صنعنا آلة قهوة بقوّة كذا
  }

}

// نصنع آلة قهوة واحدة
let coffeeMachine = new CoffeeMachine(100);

// نُضيف إليها الماء
coffeeMachine.waterAmount = 200;

حاليًا فخاصيتي مقدار الماء waterAmount والقوّة power عامّتين، ويمكننا بسهولة جلبهما أو ضبطهما من خارج الصنف لأيّ قيمة نريد.

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

عادةً ما نضع شَرطة سفلية _ قبل أسماء الخاصيات المحميّة.

لا تفرض اللغة هذا الأمر ولكنّه اتّفاق بين معشر المطوّرين بأنّه ممنوع الوصول إلى هذه الخاصيات والتوابِع من خارج الأصناف.

إذًا، ستكون الخاصية باسم ‎_waterAmount:

class CoffeeMachine {
  _waterAmount = 0;

  set waterAmount(value) {
    if (value < 0) throw new Error("Negative water"); // قيمة الماء بالسالب
    this._waterAmount = value;
  }

  get waterAmount() {
    return this._waterAmount;
  }

  constructor(power) {
    this._power = power;
  }

}

// نصنع آلة القهوة المميّزة
let coffeeMachine = new CoffeeMachine(100);

// نُضيف الماء
coffeeMachine.waterAmount = -10; // خطأ: قيمة الماء بالسالب

الآن صرنا نتحكّم بالوصول إلى الخاصية، ومحاولة ضبط قيمة الماء إلى ما دون الصفر ستفشل.

”القوّة“ للقراءة فقط

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

هذه هي حالة آلة القهوة هنا، إذ قوّة الآلة لا تتغيّر أبدًا.

لذلك سنصنع جالبًا فقط دون ضابِط:

class CoffeeMachine {
  // ...

  constructor(power) {
    this._power = power;
  }

  get power() {
    return this._power;
  }

}

// نصنع آلة القهوة
let coffeeMachine = new CoffeeMachine(100);

alert(`Power is: ${coffeeMachine.power}W`); // القوّة هي: 100 واط

coffeeMachine.power = 25; // خطأ (لا ضابِط‫)

ملاحظة:استخدامنا هنا صياغة الجوالِب/الضوابِط (Getter/setter) الإفتراضية ولكن دوالّ get.../set...‎ مفضلة في معظم الأحيان. هكذا:

class CoffeeMachine {
  _waterAmount = 0;

  setWaterAmount(value) {
    if (value < 0) throw new Error("Negative water");
    this._waterAmount = value;
  }

 getWaterAmount() {
    return this._waterAmount;
  }
}

new CoffeeMachine().setWaterAmount(100);

تبدو هذه الصياغة أطول قليلًا ولكن الدوالّ هنا أكثر مرونة. إذ يمكننا تمرير عدة وسطاء لهم (حتى ولو لم نحتاج لهذا الأمر في هذا المثال).

من ناحية أخرى إن صياغة الإفتراضية أقصر لذا لا توجد قاعدة صارمة للأمر، ولك مطلق الحرية في الاختيار.

ملاحظة: الخاصيات المحميّة موروثة. إذا ورثنا class MegaMachine extends CoffeeMachine، فلا شيء سيمنعنا من الوصول إلى this._waterAmount أو this._power من توابع الصنف الجديد.

لذا فالوضع الطبيعي للخاصيات المحمية أن تكون قابلة للتوريث. على عكس الخاصيات الخاصة والّتي سنراها أدناه.

”#حدّ الماء“ خاصّة

انتبه: إضافة حديثة
انتبه رجاءً إلى أن هذه الميزة أضيفت حديثًا إلى اللغة، لذا هي ليست مدعومة على محركات جافاسكربت بعد ولا حتى جزئيًا وتحتاج إلى ترقيع يسد نقص الدعم هذا (polyfilling).

هناك مُقترح للغة جافاسكربت (كاد أن يصل إلى المعيار) يُقدّم لنا دعمًا على مستوى اللغة للخاصيات والتوابِع الخاصة.

تبدأ الخاصيات والتوابِع بعلامة #، ولا يمكن الوصول إليها إلّا من داخل الصنف.

فمثلًا إليك خاصية ‎#waterLimit الخاصّة وتابِع فحص مستوى الماء ‎#checkWater الخاصّ:

class CoffeeMachine {
  #waterLimit = 200; // هنا

  // هذا
  #checkWater(value) {
    if (value < 0) throw new Error("Negative water"); // قيمة الماء بالسالب
    if (value > this.#waterLimit) throw new Error("Too much water"); // قيمة الماء فوق اللزوم
  }

}

let coffeeMachine = new CoffeeMachine();

// محال الوصول إلى الخاصيات والتوابِع الخاصّة من خارج الصنف
coffeeMachine.#checkWater(); // Error
coffeeMachine.#waterLimit = 1000; // Error

علامة # على مستوى اللغة هي علامة خاصّة تقول بأنّ هذا الحقل حقلٌ خاصّ، وتمنع أيّ شيء من الوصول إليه من الخارج أو من الأصناف الموروثة.

كما وأنّ الحقول الخاصّة لا تتضارب مع تلك العامّة: يمكن أن نضع حقلين خاصًا ‎#waterAmount وعامًا waterAmount في آنٍ واحد.

فمثلًا ليكن waterAmount خاصية وصول للخاصية ‎#waterAmount:

class CoffeeMachine {

  #waterAmount = 0;

  get waterAmount() {
    return this.#waterAmount;
  }

  set waterAmount(value) {
    if (value < 0) throw new Error("Negative water"); // قيمة الماء بالسالب
    this.#waterAmount = value;
  }
}

let machine = new CoffeeMachine();

machine.waterAmount = 100;
alert(machine.#waterAmount); // خطأ

وعلى عكس الحقول المحميّة، فتلك الخاصّة تفرضها اللغة نفسها، وهذا أمر طيّب.

ولكن لو ورثنا شيئًا من CoffeeMachine فلن يمكننا الوصول إلى ‎#waterAmount مباشرةً، بل الاعتماد على جالِب وضابِط waterAmount:

class MegaCoffeeMachine extends CoffeeMachine {
  method() {
    alert( this.#waterAmount ); // ‫خطأ: يمكنك أن تصل إليه من داخل CoffeeMachine فقط
  }
}

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

تحذير: لا يمكنك الوصول إلى الحقول الخاصّة هكذا: this[name]‎ إذ عادةً ما يمكننا الوصول إلى الحقول العادية هكذا : this[name]‎

class User {
  ...
  sayHi() {
    let fieldName = "name";
    alert(`Hello, ${this[fieldName]}`);
  }
}

ولكن مع الحقول الخاصة من المحال الوصول إليها this['#name']‎ فإنها لن تعمل. وذلك بسبب القيد الموجود على صياغة استدعاء الحقول الخاصة لضمان خصوصية الحقل.

خلاصة

لو استعرنا تسميات البرمجة كائنية التوجّه، فعملية فصل الواجهة الداخلية عن الخارجية تُسمّى تغليف (Encapsulation)، وهي تقدّم لنا فوائد منها:

• حماية المستخدمين كي لا يضروا أنفسهم: تخيّل فريق مطوّرين يستعمل آلةً للقهوة صنعتها شركة ”Best CoffeeMachine“، وهي تعمل كما يجب لكنّها دون غطاء حماية، أيّ أنّ الواجهة الداخلية مكشوفة للعيان.

  المطوّرون متحضّرون فيستعملون الآلة كما يفترض استعمالها، ولكنّ أحدهم (واسمه John) قال بأنّه الأذكى بين الجميع وعدّل على ميكانيكا الآلة الداخلية قليلًا. بعد يومين، لم تعد تعمل.

  هذه ليست غلطة John طبعًا، بل الشخص الّذي أزال غطاء الحماية وسمح لأشخاص (مثل John) أن يقوموا بهذه التعديلات.

  الأمر ذاته في البرمجة. فلو غيّر أحد مستخدمي الصنف أشياء لا يُفترض تغييرها من خارج الكائن، يكون التكهّن بعواقب ذلك مستحيلًا.

• تحظى بالدعم: تختلف البرمجة عن آلة القهوة الحقيقية إذ الأولى معقّدة أكثر لأنّنا لا نشتريها مرّة واحدة فقط، بل تمرّ الشيفرة في مراحل تطوير وتحسين عديدة لا تنتهي أحيانًا.

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

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

  وليس المبرمج استثناءً

  دومًا ما يكون أفضل لو كانت تفاصيل التنفيذ مخفية، وكانت هناك واجهة خارجية بسيطة موثّقة كما يجب. لنُخفي الواجهات الداخلية، نستعمل إمّا الخاصيات المحميّة أو الخاصّة:

• تبدأ الحقول المحميّة بعلامة الشرطة السفلية _. هذا اتّفاق بين معشر المبرمجين وليس فرضًا من اللغة نفسها. على المبرمجين الوصول إلى الحقول الّتي تبدأ بهذه العلامة داخلَ الصنف والأصناف الموروثة فقط لا غير.
• تبدأ الحقول الخاصّة بعلامة #. تضمن لنا لغة جافاسكربت بأن لا يقدر أحد على الوصول إليها إلّا من داخل الصنف.

حاليًا فالحقول الخاصّة ليست مدعومة تمامًا في المتصفّحات، ولكن يمكننا تعويض نقص الدعم هذا.

ترجمة -وبتصرف- للفصل Private and protected properties and methods من كتاب The JavaScript language

يمكننا أيضًا إسناد التوابِع إلى دالة الصنف ذاتها وليس إلى كائن "prototype" لها. نسمّي هذه التوابِع بالتوابِع ”الثابتة“ (static).

في الأصناف نضع بعدها كلمة static هكذا:

class User {
  static staticMethod() { // لاحظ
    alert(this === User);
  }
}

User.staticMethod(); // true

في الواقع، لا يفرق هذا عن إسنادها على أنّها خاصية بشيء:

class User() { }

User.staticMethod = function() {
  alert(this === User);
};

User.staticMethod(); // true

وتكون قيمة this في الاستدعاء User.staticMethod()‎ هي باني الصنف User ذاته (تذكّر قاعدة ”الكائن قبل النقطة“),

عادةً ما نستعمل التوابِع الثابتة لكتابة دوال تعود إلى الصنف نفسه وليس إلى أيّ كائن من ذلك الصنف.

مثال للتوضيح: لدينا كائنات مقالات Article ونريد دالة لموازنتها. الحل الطبيعي هو إضافة تابِع Article.compare هكذا:

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }

  // هنا
  static compare(articleA, articleB) {
    return articleA.date - articleB.date;
  }
}

// الاستعمال
let articles = [
  new Article("HTML", new Date(2019, 1, 1)),
  new Article("CSS", new Date(2019, 0, 1)),
  new Article("JavaScript", new Date(2019, 11, 1))
];

articles.sort(Article.compare); // لاحظ

alert( articles[0].title ); // CSS

نرى هنا التابِع Article.compare ”فوق“ المقالات فيتيح لنا طريقة لموازنتها. ليس التابِع تابِعًا للمقالة ذاتها، بل لصنف المقالات نفسه.

توابِع ”المصانع“ (factory) تنفعها أيضًا التوابِع الثابتة هذه. لنقل بأنّا نريد إنشاء المقالات بطرائق عدّة:

1. بتمرير المُعاملات (العنوان title والتاريخ date وغيرها).
2. إنشاء مقالة فارغة تحمل تاريخ اليوم.
3. أو… كما تريد أنت.

يمكننا تنفيذ الطريقة الأولى باستعمال بانٍ، وللثانية صناعة تابِع ثابت للصنف.

مثل التابِع Article.createTodays()‎ هنا:

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }

  static createTodays() {
    // لا تنسَ: this = Article
    return new this("Today's digest", new Date()); // موجز أحداث اليوم
  }
}

let article = Article.createTodays();

alert( article.title ); // موجز أحداث اليوم

الآن متى أردنا صناعة موجز عن أحداث اليوم، استدعينا Article.createTodays()‎. أُعيد، ليس هذا تابِعًا للمقالة نفسها بل تابِعًا للصنف كله.

كما نستعمل التوابِع الثابتة في أصناف قواعد البيانات للبحث عن المُدخلات وحفظها وإزالتها، هكذا:

// بفرض أنّ ‫ Article هو صنف مخصّص لإدارة المقالات
// نستعمل تابِعًا ثابتًا لإزالة المقالة:
Article.remove({id: 12345});

الخاصيات الثابتة

إضافة حديثة

انتبه رجاءً إلى أنه هذه الميزة مضافة حديثًا إلى اللغة، لذا لن تعمل الأمثلة إلى في الإصدارات الحديث من المتصفح كروم.

كما يمكننا أيضًا استعمال الخاصيات الثابتة. ظاهرها فهي خاصيات للأصناف، ولكن نضع قبلها عبارة static:

class Article {
  static publisher = "Ilya Kantor";
}

alert( Article.publisher ); // Ilya Kantor

لا يفرق هذا عن الإسناد المباشر إلى صنف Article:

Article.publisher = "Ilya Kantor";

وراثة الخاصيات والتوابِع الثابتة

هذه الأنواع من الخاصيات والتوابِع

فمثلًا التابِع Animal.compare والخاصية Animal.planet في الشيفرة أسفله موروثين بالأسماء Rabbit.compare و Rabbit.planet:

class Animal {
  static planet = "Earth"; // الأرض

  constructor(name, speed) {
    this.speed = speed;
    this.name = name;
  }

  run(speed = 0) {
    this.speed += speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  static compare(animalA, animalB) {
    return animalA.speed - animalB.speed;
  }

}

// نرث من الصنف Animal
class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}

let rabbits = [
  new Rabbit("White Rabbit", 10),
  new Rabbit("Black Rabbit", 5)
];

rabbits.sort(Rabbit.compare); // لاحظ

rabbits[0].run(); // Black Rabbit runs with speed 5.

alert(Rabbit.planet); // الأرض

الآن متى استدعينا Rabbit.compare، استدعى المحرّك التابِع Animal.compare الموروث.

ولكن كيف يعمل هذا الشيء؟ كالعادة، بكائنات prototype: تُقدّم extends للصنف Rabbit إشارة [[Prototype]] إلى الصنف Animal.

لذا فعبارة Rabbit extends Animal تصنع إشارتي [[Prototype]]:

1. دالة Rabbit موروثة عبر prototype من دالة Animal.
2. كائن Rabbit.prototype موروث عبر prototype من كائن Animal.prototype.

بهذا تعمل الوراثة للتوابِع العادية والثابتة معًا.

تشكّ؟ انظر للشيفرة:

class Animal {}
class Rabbit extends Animal {}

// لكلّ ما هو ثابت
alert(Rabbit.__proto__ === Animal); // true

// للتوابِع العادية
alert(Rabbit.prototype.__proto__ === Animal.prototype); // true

خلاصة

نستعمل التوابِع الثابتة لأيّة وظائف تخصّ الصنف ”كلّه على بعضه“، ولا يخصّ سيرورة معيّنة من الصنف.

مثل تابع الموازنة Article.compare(article1, article2)‎ أو تابع المصنع Article.createTodays()‎.

ويصنفون كثوابت (static) في تعريف الصنف.

نستعمل الخاصيات الثابتة متى أردنا تخزين البيانات على مستوى الصنف لا على مستوى السيرورات.

صياغتها هي:

class MyClass {
  static property = ...;

  static method() {
    ...
  }
}

تقنيًا فالتصريح الثابت (static declaration) لا يفرق عن الإسناد إلى الصنف مباشرةً:

MyClass.property = ...
MyClass.method = ...

الخاصيات والدوال الثابتة الموروثة.

من أجل العبارة class B extends A إن prototype للصنف B يشير إلى A:B.[[Prototype]] = A. لذا إن تعذر العثور على خاصية ما في الصنف B فسيستمر البحث في الصنف A.

ترجمة -وبتصرف- للفصل Static properties and methods من كتاب The JavaScript language

تُعدّ وراثة الأصناف واحدةً من الطرائق لتوسعة أحد الأصناف لديك، أي أن نقدّم وظائف جديدة لأحد الأصناف علاوةً على ما لديه.

عبارة التوسعة extends

لنقل بأنّ لدينا صنف الحيوان Animal:

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed += speed;
    alert(`${this.name} runs with speed ${this.speed}.`); // يركض حيوان كذا بالسرعة كذا
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`); // يقف حيوان كذا في مكانه
  }
}

let animal = new Animal("My animal");

هكذا نصف كائن الحيوان animal وصنف الحيوان Animal في صورة:

ولنقل بأنّنا نريد إضافة صنف آخر… ليكن أرنبًا class Rabbit.

وطبعًا، فالأرانب حيوانات أيضًا، وعلى صنف الأرانب Rabbit أن يكون أساسه الحيوان Animal ليصل إلى توابِع الحيوانات فتقوم الأرانب بما تقوم به الحيوانات ”العادية“ (generic).

صياغة توسعة الصنف إلى صنف آخر هي: class Child extends Parent (صنف الابن توسعة من صنف الأبّ).

لنصنع صنف الأرنب class Rabbit ليرث الحيوان Animal:

class Rabbit extends Animal { // لاحظ
  hide() {
    alert(`${this.name} hides!`); // اختفى هكذا!
  }
}

let rabbit = new Rabbit("White Rabbit"); // الأرنب الأبيض

rabbit.run(5); // White Rabbit runs with speed 5. // يركض حيوان الأرنب بسرعة 5
rabbit.hide(); // White Rabbit hides! // اختفى الأرنب الأبيض!

يمكن لكائن Rabbit الوصول إلى توابِع Rabbit (مثل rabbit.hide()) كما توابِع Animal (مثل rabbit.run()).

داخليًا فعبارة extends تعمل كما تعمل ميكانيكية كائنات prototype المعهودة، فضتبط Rabbit.prototype.[[Prototype]]‎ ليكون Animal.prototype. بهذا لو لم يوجد التابِع في كائن Rabbit.prototype، يأخذه المحرّك من Animal.prototype.

فمثلًا لنجد التابِع rabbit.run يبحث المحرّك (من أسفل إلى أعلى، كما الصورة):

1. كائن الأرنب rabbit (ليس فيه run).
2. كائن prototype له، أي Rabbit.prototype (فيه hide وليس فيه run).
3. كائن prototype له، أي (بسبب extends) ‏Animal.prototype، بهذا يجد تابِع run أخيرًا.

كما نذكر من فصل ”“، فمحرّك جافاسكربت نفسه يستعمل التوارث عبر prototype لكائناته المضمّنة في اللغة. فمثلًا كائن Date.prototype.[[Prototype]]‎ هو الكائن Object.prototype. لهذا يمكن للتواريخ الوصول إلى توابِع الكائنات العادية.

ملاحظة: تسمح صياغة الصنف ليس بتحديد الصنف فقط وإنما إضافة أي تعبير بعد عبارة extends. فمثلًا استدعاء التابع التاي سيبني صنف الأب.

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

سيرثُ الصنف class User من النتيجة للصنف f("Hello")‎.

وهذه الميزة مفيدة لكتابة الأنماط البرمجية المتقدمة عندما نستخدم تابع لينشئ صنف صنف اعتمادًا على عدة شروط والتي يمكن أن ترثها.

إعادة تعريف دالة

الآن نتحرّك ونعيد تعريف أحد التوابِع. مبدئيًا فكلّ التوابِع غير المحدّدة في صنف الأرانب تُؤخذ مباشرةً ”كما هي“ من صنف الحيوانات.

ولكن لو حدّدنا تابِعًا معيّنًا في في Rabbit (وليكن stop()‎) فسيُستعمل بدله:

class Rabbit extends Animal {
  stop() {
    // الآن سنسخدمها من أجل ‫rabbit.stop‪()
// بدلًا من استخدام ‫stop()‎ من الصنف مباشرة
‫
  }
}

عادةً لا نرغب باستبدال كامل ما في التابِع الأب، بل البناء فوقه أو تعديله أو توسعة وظائفه، أي ننفّذ شيئًا في التابِع ثمّ نستدعي التابِع الأبّ قبل أو بعد ذلك.

ولحسن الحظ فالأصناف تقدّم لنا عبارة "super".

• نستعمل super.method(...)‎ لنستدعي تابِعًا أبًا.
• ونستدعي super(...)‎ لنستدعي الباني الأب (هذا فقط لو كنّا في باني هذه الدالة).

فمثلًا، ليختبئ هذا الأرنب النبه ما إن يتوقّف:

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed += speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  // هنا
  stop() {
    super.stop(); // نستدعي ‫stop في الأب
    this.hide(); // ثمّ نستدعي ‫hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // سيركض ‫ "White Rabbit" بسرعة 5
rabbit.stop(); // توقف الأرنب .وهو الآن مختبئ

الآن صار داخل الأرنب التابِع Rabbit الذي يستدعي التابِع stop من أباه

كما شرحنا في درس "الدوال السهمية" لا يمكننا استخدام الكلمة المفتاحية super على الدوالّ السهمية.

ولو استطعنا الوصول إليها من خلال الكلمة المفتاحية super فستكون مأخوذة من الدالّة الخارجية. هكذا:

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // استدعاء الأب سيتوقف بعد ثانية واحدة
  }
}

إن عمل الدلّة stop()‎ مشابه تمامًا لعمل الكلمة المفتاحية super مع الدوال السهمية. لذا فإنها تعمل مثلما نريد. ولو حُددت كدالّة عادية فسيظهر لدينا خطأ:

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

إعادة تعريف الباني

متى تعاملنا مع البانيات، صار الأمر

لم يكن لصنف الأرنب Rabbit (حتّى اللحظة) أيّ بانٍ له.

حسبما تقول المواصفة فلو وسّع أحد الأصناف صنفًا آخر ليس له بانيًا، فسيُولّد المحرّك هذا الباني ”الفارغ“:

class Rabbit extends Animal {
  // يُولّد للأصناف التي تُوسِّع أخرى وليس فيها بانيات
  constructor(...args) {
    super(...args);
  }
}

كما نرى فهي تستدعي الباني constructor الأبّ بتمرير كلّ الوُسطاء إليه، فقط. لا يحدث هذا إلّا لو لم نكتب بانيًا في الصنف الابن.

لنُضف الآن بانيًا من عندنا إلى الأرنب Rabbit. سيضبط هذا الباني الخاصية earLength علاوةً على name:

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  // ...
}

class Rabbit extends Animal {

  // هنا  constructor(name, earLength) {
    this.speed = 0;
    this.name = name;
    this.earLength = earLength;
  }

  // ...
}

// لا تعمل!
let rabbit = new Rabbit("White Rabbit", 10); // Error: this is not defined.

ماذا؟! هناك خطأ! انتهى الأمر، ”صناعة الأرانب“ لم تعد ممكنة بعد الآن. تراه ما المشكلة؟

باختصار: على البانيات في الأصناف الموروثة استدعاء super(...)‎ هذا أولًا، وثانيًا استدعاءه قبل استعمال this.

ولكن لحظة… لماذا؟ ما الذي يجري؟ هذا المطلب غريب حقًا.

بالطبع لا شيء بدون توضيح وشرح، لذا فلنتعمّق داخل التفاصيل ونفهم ما يجري ”حبّة حبّة“.

تضع لغة جافاسكربت خطًا فاصلًا بين الدالة البانية للصنف الموروث (أي ”الباني المشتقّ“) وغيرها من دوال. لهذا الباني خاصية داخلية فريدة اسمها ‎[[ConstructorKind]]:"derived"‎، وهي علامة يضعها المحرّك عليه داخليًا خلف الكواليس. تؤثّر هذه ”العلامة“ على سلوك الباني حين نستعمله مع new.

• حين نُنفّذ الدوال العادية باستعمال new، تُنشِئ لنا كائنًا فارغًا وتضبطه ليكون this.
• ولكن حين يعمل الباني المشتق، فلا يفعل ذلك، بل يتوقّع من الباني الأبّ القيام بهذه المهمة الصعبة.

لذا على الباني المشتق استدعاء super ليُنفّذ باني أباه (غير المشتق) وإلّا فلن يُنشأ أيّ كائن يكون this، بهذا تكون الشيفرة خطأ.

على باني الصنف Rabbit استدعاء super()‎ قبل this ليعمل، هكذا تمامًا:

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  // ...
}

class Rabbit extends Animal {

  constructor(name, earLength) {
    super(name); // هنا
    this.earLength = earLength;
  }

  // ...
}

// الآن كلّ شيء كما يجب أن يكون
let rabbit = new Rabbit("White Rabbit", 10);
alert(rabbit.name); // White Rabbit
alert(rabbit.earLength); // 10

عبارة super: أمور داخلية و[[HomeObject]]

تحذير: سترى معلومات متقدّمة لو كنت تقرأ هذا الدرس أوّل مرّة فيمكنك تخطّي هذا الجزء، إذ يتكلّم عن الميكانيكا الداخلية التي يستعملاها التوارث وعبارة super.

هيًا ننزل إلى الأعماق ونرى ما خلف كواليس super. في هذه الرحلة سنرى أمور جميلة أيضًا ”إكسترا سوبر“.

لنوضّحها من البداية: لو أخذت كلّ ما تعلّمناه حتّى الحظة، فما من طريقة لتعمل فيها عبارة super في أيّ حال من الأحوال!

تمامًا، كما فكّرت الآن، لنطرح السؤال: كيف تعمل هذه العبارة تقنيًا أساسًا؟ متى ما عمل أحد توابِع الكائنات، جلب الكائن الحالي على أنّه this. فلو استدعينا super.method()‎ فكلّ ما على المحرّك فعله هو جلب التابِع method من كائن prototype للكائن الحالي، صحيح؟ أجل ولكن كيف ذلك؟

ربّما ترى المهمة سهلة ولكنّها ليست كذلك البتة. يمكن القول أنّ المحرّك يعلم بالكائن الحالي this، فيمكنه أن يأخذ تابِع method في الأب باستعمال this.__proto__.method. ولكن للأسف فهذا الحلّ ”البسيط“ لن يعمل أبدًا.

لنوضّح المشكلة أولًا، باستعاضة الأصناف لتكون كائنات عادية لتسهيل الفهم.

(لو لم تريد معرفة التفاصيل فتخطّى هذا القسم وانتقل إلى الجزء [[HomeObject]]، لا مشكلة. أو واصِل معنا في هذه الرحلة الموحشة في أعماق غابة لغة جافاسكربت.)

في المثال أسفله، نرى rabbit.__proto__ = animal. لنجرّب الآن هذا الأمر: داخل rabbit.eat()‎ نستدعي animal.eat()‎ باستعمال this.__proto__‎:

let animal = {
  name: "Animal",
  eat() {
    alert(`${this.name} eats.`);
  }
};

let rabbit = {
  __proto__: animal,
  name: "Rabbit",
  eat() {
    // هذه إحدى طرق عمل super.eat()
    this.__proto__.eat.call(this); // (*)
  }
};

rabbit.eat(); // Rabbit eats.

أخذنا في السطر (*) التابِعَ eat من كائن prototype ‏(animal) واستدعيناه على أنّ السياق هو الكائن الحالي. لاحظ أهمية ‎.call(this)‎ إذ لو كتبنا this.__proto__.eat()‎ فقط فسيُنفّذ التابِع eat الأب داخل سياق كائنَ prototype، وليس في الكائن الحالي.

وفي الجزء الأول من الشيفرة نرى كلّ شيء يعمل: عمل التابِع alert كما ينبغي عليه.

حان وقت إضافة كائن آخر إلى السلسلة، وكسر هذه السلسلة إربًا:

let animal = {
  name: "Animal",
  eat() {
    alert(`${this.name} eats.`);
  }
};

let rabbit = {
  __proto__: animal,
  eat() {
    // ...هنا يأكل الأرنب كما تأكل الأرانب، بعدها نستدعي التابِع الأبّ (animal)
    this.__proto__.eat.call(this); // (*)
  }
};

let longEar = {
  __proto__: rabbit,
  eat() {
    // ...الأرنب ذو الأذن الطويلة يلهو ويلعب، ثمّ نستدعي التابِع الأبّ (rabbit)
    this.__proto__.eat.call(this); // (**)
  }
};

// هنا!longEar.eat(); // Error: Maximum call stack size exceeded

لم تعد الشيفرة تعمل الآن! نرى خطأً عند استدعاء longEar.eat()‎.

قد لا يبدو الأمر جليًا من أوّل نظرة، ولكن لو تعقّبنا استدعاء longEar.eat()‎ فسنرى الأمر بوضوح، ففي السطرين () و (*) تكون قيمة this هي الكائن الحالي (longEar). هذا ضمن الأساسيات، فعلى توابِع الكائنات جلب الكائن الحالي فهو this، وليس كائنَ prototype أو ما شابهه.

بذلك في السطرين معًا (*) و (**) تكون قيمة this.__proto__‎ واحدة: الكائن rabbit، وكلاهما يستدعيان التابِع rabbit.eat دون أن يرتقيا بالسلسلة، فيدوران في حلقة لا نهاية لها.

إليك عمّا يحدث في صورة:

نرى في التابِع longEar.eat()‎ عند السطر (**) استدعاء rabbit.eat بتمرير this=longEar.

    // نرى داخل ‫ longEar.eat()‎ قيمة this = longEar
    this.__proto__.eat.call(this) // (**)
    // يصير
    longEar.__proto__.eat.call(this)
    // وهو فعليًا
    rabbit.eat.call(this);

2. وبعدها في السطر (*) داخل rabbit.eat، نحاول تمرير الاستدعاء إلى مستوًى أعلى داخل السلسلة، ولكن قيمة this=longEar، بهذا تصير قيمة this.__proto__.eat هي rabbit.eat ثانيةً.

    // نرى داخل ‫ rabbit.eat()‎ قيمة this = longEar
    this.__proto__.eat.call(this) // (*)
    // becomes
    longEar.__proto__.eat.call(this)
    // or (again)
    rabbit.eat.call(this);

3. بهذا… يستدعي rabbit.eat نفسه في حلقة لانهاية لها لأنّها يعجز عن الارتقاء في السلسلة.

ما من طريقة لحلّ هذه المشكلة باستعمال this فقط.

[[HomeObject]]

أضافت لغة جافاسكربت -لحلّ هذه المعضلة- خاصية داخلية (أخرى) للدوال، وهي ”الكائن المنزل“ [[HomeObject]].

متى ما حُدّدت الدالة لتكون صنفًا أو تابِعًا لكائن، أصبحت خاصية [[HomeObject]] للدالة ذلك الصنف أو الكائن.

تستعمل super هذا الكائن لحلّ كائن prototype الأبّ هو وتوابِعه.

لنرى كيف يعمل هذا الشيء، بالكائنات العادية أولًا:

let animal = {
  name: "Animal",
  eat() {         // animal.eat.[[HomeObject]] == animal
    alert(`${this.name} eats.`);
  }
};

let rabbit = {
  __proto__: animal,
  name: "Rabbit",
  eat() {         // rabbit.eat.[[HomeObject]] == rabbit
    super.eat();
  }
};

let longEar = {
  __proto__: rabbit,
  name: "Long Ear",
  eat() {         // longEar.eat.[[HomeObject]] == longEar
    super.eat();
  }
};

// يعمل التابِع كما نريد
longEar.eat();  // Long Ear eats.

عملت الشيفرة كما المفترض ذلك بسبب آلية عمل [[HomeObject]]. تعرف التوابِع (مثل longEar.eat) خاصيةَ [[HomeObject]] لها وتأخذ التابِع الأبّ من كائن prototype لذاك الكائن، ودون استعمال this أبدًا.

التوابِع ليست ”حرّة“

كما نعلم فالتوابع -بنحوٍ عام- ”حرّة“ وليست مروبطة بأيّ كائن. فيمكننا نسخها بين الكائنات واستعمالها بتمرير قيمة this أخرى.

ولكن وجود [[HomeObject]] يخلّ بهذا المبدأ إذ تتذكّر التوابِع كائناتها الأصلية هكذا. يبقى هذا الارتباط وثيقًا للأبد إذ لا يمكننا تغيير [[HomeObject]].

ولكن المكان الوحيد الذي نستعمل فيه خاصية [[HomeObject]] (في لغة جافاسكربت) هو super. يعني أنّه لو لم يستعمل التابِع super فيمكننا عدّه حرًا ونمضي بنسخه وتوزيعه على الكائنات. ولكن متى استعملت super، ساءت الأمور.

إليك مثالًا كاملًا عن نتيجة خطأ بعد النسخ بسبب super:

let animal = {
  sayHi() {
    console.log(`I'm an animal`); // أنا حيوان
  }
};

// يرث صنف الأرنب صنفَ الحيوان
let rabbit = {
  __proto__: animal,
  sayHi() {
    super.sayHi();
  }
};

let plant = {
  sayHi() {
    console.log("I'm a plant"); // أنا نبات
  }
};

// يرث صنف الشجرة صنفَ النبات
let tree = {
  __proto__: plant,
  sayHi: rabbit.sayHi // (*)
};

tree.sayHi();  // أنا حيوان (؟!؟)

باستدعاء tree.sayHi()‎ نرى الشجرة تقول ”أنا حيوان“. لا، لا! سبب ذلك بسيط جدًا:

• في السطر (*) نسخنا التابِع tree.sayHi من rabbit. من يدري، ربّما لنقلّل من تكرار الشيفرات؟
• وخاصية [[HomeObject]] لها هي الصنف rabbit، إذ صنعنا التابِع داخل rabbit، وما من طريقة لتغيير [[HomeObject]].
• نرى في شيفرة التابِع tree.sayHi()‎ الاستدعاءَ super.sayHi()‎، وهو ينتقل إلى أعلى عند rabbit ويأخذ التابِع من animal.

إليك صورة توضّح ما يحدث:

توابِع لا صفات داليّة

تُعرّف اللغة عن خاصيات [[HomeObject]] للتوابِع في الأصناف وفي الكائنات العادية. ولكن في حالة الكائنات فيجب تعريف التوابِع هكذا تمامًا method()‎ وليس هكذا "method: function()‎".

قد لا نرى فرقًا جوهريًا في الطريقتين، لكنّ محرّكات جافاسكربت تراه كذلك.

استعملنا في المثال أسفله صياغة ليست بتابِع للموازنة. بهذا لم تُضبط خاصية [[HomeObject]] ولن تعمل الوراثة:

let animal = {
  eat: function() { // ‫نكتبها هكذا بدل eat()‎ عمدًا {...
    // ...
  }
};

let rabbit = {
  __proto__: animal,
  eat: function() {
    super.eat();
  }
};

rabbit.eat();  // Error calling super ‫(إذ [[HomeObject]] غير موجودة)

خلاصة‎

1. نستعمل class Child extends Parent لتوسعة الأصناف.
   • أي أنّ خاصية Child.prototype.__proto__‎ ستكون Parent.prototype، فتصير التوابِع موروثة.
2. عندما نعيد تعريف الباني:
   • علينا استدعاء الباني الأبّ باستعمال super()‎ في الباني ”الابن“ ذلك قبل استعمال this.
3. عندما نعيد تعريف أي تابع آخر:
   • يمكننا استعمال super.method()‎ في التابِع ”الابن“ لاستدعاء التابِع ”الأبّ“.
4. أمور داخلية:
   • تتذكّر التوابِع صنفها/كائنها وتحفظه في خاصية [[HomeObject]] الداخلية، هكذا يحلّ super التوابِع الأب.
   • بذلك يكون ليس من الآمن نسخ تابِع لديه super من كائن ووضعه في آخر.

كما وأنّ:

• ليس للدوال السهمية لا this ولا super

تمارين

خطأ في إنشاء سيرورة

الأهمية: 5

إليك الشيفرة التي نُوسّع فيها صنف Rabbit من صنف Animal.

للأسف فلا يمكننا صناعة كائنات الأرانب. ما المشكلة؟ أصلِحها في طريقك.

class Animal {

  constructor(name) {
    this.name = name;
  }

}

class Rabbit extends Animal {
  constructor(name) {  
    this.name = name;
    this.created = Date.now();
  }
}

// هنا
let rabbit = new Rabbit("White Rabbit"); // Error: this is not defined
alert(rabbit.name);

الحل

هذا لأنّ على الباني الابن استدعاء super()‎.

إليك الشيفرة الصحيحة:

class Animal {

  constructor(name) {
    this.name = name;
  }

}

class Rabbit extends Animal {
  constructor(name) {  
    super(name); // هنا
    this.created = Date.now();
  }
}

let rabbit = new Rabbit("White Rabbit"); // الآن تمام
alert(rabbit.name); // White Rabbit

توسعة ساعة

الأهمية: 5_

لدينا صنف ساعة Clock، وهو حاليًا يطبع الوقت في كلّ ثانية.

class Clock {
  constructor({ template }) {
    this.template = template;
  }

  render() {
    let date = new Date();

    let hours = date.getHours();
    if (hours < 10) hours = '0' + hours;

    let mins = date.getMinutes();
    if (mins < 10) mins = '0' + mins;

    let secs = date.getSeconds();
    if (secs < 10) secs = '0' + secs;

    let output = this.template
      .replace('h', hours)
      .replace('m', mins)
      .replace('s', secs);

    console.log(output);
  }

  stop() {
    clearInterval(this.timer);
  }

  start() {
    this.render();
    this.timer = setInterval(() => this.render(), 1000);
  }
}

أنشِئ الصنف الجديد ExtendedClock ليرث من Clock وأضِف المُعامل precision، وهو عدد الملّي ثانية ms بين كلّ ”تَكّة“. يجب أن يكون مبدئيًا 1000 (أي ثانية كاملة).

• ضع شيفرتك في الملف extended-clock.js.
• تعديل ملف clock.js الأصلي ممنوع. وسّع الصنف.

يمكن الاعتماد على هذه البيئة التجريبية لحل التمرين.

الحل

class ExtendedClock extends Clock {
  constructor(options) {
    super(options);
    let { precision = 1000 } = options;
    this.precision = precision;
  }

  start() {
    this.render();
    this.timer = setInterval(() => this.render(), this.precision);
  }
};

مشاهدة الحل في بيئة تجريبية.

الأصناف تُوسّع الكائنات؟

الأهمية: 5

كما نعلم فالكائنات كلها ترث Object.prototype وتقدر على الوصول إلى توابِع الكائنات ”العادية“ مثل hasOwnProperty وغيرها.

مثال سريع:

class Rabbit {
  constructor(name) {
    this.name = name;
  }
}

let rabbit = new Rabbit("Rab");

// ‫التابِع hasOwnProperty مأخوذ من Object.prototype
alert( rabbit.hasOwnProperty('name') ); // true

ولكن لو كتبنا ذلك جهارةً هكذا "class Rabbit extends Object" فالناتج يختلف عن "class Rabbit" فقط! غريب.

تُراه ما الفرق؟

إليك مثالًا عمّا أقصد (الشيفرة لا تعمل، لماذا؟ أصلِحها!):

class Rabbit extends Object {
  constructor(name) {
    this.name = name;
  }
}

let rabbit = new Rabbit("Rab");

alert( rabbit.hasOwnProperty('name') ); // true

الحل

أولًا نرى ما مشكلة الشيفرة تلك.

متى شغّلنا الشيفرة بان سبب المشكلة: على باني الأصناف الموروثة استدعاء super()‎ وإلّا تكون قيمة "this" ”غير معرّفة“.

لذا سنصلحها:

class Rabbit extends Object {
  constructor(name) {
    super(); // علينا استدعاء الباني الأب حين نرث الصنف
    this.name = name;
  }
}

let rabbit = new Rabbit("Rab");

alert( rabbit.hasOwnProperty('name') ); // true

ولكن… لم ننتهِ بعد.

حتّى مع هذا … فهناك فرق مهم جوهري بين "class Rabbit extends Object" وclass Rabbit.

كما نعلم فصياغة extends تضبط كائنا prototype:

1. بين توابِع الباني لـِ"prototype" (بالنسبة للتوابع العادية).
2. بين توابِع الباني نفسها (بالنسبة للتوابع الثابتة).

في حالتنا إن class Rabbit extends Object تعني:

class Rabbit extends Object {}

alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
alert( Rabbit.__proto__ === Object ); // (2) true

لذا يوفر Rabbit إمكانية الوصول إلى الدوال الثابتة للكائن Object. هكذا:

class Rabbit extends Object {}

*!*
// عادةً نستدعي ‫Object.getOwnPropertyNames
alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // a,b
*/!*

ولكن إذا لم يكن لدينا extends Object فلن تُسند Rabbit.__proto__‎ للصنف Object.

إليك المثال:

class Rabbit {}

alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
alert( Rabbit.__proto__ === Object ); // (2) false (!)
alert( Rabbit.__proto__ === Function.prototype ); // as any function by default

*!*
// error, no such function in Rabbit
alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error
*/!*

في هذه الحالة إن Rabbit لن يزودنا بطريقة للوصول إلى التوابع الثابتة في Object.

بالمناسبة يملك النموذج الأولي للتوابع Function.prototype دوال مُعمَّمة مثل :call و bind ..إلخ. وهي متاحة دائمًا في كِلا الحالتين، لأن باني Object المضمن في اللغة هو Object.__proto__ === Function.prototype.

لذلك وباختصار هناك اختلافان وهما:

ترجمة -وبتصرف- للفصل Class inheritance من كتاب The JavaScript language

اقتباس

في البرمجة كائنية التوجّه، يعدّ الصنف عبارة عن توسعة للشيفرة البرمجية للبرنامج وذلك لإنشاء كائنات كما أنه يهيئ القيم الأولية لمتغيرات الحالة (أو تدعى أحيانًا خاصيات وهي المتغيرات الّتي تكون عضوًا بالصنف) وتطبيق سلوك معين (باستخدام الدوالّ أو التوابِع الأعضاء) - ويكيبيديا

بعيدًا عن الكلام النظري، ففي الواقع نريد عادةً إنشاء أكثر من كائن تحمل نفس النوع، مثل المستخدمين والبضائع وغيرها.

كما علمنا في الفصل "الباني والعامل "new" في جافاسكربت"، يمكن للتعليمة new function القيام بهذه المهمة.

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

صياغة الأصناف class

إليك الصياغة الأساسية:

class MyClass {
  // توابِع الصنف
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

بعدها استعمل new MyClass()‎ لتُنشِئ كائنًا جديدًا فيه التوابِع تلك.

يُنادي الباني constructor()‎ العبارة new تلقائيًا ليهيئ الكائن في المكان المطلوب.

إليك مثالًا:

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }

}

// الاستعمال:
let user = new User("John");
user.sayHi();

متى استدعينا new User("John")‎:

1. نكون أنشأنا كائنًا جديدًا.
2. نكون شغّلنا (خلف الكواليس) الباني وممرًا له الوسطاء المناسبة، وإسناد هذه الوسطاء للمتغيرات المناسبة. هنا أُسندت الوسيط "John" إلى المتغير name عبر this.name.

…وبعد ذلك، ننادي توابِع الكائن مثل user.sayHi()‎.

لا يوجد فاصلة بين التوابع. من الشائع بين المطورين المبتدئين وضع فاصلة بين توابع الصنف والّذي سيرمي خطأ في الصياغة، وهذه نقطة مهمة لعدم الخلط بينها والكائنات المجردة. إذًا داخل الصنف الفاصلة غير مطلوبة.

ما الصنف أصلًا؟

هذا جميل، ولكن ما هو الصنف class أساسًا؟ لو ظننته كيانًا جديدًا كليًا في اللغة، فأنت مخطئ.

هيًا معًا نكشف الأسرار ونعرف ماهيّة الصنف حقًا، بذلك نفهم أمور كثيرة معقّدة، بسهولة.

الصنف -في جافاسكربت- مشابه للدالة نوعًا ما.

انظر بنفسك:

class User {
  constructor(name) { this.name = name; }
  sayHi() { alert(this.name); }
}

// الإثبات: الصنف‫ User هو دالّة
alert(typeof User); // function

إليك ما يفعله الباني class User {...}‎ حقًا:

1. يُنشِئ دالّة باسم User تصير هي ناتج التصريح عن الصنف، وتُؤخذ شيفرة الدالّة من الباني constructor (يُعامل الباني الصنف على أنّه فارغ إن لم تكن كتبت دالّة تغيّر ذلك).
2. يُخزّن توابِع الصنف (مثل sayHi) في النموذج الأولي للكائن User.prototype.

متى ما أُنشأ كائن جديد (new User)، واستدعينا تابِعًا منه يُؤخذ التابِع من كائن النموذج الأولي (prototype) كما وضّحنا في الفصل ”الوراثة النموذجية - 2 -“. هكذا يكون للكائن تصريح الوصول إلى توابِع الصنف.

يمكن أن نوضّح ناتج التصريح class User في هذه الصورة:

إليك الشيفرة …:

class User {
  constructor(name) { this.name = name; }
  sayHi() { alert(this.name); }
}

// الصنف ما هو إلّا دالةً
alert(typeof User); // function

// ...أو للدّقة هو تابِع الباني
alert(User === User.prototype.constructor); // true

// التوابِع موجودة في كائن النموذج الأولي ‫User.prototype، مثال:
alert(User.prototype.sayHi); // alert(this.name);

// في كائن النموذج الأولي ‫prototype تابِعين بالضبط
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

ليست مجرد تجميل لغوي

يقول البعض بأنّ الأصناف class هي مجرد "تجميل لغوي" (Syntactic sugar)، أي أنّها صياغة أساس تصميمها هو تسهيل القراءة دون تقديم ما هو جديد، إذ يمكننا ببساطة التصريح عن ذات الشيء بدون تلك الكلمة المفتاحية class:

// نُعيد كتابة صنف المستخدم ‫User باستعمال الدوال فقط

// ‫1. نُنشِئ دالّة الباني
function User(name) {
  this.name = name;
}
//عادةً إن أي نموذج أولي لتابِعٍ معين لديه باني
// لذلك لسنا بحاجة لإنشائه

// ‫2. نضيف التابع إلى النموذج الأولي
User.prototype.sayHi = function() {
  alert(this.name);
};

// طريقة الاستخدام:
let user = new User("John");
user.sayHi();

ناتج هذا التصريح أعلاه يشبه كثيرًا… لا بل يتطابق مع تصريح الصنف. لهذا ففكرة أنّ الأصناف هي حقًا تجميل لغوي لتعريف البواني مع توابِع كائن النموذج الأولي prototype لها - هي فكرة منطقية حقًا.

مع ذلك، فهناك فوارق.

1. أولًا، تُوضع على الدوال الّتي تُنشؤها عبارة class كخاصيّةً داخلية فريدة لهذا الصنف هكذا ‎[[FunctionKind]]:"classConstructor"‎. لذا فالطريقتين (هذه وإنشائها يدويًا) ليستا تمامًا الشيء نفسه.

   وعلى عكس الدوالّ العادية، يلزم عليك استدعاء باني الصنف باستعمال new:

   class User {
     constructor() {}
   }
   
   alert(typeof User); // function
   User(); // Error: Class constructor User cannot be invoked without 'new'

   كما وأنّ تمثيل أغلب محرّكات جافاسكربت النصّيّ لباني الصنف يبدأ بالعبارة ”class…‎“

   class User {
     constructor() {}
   }
   
   alert(User); // class User { ... }

    

2. توابِع الأصناف غير قابلة للإحصاء. يضبط التصريح عن الصنف راية enumerable على القيمة false لكلّ التوابِع في كائن النموذج الأولي للصنف "prototype".

   هذا جميل إذ لا نريد ظهور توابِع الصنف حين نستعرضهن باستعمال حلقة for..in.

3. تستعمل الأصناف الوضع الصارم دومًا. كلّ الشيفرة البرمجية في الباني تكون بالوضع الصارم (سبق وأن تحدثنا في مقال سابق عن الوضع الصارم في لغة جافاسكربت).

كما أنّ صياغة الأصناف تُفيدنا بكثير من المزايا نشرحها لاحقًا.

تعابير الأصناف

كما الدوال فيمكن التعريف عن الأصناف داخل التعابير الأخرى وتمريرها وإعادتها وإسنادها وغيره.

إليك مثال عن تعبير صنف:

let User = class {
  sayHi() {
    alert("Hello");
  }
};

وكما تعابير الدوال المسمّاة (NFE) وهي اختصارًا لِـ (Named Function Expressions)، يمكن أن نضع اسمًا لتعابير الأصناف.

ولو كان لتعبير الصنف اسمًا فسيكون ظاهرًا داخل الصنف فقط لا غير:

// ”تعبير أصناف مسمّى“ ‫(NCE)
// ‫(ليس في المواصفات القياسية للغة هذا الاسم، لكنّها شبيهة بتعابير الدوال المسمّاة(NFE) )
let User = class MyClass {
  sayHi() {
    alert(MyClass); // لا يظهر اسم الصنف ‫MyClass إلّا داخل الصنف
  }
};

new User().sayHi(); // يعمل ويعرض تعريف ‫MyClass

alert(MyClass); // خطأ اسم تعبير الصنف ‫MyClass غير مرئي خارج الصنف

يمكننا حتى جعل الأصناف جاهزة عند الطلب، هكذا:

function makeClass(phrase) {
  // declare a class and return it
  return class {
    sayHi() {
      alert(phrase);
    };
  };
}

// إنشاء صنف جديد
let User = makeClass("Hello");

new User().sayHi(); // Hello

الجوالِب والضوابِط والاختصارات الأخرى

كما الكائنات المجردة فيمكن أن يكون في الأصناف ضوابِط وجوالِب (Gettes/Setters) وأسماءً محسوبةً للخاصيات (computed properties name) وغيرها.

إليك مثالًا عن خاصية user.name كتبنا تنفيذها عبر ضابِط وجالِب:

class User {

  constructor(name) {
    // يشغّل الضابِط
    this.name = name;
  }

  // هنا
  get name() {
    return this._name;
  }

  // وهنا
  set name(value) {
    if (value.length < 4) {
      alert("Name is too short."); // الاسم قصير جدًا
      return;
    }
    this._name = value;
  }

}

let user = new User("John");
alert(user.name); // John

user = new User(""); // الاسم قصير جدًا

ينشئ التعريف عن الصنف جوالِب وضوابِط في كائن User.prototype هكذا:

Object.defineProperties(User.prototype, {
  name: {
    get() {
      return this._name
    },
    set(name) {
      // ...
    }
  }
});

وهذا مثال عن استخدام أسماءً محسوبةً للخاصيّة (computed property name) داخل أقواس [...]:

class User {

  // هنا
  ['say' + 'Hi']() {
    alert("Hello");
  }

}

new User().sayHi();

خاصيات الأصناف

تحذير: قد يكون عليك تعويض النقص في المتصفّحات القديمة الخاصيات على مستوى الأصناف هي إضافة حديثة على اللغة.

نرى في المثال أعلاه بأنّ للصنف User توابِع فقط. هيًا نُضف الخاصية name للصنف class User:

class User {
  name = "Anonymous"; // هكذا

  sayHi() {
    alert(`Hello, ${this.name}!`);
  }
}

new User().sayHi();

alert(User.prototype.sayHi); // ‫موجود في كائن User.prototype
alert(User.prototype.name); // ‫undefined، غير موجودة في كائن User.prototype

الأمر الجدير بالذكر أن خاصيات الصنف تعيّن على أنها كائنات فردية وليست ضمن النموذج الأولي للصنف User.prototype. من الناحية العملية تُعالجُ هذه الخاصيات بعد أن يُنهي الباني عمله.

إنشاء توابع مرتبطة بخاصيات الصنف

كما تحدثنا في فصلٍ سابق من هذه السلسلة ربط الدوالّ، إن دلالات الكلمة المفتاحية this في الدوالّ ديناميكية إذ تعتمد إعتمادً أساسيًا على سياق الاستدعاء.

لذا فإن مررها تابِعٌ من كائنٍ معين للكلمة المفتاحية this، واستدعيت مرة أخرى في مكان آخر بغير السياق السابق، فلن تشير إلى نفس الكائن السابق بسبب تغير سياق الاستدعاء.

على سبيل المثال الشيفرة البرمجية التالية ستظهر undefined.

class Button {
  constructor(value) {
    this.value = value;
  }

  click() {
    alert(this.value);
  }
}

let button = new Button("hello");

setTimeout(button.click, 1000); // undefined

تدعى هذه المشكلة "ضياع قيمة this". وهنالك طريقتين لإصلاح هذه المشكلة كما ذكرنا في فصل "ربط الدوال"ّ

1. تمرير دالّة مغلّفة (مثل: setTimeout(() => button.click(), 1000)‎).
2. ربط الدالّة بصنف كما في الباني التالي:

class Button {
  constructor(value) {
    this.value = value;
    this.click = this.click.bind(this);
  }

  click() {
    alert(this.value);
  }
}

let button = new Button("hello");

setTimeout(button.click, 1000); // hello

تزودنا خاصيات الصنف بصياغة مناسبة للحل الّذي سنستخدمه:

class Button {
  constructor(value) {
    this.value = value;
  }
  click = () => {
    alert(this.value);
  }
}

let button = new Button("hello");

setTimeout(button.click, 1000); // hello

‫
تنشئ الخاصية click=‎ ()‎ =>‎ {...}‎ دالّة مستقلة لكل كائن من Button، والكلمة المفتاحية this تشير إلى الكائن نفسه. وبإمكاننا بعدها تمرير button.click في أي مكان ومع احتفاظها بالقيمة الصحيحة للكلمة المفتاحية this.

إن استخدام هذه الطريقة مفيد جدًا في بيئة المتصفحات وخصيصًا عند احتياجنا لإعداد دالّة مستمع الحدث (event listener).

خلاصة

الصياغة الأساسية للأصناف هي كالآتي:

class MyClass {
  prop = value; // خاصية

  constructor(...) { // الباني
    // ...
  }

  method(...) {} // تابِع

  get something(...) {} // تابِع جلب
  set something(...) {} // تابِع ضبط

  [Symbol.iterator]() {} // تابِع اسمه محسوب (نضع رمزًا هنا)‫  
  // ...
}

تقنيًا، فالصنف MyClass ما هو إلّا دالّة (تلك الّتي نكتبها لتكون الباني constructor)، بينما التوابِع والضوابِط والجوالِب تُكتب في كائن MyClass.prototype.

سنتعرّف أكثر في الفصول اللاحقة عن الأصناف والوراثة والميزات الأخرى.

تمارين

أعِد كتابتها لتكون صنفًا

الأهمية: 5

كُتب صنف الساعة Clock وكأنّه دالّة. أعِد كتابته ليكون بصياغة الأصناف.

ملاحظة: تدقّ عقارب الساعة في الطرفية، افتحها واحترس من العقارب اللادغة. اطلع على تجربة حية للتمرين.

الحل

class Clock {
  constructor({ template }) {
    this.template = template;
  }

  render() {
    let date = new Date();

    let hours = date.getHours();
    if (hours < 10) hours = '0' + hours;

    let mins = date.getMinutes();
    if (mins < 10) mins = '0' + mins;

    let secs = date.getSeconds();
    if (secs < 10) secs = '0' + secs;

    let output = this.template
      .replace('h', hours)
      .replace('m', mins)
      .replace('s', secs);

    console.log(output);
  }

  stop() {
    clearInterval(this.timer);
  }

  start() {
    this.render();
    this.timer = setInterval(() => this.render(), 1000);
  }
}


let clock = new Clock({template: 'h:m:s'});
clock.start();