الكائنات
مفهوم الكائن
الكائن (Object) عبارة عن نوع يمكنه إمتلاك خصائص و دوال خاص به.
في عالم البرمجة، نستخدم الكائنات عند الحاجة لتخزين أو نقل مجموعة من البيانات معاً بشكل مرتب.
أي شيء يملك عدة معلومات يمكنك تخزينها له في كائن واحد حتى لا تضطر إلى تخزين كل معلومة منها في متغير لوحدها.
في هذا الدرس ستتعلم كيفية إنشاء كائنات و التعامل معها خطوة خطوة.
طريقة تعريف كائن
الكائن يتم تعريفه بواسطة الرمزين
كل خاصية في الكائن تملك إسم و قيمة، حيث يتم ذكر إسم الخاصية ويليها الرمز
objectName = {
propertyName1: value1,
propertyName2: value2,
...
};يجب وضع فاصلة
لست مجبر على وضع كل خاصية في الكائن على سطر منفرد و لكن ترتيبها كذلك أمر يجعل قراءتها أكثر وضوحاً.
الوصول لخصائص الكائن
خصائص الكائن سواء أردت الحصول على قيمها أو تحديثها فإنه يمكنك الوصول إليها بطريقتين:
1- يمكنك وضع نقطة بعد إسم الكائن و يليها إسم الخاصية كما يلي.
objectName.propertyName
2- يمكنك وضع إسم الخاصية بين
objectName['propertyName']
أغلب المبرمجين يفضلون الطريقة الأولى لأنها أبسط.
الطريقة الثانية تحتاجها حصراً إذا كان إسم الخاصية عبارة عن نص يتألف من أكثر من كلمة.
في المثال التالي قمنا بتعريف كائن وضعنا فيه 3 خصائص مع إعطاء كل خاصية منهم قيمة.
بعدها قمنا بطباعة قيم جميع الخصائص التي يملكها الكائن.
المثال الأول
<!DOCTYPE html>
<html>
<body>
<script>
// وضعنا فيه ثلاث خصائص person هنا قمنا بتعريف كائن إسمه
let person = {
id: 1024,
username: 'AhmedAl-Atris',
isWorking: true
};
// person هنا قمنا بطباعة قيم جميع الخصائص التي يملكها الكائن
document.write('id = ' + person.id + '<br>');
document.write('username = ' + person.username + '<br>');
document.write('isWorking = ' + person.isWorking);
</script>
</body>
</html>في المثال التالي قمنا بتعريف كائن وضعنا فيه 4 خصائص مع إعطاء كل خاصية منهم قيمة.
بعدها قمنا بطباعة قيم جميع الخصائص التي يملكها الكائن.
المثال الثاني
<!DOCTYPE html>
<html>
<body>
<script>
// وضعنا فيه أربع خصائص book هنا قمنا بتعريف كائن إسمه
let book = {
author: 'AhmedAl-Atris codafox.blogspot.com',
title: 'Learn Javascript For Beginners',
totalPages: 340,
'publication date': '6 August 2024'
};
// book هنا قمنا بطباعة قيم جميع الخصائص التي يملكها الكائن
document.write('author = ' + book.id + '<br>');
document.write('title = ' + book.title + '<br>');
document.write('totalPages = ' + book.totalPages + '<br>');
document.write('publication date = ' + book['publication date']);
</script>
</body>
</html>طريقة تعريف دالة في الكائن
يمكنك جعل الكائن يملك دوال خاصة به من خلال تمرير الدوال كقيم للخصائص.
لتعريف دالة في الكائن عليك جعل الخاصية تساوي الدالة التي سيتم تعريفها و تكون بلا إسم ( Anonymous Function )، و عندها يصبح بإمكانك استدعاء هذه الخاصية لاحقاً من خلال إسم الخاصية نفسها.
عند استدعاء دالة من الكائن لا تنسى وضع
في المثال التالي قمنا بإنشاء كائن إسمه
- خاصية عادية إسمها
description فيها نص عبارة عن وصف للمستطيل. - دالة إسمها
getPerimeter() نمرر لها عددين عند استدعائها يمثلان الطول و العرض فترجع لنا محيط المستطيل.
بعدها قمنا بعرض قيمة الخاصية
مثال
<!DOCTYPE html>
<html>
<body>
<script>
// وضعنا فيه خاصية عادية و دالة rectangle هنا قمنا بتعريف كائن إسمه
let rectangle = {
description: 'A rectangle is a quadrilateral with four right angles<br>',
getPerimeter: function(length, width) {
return length * width;
}
};
// rectangle التي يملكها الكائن description هنا قمنا بطباعة قيمة الخاصية
document.write('Rectangle description = ' + rectangle.description);
// rectangle التي يملكها الكائن getPerimeter هنا قمنا بطباعة القيمة التي ترجعها الدالة
document.write('Rectangle getPerimeter = ' + rectangle.getPerimeter(4, 6));
</script>
</body>
</html>طريقة تعريف كائن بداخل الكائن
يمكن للخاصية أن تحتوي على كائن كقيمة و هذا الأمر يمكنك فعله إذا كان الكائن الأساسي سيحتوي على الكثير من الخصائص و التي يمكن تقسيمها لمجموعات حتى يكون التعامل معها أكثر سهولة.
في المثال التالي قمنا بإنشاء كائن إسمه
مثال
<!DOCTYPE html>
<html>
<body>
<script>
// وضعنا فيه خصائص person هنا قمنا بتعريف كائن إسمه
let person = {
id: 1024,
username: 'AhmedAl-Atris',
job: {
title: 'Programmer',
experienceYears: 3
}
};
// person هنا قمنا بطباعة قيم جميع الخصائص التي يملكها الكائن
document.write('username = ' + person.username + '<br>');
document.write('job.title = ' + person.job.title);
</script>
</body>
</html>الكلمة المفتاحية this
الكلمة
يمكن استخدامها في الدوال الموضوعة في الكائن للوصول لخصائص الكائن نفسه.
في المثال التالي قمنا بتعريف كائن إسمه
- خاصية إسمها
firstName تحتوي على إسم المستخدم. - خاصية إسمها
lastName تحتوي على إسم عائلة المستخدم. - دالة إسمها
fullName() ترجع نص عبارة عن إسم المستخدم و إسم عائلته.
مثال
<!DOCTYPE html>
<html>
<body>
<script>
// وضعنا فيه 3 خصائص user هنا قمنا بتعريف كائن إسمه
// عبارة عن دالة ترجع إسم المستخدم fullName الخاصية
let user = {
firstName: 'AhmedAl-Atris',
lastName: 'codafox.blogspot.com',
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
};
document.write('fullName = ' + user.fullName());
</script>
</body>
</html>الكلمة this و الكائن Window
أي صفحة ويب تتصفحها تكون مرتبطة بشكل تلقائي بكائن إسمه
في هذا الدرس لن نتطرق لخصائص و دوال الكائن
في المثال التالي قمنا بطابعة الكلمة
المثال الأول
<!DOCTYPE html>
<html>
<body>
<script>
// تمثل الكائن الخاص بالصفحة this بمعنى أن [object Window] ستطبع
document.write(this);
</script>
</body>
</html>في المثال التالي قمنا بعرض مسار الصفحة الموجود في الكائن الذي يمثل الصفحة في الخاصية
المثال الثاني
<!DOCTYPE html>
<html>
<body>
<script>
// window.location.href ستطبع رابط الصفحة المخزن في الخاصية
document.write(this.location.href);
</script>
</body>
</html>