بما أنها من لغات البرمجة الكائنية التوجه/المنحى (Object-oriented Programming Language)؛ تسمح لغة JavaScript للمستخدم بتعريف كائنات خاصة به (بالطبع كائنات افتراضية)، وهي نوع خاص من أنواع البيانات تحتوي على مجموعة من خصائص وطرق:
1.  الخصائص (Properties): متغيرات تحمل القيم الخاصة بالكائن.
2. الطرق (Methods): وظائف تقوم ببعض العمليات على القيم الخاصة بالكائن.
هناك عدة أنواع من الكائنات المبنية مسبقا في JavaScript، مثل النص (String)، والتاريخ (Date)، والمصفوفة (Array)، ولكن في موضوعنا هذا سنتعلم إنشاء نوع جديد من الكائنات.

مثال شامل على إنشاء الكائنات في JavaScript

فيما يلي سنخوض في مثال شامل على ذلك، المثال سيحتوي على 3 خطوات:
1. تعريف نوع كائن جديد.
2. إنشاء الوظائف (Functions) التي سيتم إسنادها للطرق.
3. إنشاء كائن جديد (بناء على الخطوتين 1 و 2)، والتعامل مع خصائصه وطرقه.

الخطوة الأولى: إنشاء نوع كائن جديد

سنقوم بتعريف نوع كائن جديد اسمه “طالب” (Student)، يحتوي على الخصائص التالية:
– رقم الطالب (studentID)
– الاسم الأول (firstName)
– الاسم الأخير (lastName)

ويحتوي على الطرق التالية:
– الاسم بالكامل (fullName)
– الدرجة النهائية (totalMarks)
وسيتم إسناد هذه الطرق بوظائف (Functions) سيتم إنشاؤها لاحقا.

الأسطر التالية توضح طريقة إنشاء نوع كائن جديد وطريقة تعريف الخصائص والطرق التابعة له من خلال إنشاء ما يسمى بـ Constructor Function، وهو عبارة عن وظيفة  تحمل نفس اسم نوع الكائن، ولكنه تبدأ دائما بحرف كبير على العكس من الوظائف المعتادة:

function Student(aStudentID,aFirstName,aLastName)
{
//Propertise
 this.studentID=aStudentID;
 this.firstName=aFirstName;
 this.lastName=aLastName;
//Methods
 this.fullName = funFullName;
 this.totalMarks = funTotalMarks;
 }

* لاحظ أن أسماء الخصائص والطرق تتبع مباشرة الكلمة المحجوزة (this) التي تشير إلى الكائن الذي تم إنشاؤه.

الخطوة الثانية: إنشاء الوظائف التي سيتم إسنادها للطرق (Methods)

عندما قمنا بإنشاء نوع كائن جديد، أسندنا أسماء الوظائف التالية للطرق (Methods) التابعة للكائن:

– funFullName
– funTotalMarks

وقد ميزت أسماء هذه الوظائف بالبادئة fun اختصارا لكلمة Function.

الأسطر التالية توضح طريقة إنشاء هذه الوظائف:

الوظيفة الأولى: تم اسنادها لـ Method المسمى بـ fullName وهي تقوم بجمع الاسم الأول للطالب باسمه الأخير:

function funFullName()
{
 fullName=this.firstName + ” ” + this.lastName;
 return fullName;
 }

الوظيفة الثانية: تم اسنادها لـ Method المسمى بـ totalMarks وهي تقوم بحساب مجموع درجات الطالب:

function funTotalMarks()
{
 var mark=0;
 var totalMark = 0;
 var i=0;
 for (i=0;i<3;i++)
  {
  mark=parseFloat(window.prompt(‘Insert the marks of student ‘ + this.firstName + ‘:’,”));
  totalMark=totalMark+mark;
  }
 return totalMark;
 }

* لاحظ أن هذه الوظائف (Functions) عبارة عن أمثلة فقط، ولا يجب التقيد بها.

