انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 85
دورة جافا سكريبت

JavaScript Classes

في هذا الدرس سوف نتعرف علي ال classes في لغة ال JavaScript

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
7
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,778
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

JavaScript Classes

من الناحية العملية ، نحتاج غالبًا إلى إنشاء العديد من العناصر من نفس النوع ، مثل المستخدمين أو السلع أو أيا كان وهذا ما يسهل تحقيقه باستخدام ال classes

نستخدم الكلمة class لنستطيع انشاء class

ودائما يجب ان يحتوي علي دالة تسمي ( )constructor 

Syntax

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

Example

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

Using a Class

بمجرد أنشائك لل class فبأمكانك انشاء object منه بكل سهولة بهذه الطريقة وهذا ال object يحتوي نفس الدوال والمتغيرات التي تم انشائها بداخل ال class

HTML 
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
جرّب بنفسك

The Constructor Method

دوال ال constructor هي دوال لها صفات خاصة عن بقية الدوال الاخري فهي :

  • تأخذ اسم constructor ولا يمكن تغييره
  • يتم تنفيذها بشكل تلقائي عند انشاء ال objects
  • الهدف من انشائها هو تحديد خصائص ومتغيرات ال object بداخلها

اذا لم تقم بأنشاء دوال ال constructor فأن javaScript سوف تقوم بأنشاء دالة constructor فارغة لك بشكل تلقائي

Syntax

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

Class Methods

يمكن اضافة دوال اخري الي ال class غير ال constructor بكل سهولة ونفس طريقة كتابة ال constructor 

  • اولا قم بأنشاء class عن طريق استخدام الكلمة class ثم بعدها اكتب الاسم الذي تريد لل class
  • قم بأنشاء ال constructor بعدها
  • ثم قم بأنشاء كل الدوال التي تريد انشائها داخل الكلاس بكل سهولة

Syntax

HTML 
class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Example

HTML 
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.";
جرّب بنفسك

يمكنك ايضا اضافة parameters الي ال class بهذه الطريقة

HTML 
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.";
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…