الكلاسات في JavaScript
- الصفحة السابقة وظائف المظلة JS
- الصفحة التالية مكتبات JS
ECMAScript 2015، يُعرف أيضًا بـ ES6، أضاف JavaScript الفئات.
فئة JavaScript هي نموذج جسم JavaScript.
فئة JavaScriptالنحو
استخدم كلمة المفتاح class إنشاء فئة.
أضف دائمًا اسم constructor() الطرق:
النحو
class ClassName {
constructor() { ... }
}
المثال
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
استخدمت الأمثلة السابقة في إنشاء فئة "Car".
لديها خصائص بدءية اثنتان: "name" و "year".
الكلاسات في JavaScriptليسعنصر.
هي مجرد نموذج جسم JavaScript.نموذج.
استخدام الفئة
إذا كان لديك فئة، يمكنك استخدام هذه الفئة لإنشاء عناصر:
المثال
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
استخدمت فئة Carتم إنشاؤهما عنصر Car.
تُدعى طريقة البناء تلقائيًا عند إنشاء عنصر جديد
طريقة البناء
طريقة البناء هي طريقة خاصة:
- يجب أن يكون لديها اسم دقيق "constructor"
- يتم تنفيذها تلقائيًا عند إنشاء عنصر جديد
- للتحقق من خصائص العنصر
- إذا لم يتم تعريف طريقة البناء، فإن JavaScript سيضيف طريقة البناء الفارغة.
طرق الفئة
إنشاء طرق الفئة
النحو
مثل طرق الأجسام.استخدم كلمة المفتاح class إنشاء فئة.
أضف دائمًا constructor() الطرق.
ثم أضف أي عدد من الطرق.
النحو
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
إنشاء طريقة فئة "age" تعود بسن السيارة:
المثال
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 = "عنددي سيارة " + myCar.age(year) + " سنة قديمة.";
دعم المتصفحات
في الجدول أدناه، تم ذكر إصدارات المتصفحات التي تدعم كلاس JavaScript بشكل كامل أولاً:
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| مارس 2016 | يوليو 2015 | مارس 2016 | أكتوبر 2015 | مارس 2016 |
في الجزء التالي من هذا الدليل، ستتعلم المزيد عن كلاس JavaScript.
- الصفحة السابقة وظائف المظلة JS
- الصفحة التالية مكتبات JS