الخطوة الثالثة: إنشاء كائن جديد، والتعامل مع خصائصه وطرقه

وصلنا أخيرا للخطوة الأخيرة، وسنقوم فيها بإنشاء كائن جديد أو بالأحرى Instance لنوع الكائن (Student) الذي قمنا بإنشائه في بداية الموضوع.

الأسطر التالية توضح طريقة إنشاء كائن (Students):

 //Creating new instance of the object “Student”
var firstStudent = new Student(10561,’Ahmed’,’Salem’);

التعامل مع خصائص الكائن:

//Displaying the properties
document.write(‘ID: ‘ + firstStudent.studentID + ‘<BR>’);
document.write(‘First Name: ‘ + firstStudent.firstName + ‘<BR>’);
document.write(‘Second Name: ‘ + firstStudent.lastName + ‘<BR>’);

التعامل مع طرق الكائن:

//Calling the methods
document.write(‘Full Name: ‘ + firstStudent.fullName() + ‘<BR>’);
document.write(‘Total Marks: ‘ + firstStudent.totalMarks() + ‘<BR>’ + ‘—————–‘ + ‘<BR>’);

أيضا نستطيع إنشاء Instance أخرى بنفس الطريقة:

 //Creating new instance of the object “Student”
var secondStudent = new Student(10779,’Jenan’,’Ali’);
//Displaying the properties
document.write(‘ID: ‘ + firstStudent.studentID + ‘<BR>’);
document.write(‘First Name: ‘ + firstStudent.firstName + ‘<BR>’);
document.write(‘Second Name: ‘ + firstStudent.lastName + ‘<BR>’);
//Calling the methods
document.write(‘Full Name: ‘ + firstStudent.fullName() + ‘<BR>’);
document.write(‘Total Marks: ‘ + firstStudent.totalMarks() + ‘<BR>’ + ‘—————–‘ + ‘<BR>’);

وهنا يتضح لنا أهمية إنشاء Object Type، في إنشاء عدة كائنات لها نفس الخصائص ولها نفس الطرق وهذا كل شيء!

فيما يلي Code كاملا، فقط قم بنسخ هذه الأسطر ولصقها في  محرر نصوص ، ثم قم بحفظ الملف بامتداد .htm:

<html> <head> <title>Kuwait10</title> <script type=“text/javascript”>

function Student(aStudentID,aFirstName,aLastName)
{
//Propertise
this.studentID=aStudentID;
this.firstName=aFirstName;
this.lastName=aLastName;
//Methods
this.fullName = funFullName;
this.totalMarks = funTotalMarks;
}

function funFullName()
{
fullName=this.firstName + ” ” + this.lastName;
return fullName;
 }

function funTotalMarks()
{
var mark=0;
var totalMark = 0;
var i=0;
for (i=0;i<3;i++)
{
mark=parseFloat(window.prompt(‘Insert the marks of student ‘ + this.firstName + ‘:’,”));
totalMark=totalMark+mark;
}
return totalMark;
}

//Creating the instance of the object “Student”
var firstStudent = new Student(10561,’Ahmed’,’Salem’);
//Displaying the properties
document.write(‘ID: ‘ + firstStudent.studentID + ‘<BR>’);
document.write(‘First Name: ‘ + firstStudent.firstName + ‘<BR>’);
document.write(‘Second Name: ‘ + firstStudent.lastName + ‘<BR>’);
//Calling the methods
document.write(‘Full Name: ‘ + firstStudent.fullName() + ‘<BR>’);
document.write(‘Total Marks: ‘ + firstStudent.totalMarks() + ‘<BR>’ + ‘—————–‘ + ‘<BR>’);
</script> </head> <body> </body> </html>

 

المراجع:

– JavaScript Tutorial | w3schools.com

المواضيع السابقة:

– البرمجة بلغة JavaScript: إكتشاف الأخطاء.

– البرمجة بلغة JavaScript: المزيد من الأدوات المجانية.

– البرمجة بلغة JavaScript: استخدام الفاصلة المنقوطة.