الصفات لجافا سكربت

ECMAScript 2015، يُعرف أيضًا بـ ES6، قد أضاف لغة JavaScript الكلاسيكية.

النموذج للاعبين في لغة JavaScript.

لغة JavaScript الكلاسيكية

استخدم كلمة المفتاح keyword class أنشئ كلاس.

دائماً أضف اسم constructor() الطريقة:

النحو

class ClassName {
  constructor() { ... }
}

مثال

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

أنشأ الأمثلة السابقة كلاسًا يُدعى "Car".

يملك هذا الكلاس خصائص إ�始ية اثنتين: "name" و "year".

الصفات لجافا سكربتليسالعناصر.

هي عنصر من عناصر 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 =
"عندما يكون عُمر سيارتي " + myCar.age() + " سنة.";

تجربة شخصياً

يمكنك إرسال المعلمات إلى طريقة الكلاس:

مثال

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

"use strict"

يجب كتابة النصوص في "الوضع الصارم".

إذا لم تتبع قواعد "الوضع الصارم"، فستحصل على رسالة خطأ.

مثال

في "الوضع الصارم"، إذا كنت تستخدم متغيراً دون إعلانه، فستحصل على خطأ:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // This will not work
    let date = new Date(); // This will work
    return date.getFullYear() - this.year;
  }
}

تجربة شخصياً

في JS Strict Mode تعلم المزيد عن "الوضع الصارم" هنا.