تعلم البرمجة باستخدام JavaScript


الدرس: تحديد الكائنات وسماتها مع الفئات


الصفحة السابقة
من المحتمل أنك سمعت مصطلح كائن في سياق برمجة من قبل. لكن ماذا يعني هذا حقا؟ لنبدأ بالنظر إلى بعض الأشياء الموجودة في العالم الحقيقي مثل الأقلام والكتب والهواتف الذكية وأجهزة الكمبيوتر وما إلى ذلك.
JavaScript
القلم هو نوع من الأشياء

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

وينطبق الشيء نفسه على الكتب: فهي تحتوي على غلاف وعدد من الصفحات وعنوان ومؤلف واحد أو أكثر.

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

تعمل قائمة السمات هذه كقالب(Model)  لهذا الكائن. في البرمجة ، يطلق عليها فئة (class) . لإنشاء فئة ، يمكنك اختيار الاسم الذي يناسبه و تختاره. لهذا السبب يُسمى النوع المُسمى (named type) . كما سترى ، تسمح الفئات أيضًا بتجميع الكثير من التفاصيل معًا ؛ هذا هو سبب تسميتها أيضًا بالأنواع المعقدة(complex types) .

قبل أن نتعمق في الفئات ، دعنا نلقي نظرة على نوع معقد من JavaScript : الكائن.

اكتشف الأشياء



تتم كتابة كائنات JavaScript في JSON (JavaScript Object Notation)  . إنها سلسلة من أزواج القيمة الرئيسية مفصولة بفواصل ، بين الأقواس المتعرجة. يمكن حفظ الكائنات في متغير:


let myBook = {

 

title: 'The Story of Tau',

 

author: 'Will Alexander',

 

numberOfPages: 250,

 

isAvailable: true

 

};
 
كل مفتاح عبارة عن سلسلة (العنوان ، المؤلف ، numberOfPages ... ) ، ويمكن أن تحتوي القيم المرتبطة بها على أي نوع من البيانات (رقم ، سلسلة ، إلخ).

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

تدرب على إنشاء الكائن


JavaScript
في تمرين سابق ، قمت بإنشاء ثلاثة متغيرات لوصف حلقة من سلسلة. يبدو أنه الوضع المثالي لإنشاء كائن واحد   episode  : فلنقم بإنشائه الآن!

نراكم في هذا التمرين CodePen  .

  1. قم بإنشاء كائن وتخزينه في متغير يسمى    episode  . تأكد من استخدام الأقواس المتعرجة {} وضع السمات الثلاث التالية:
    • title  : عنوان الحلقة.
    • duration  : مدة الحلقة.
    • hasBeenWatched  : سواء تمت مشاهدة الحلقة أم لا.
  2. اربط القيم المناسبة بكل سمة.
  3. تذكر استخدام أزواج المفتاح والقيمة مفصولة بفواصل. ستنتقل التعليمات البرمجية الخاصة بك بين التعليقات "===" في التمرين.
إذا لم تنجح في القيام بذلك بشكل صحيح في المرة الأولى ، فلا تُقلل من عزيمتك ، واستمر في المحاولة! يتم تعلم البرمجة من خلال الممارسة والتعلم من الأخطاء. 😎

الحل المقترح


هنا CodePen جديد مع حل للتمرين.

الوصول إلى بيانات الكائن


الآن بعد أن عرفت كيفية إنشاء كائن في JavaScript ، تعرف على كيفية الوصول إلى البيانات في كائن باستخدام تدوين النقطة  (dot notation ) ، الموضحة أدناه.

بمجرد حفظ كائن في متغير ، يمكنك الوصول إلى بياناته كما في المثال أدناه.


let myBook = {

title: "L'Histoire de Tao",
author: "Will Alexander",
numberOfPages: 250,
isAvailable: true
};
let bookTitle = myBook.title;  // "L'Histoire de Tao"
let bookPages = myBook.numberOfPages  // 250
 
للقيام بذلك ، استخدم اسم المتغير الذي يحتوي على الكائن ، نقطة (.) ، ثم اسم المفتاح الذي تريد استرداد قيمته.

تدوين القوسين (bracket notation)


للوصول إلى عنصر فرعي ، يمكنك استخدام الأقواس مع قيمة العنصر الفرعي. مثلا :


let myBook = {
   title: "L'Histoire de Tao",
   author: "Will Alexander",
   numberOfPages: 250,
   isAvailable: true
};

let bookTitle = myBook["title"];  // "L'Histoire de Tao"
let bookPages = myBook["numberOfPages"];  // 250
 
الفائدة هنا هي أننا سنتمكن من وضع متغير بين قوسين يحتوي في سلسلة اسم الخاصية التي نريد الوصول إليها. مثلا :

