فئات JavaScript
قدم ECMAScript 2015 ، المعروف أيضًا باسم ES6 ، فئات JavaScript.
فئات JavaScript هي قوالب لكائنات JavaScript.
بناء جملة فئة JavaScript
استخدم الكلمة الأساسية class
لإنشاء فصل دراسي.
أضف دائمًا طريقة باسم constructor()
:
بناء الجملة
class ClassName {
constructor() { ... }
}
مثال
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
ينشئ المثال أعلاه فئة تسمى "سيارة".
يحتوي الفصل على خاصيتين أوليتين: "الاسم" و "السنة".
فئة JavaScript ليست كائنًا.
إنه قالب لكائنات جافا سكريبت.
باستخدام الفصل
عندما يكون لديك فصل ، يمكنك استخدام الفصل لإنشاء كائنات:
مثال
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
يستخدم المثال أعلاه فئة السيارة لإنشاء كائنين للسيارة .
يتم استدعاء طريقة المُنشئ تلقائيًا عند إنشاء كائن جديد.
طريقة المنشئ
طريقة الباني هي طريقة خاصة:
- يجب أن يكون لها الاسم الدقيق "المُنشئ"
- يتم تنفيذه تلقائيًا عند إنشاء كائن جديد
- يتم استخدامه لتهيئة خصائص الكائن
إذا لم تحدد طريقة منشئ ، فستضيف JavaScript طريقة مُنشئ فارغة.
طرق الفصل
يتم إنشاء طرق الفئة بنفس بناء الجملة مثل طرق الكائن.
استخدم الكلمة الأساسية class
لإنشاء فصل دراسي.
أضف طريقة دائمًا constructor()
.
ثم أضف أي عدد من الطرق.
بناء الجملة
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
إنشاء طريقة فئة باسم "العمر" ، والتي تُرجع عمر السيارة:
مثال
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
يمكنك إرسال المعلمات إلى أساليب الفصل الدراسي:
مثال
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new
Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is
" + myCar.age(year) + " years old.";
دعم المتصفح
يحدد الجدول التالي إصدار المستعرض الأول مع الدعم الكامل للفئات في JavaScript:
Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
سوف تتعلم المزيد عن فئات JavaScript لاحقًا في هذا البرنامج التعليمي.