let myBook = {
   title: "L'Histoire de Tao",
   author: "Will Alexander",
   numberOfPages: 250,
   isAvailable: true
};
let propertyToAccess = "title"
let bookTitle = myBook[propertyToAccess];  // "L'Histoire de Tao"
 

تدرب على استرجاع القيم من كائن

JavaScript
هذه فرصة لممارسة dot notation . انتقل إلى محرر CodePen هذا .

في التمرين السابق ، عندما قمت ببناء الكائن  episode  ، استخرج كود زميلك البيانات منه لعرضها في مكونه. الآن الأمر متروك لك لاستخراج المعلومات لتزويدها بالمكون مع الترميز . أو "نقطة" .

  1. قم بإنشاء المتغيرات الثلاثة التالية:
    • episodeTitle  : عنوان الحلقة (string) ؛
    • episodeDuration  : مدة الحلقة (number) ؛
    • episodeHasBeenWatched  : ما إذا كانت الحلقة قد تمت مشاهدتها أم لا (boolean).
  2. قم بتعيين القيم المطابقة للكائن episode إليه باستخدام تدوين "النقطة" .

الحل المقترح


هنا CodePen جديد مع حل للتمرين.

التعامل مع الفئات



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

JavaScript
الفئة تشبه التصميم

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

دعونا نرى كيف نبني فئة في الكود.

لإنشاء فئة في JavaScript ، استخدم الكلمة الأساسية    class  متبوعة باسم. ثم أرفق كود الفئة بين قوسين:


class Book {

 

}
 
بالنسبة لهذه الفئة ، نريد أن يكون Book لكل منها عنوان ومؤلف وعدد من الصفحات. لهذا ، يمكنك استخدام ما يسمى المُنشئ . مُنشئ الفئة هي الوظيفة التي يتم استدعاؤها عندما نقوم بإنشاء مثيل جديد من هذه الفئة باستخدام الكلمة الأساسية new .

class Book {
 

 constructor(title, author, pages) {
 
 }
 
  
 
 }
 
هناك مجموعة من التعليمات التي يجب اتباعها داخل المُنشئ لإنشاء مثيل للفئة Book . لتعيين العنوان والمؤلف وعدد الصفحات المستلمة لهذا المثال ، استخدم الكلمة الأساسية this والترميز النقطي.

class Book {

 

constructor(title, author, pages) {

 

this.title = title;

 

this.author = author;

 

this.pages = pages;

 

}

 

}
 
هنا  تشير الكلمة الأساسية     this   إلى المثيل الجديد. لذلك ، يستخدم الترميز النقطي لتعيين القيم المستلمة للمفاتيح المقابلة.

الآن وبعد انتهاء الفئة ، يمكنك إنشاء مثيلات بالكلمة الأساسية    new  :


let myBook = new Book("L'Histoire de Tao", "Will Alexander", 250);

 

Cette ligne crée l'objet suivant :

{

 

title: "L'Histoire de Tao",

 

author: "Will Alexander",

 

pages: 250

 

}
 
مع الفئة  Book  ، يمكنك بسهولة وبسرعة إنشاء كائنات جديدة  Book  .

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

التدريب على الفئات


JavaScript
أفضل طريقة لتعلم الفئات هي إنشاء واحدة بنفسك. انتقل إلى محرر CodePen هذا .

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

  1. 1.       قم بإنشاء فئة Episode   باستخدام الكلمة الأساسية   class  .
  2. 2.      قم بإنشاء مُنشئ لفئتك Episode   والذي سيتعين عليه قبول ثلاث مدخلات:
    • ·         title  : عنوان الحلقة (string) ؛
    • ·         duration  : مدة الحلقة (number) ؛
    • ·         hasBeenWatched  : ما إذا كانت الحلقة قد تمت مشاهدتها أم لا (boolean).
باستخدام الكلمة    this  ، بتعيين الخصائص   title  ،   duration   و   hasBeenWatched  عبر منشئ.

باستخدام الكلمة الأساسية    new  ، قم بإنشاء ثلاث مثيلات من الفئة Episode  :

  • firstEpisode  ؛
  • secondEpisode  ؛
  • thirdEpisode  .
تذكر أن تمرر المدخلات المناسبة لكل حالة.

الحل المقترح


هل انتهيت ؟ هنا CodePen جديد مع حل للتمرين. 

باختصار



لقد قطعت شوطا طويلا في هذا الفصل! لقد اكتشفت:

  • كائنات ذات أزواج مفتاح-قيمة في تدوين JSON . تسمح لك بحفظ العديد من عناصر البيانات المرتبطة في متغير واحد ؛
  • تدوين منقط (نقطة) يتيح الوصول إلى قيم الكائن وإمكانية تعديلها ؛
  • الفئات ، وكيف يمكن أن يؤدي استخدام الفئات إلى تسهيل إنشاء الكائنات وجعلها أكثر قابلية للقراءة.
سنرى الآن كيفية تجميع العديد من المتغيرات مع المجموعات.