JavaScript:کلاس‌ها در جاوااسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
میانبر:
الگو:اج
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
Tutorial
۱آموزش جاوااسکریپت
۲مقدمه‌ای بر جاوااسکریپت
۳JavaScript:قوانین و اصول اولیه زبان جاوااسکریپت
۴JavaScript:خروجی جاوااسکریپت
۵JavaScript:عبارت‌ها در جاوااسکریپت
۶JavaScript:شیوهٔ نوشتن (Syntax) عبارات یا دستورات در جاوااسکریپت
۷JavaScript:نظرات یا کامنت‌ها (Comments) در جاوااسکریپت
۸JavaScript:متغیرها در جاوااسکریپت
۹JavaScript:عملگرهای جاوااسکریپت
۱۰JavaScript:عملگرهای ریاضی در جاوااسکریپت
۱۱JavaScript:عملگرهای مقداردهی در جاوااسکریپت
۱۲JavaScript:انواع داده‌ها در جاوااسکریپت
۱۳JavaScript:توابع در جاوااسکریپت
۱۴JavaScript:اشیاء (object) در جاوااسکریپت
۱۵JavaScript:رویدادها در جاوااسکریپت
۱۶JavaScript:رشته‌های متنی (string) در جاوااسکریپت
۱۷JavaScript:متدهای نوع داده متنی یا رشته‌ای در جاوااسکریپت
۱۸JavaScript:اعداد در جاوااسکریپت
۱۹JavaScript:متدهای داده‌های عددی در جاوااسکریپت
۲۰JavaScript:آرایه‌ها در جاوااسکریپت
۲۱JavaScript:متدهای آرایه در جاوااسکریپت
۲۲JavaScript:مرتب‌سازی آرایه‌ها در جاوااسکریپت
۲۳JavaScript:متدهای پیمایش آرایه در جاوااسکریپت
۲۴JavaScript:اشیاء تاریخ و زمان در جاوااسکریپت
۲۵JavaScript:فرمت‌های تاریخ و زمان در جاوااسکریپت
۲۶JavaScript:متدهای دریافت تاریخ و زمان در جاوااسکریپت
۲۷JavaScript:متدهای تنظیم زمان و تاریخ در جاوااسکریپت
۲۸JavaScript:شی ریاضی (Math) در جاوااسکریپت
۲۹JavaScript:ایجاد عدد تصادفی در جاوااسکریپت
۳۰JavaScript:مقادیر بولین (Booleans) در جاوااسکریپت
۳۱JavaScript:عملگرهای منطقی و مقایسه‌ای در جاوااسکریپت
۳۲JavaScript:ساختار if else و else if در جاوااسکریپت
۳۳JavaScript:تکه کد Switch در جاوا اسکریپت
۳۴JavaScript:حلقه For در جاوااسکریپت
۳۵JavaScript:حلقه While در جاوااسکریپت
۳۶JavaScript:کلمات کلیدی Break و Continue در جاوااسکریپت
۳۷JavaScript:تبدیل نوع داده‌ها در جاوااسکریپت
۳۸JavaScript:عملیات‌های بیتی در جاوااسکریپت
۳۹JavaScript:عبارات با قاعده در جاوااسکریپت
۴۰JavaScript:خطاها در جاوااسکریپت - رخ دادن خطا و رفع آن
۴۱JavaScript:Scope در جاوااسکریپت
۴۲JavaScript:Hoisting یا جا به جایی کدها در جاوااسکریپت
۴۳JavaScript:استفاده از مد یا حالت سخت‌گیرانه (use strict) در جاوااسکریپت
۴۴JavaScript:کلمه کلیدی This در جاوااسکریپت
۴۵JavaScript:کلمه کلیدی Let در جاوااسکریپت
۴۶JavaScript:ثابت‌ها در جاوااسکریپت
۴۷JavaScript:تعریف توابع به صورت پیکان
۴۸JavaScript:کلاس‌ها در جاوااسکریپت
۴۹JavaScript:اشکال‌زدایی در جاوااسکریپت
۵۰JavaScript:راهنمای استایل و استانداردهای کدنویسی در جاوااسکریپت
۵۱JavaScript:بهترین تمرینات جاوااسکریپت
۵۲JavaScript:اشتباهات رایج در برنامه‌نویسی جاوااسکریپت
۵۳JavaScript:کارایی در جاوااسکریپت
۵۴JavaScript:کلمات رزرو شده در جاوااسکریپت
۵۵JavaScript:ورژن‌های جاوااسکریپت
۵۶JavaScript:ECMAScript 5 - JavaScript 5
۵۷JavaScript:ECMAScript 6 - ECMAScript 2015
۵۸JavaScript:جیسون (JSON) در جاوااسکریپت
---

کلاس‌ها در ورژن Es6 که با نام ECMAScript2015 نیز شناخته می‌شود منتشر شد. [۱]

یک کلاس نوعی از تابع است، اما به جای کلمه کلیدیfunctionبرای تعریف آن، ما از کلمه کلیدیclassستفاده می‌کنیم و ویژگی‌های آن درون متد سازنده یاconstructor()مقدار دهی می‌شود.

تعریف کلاس

از کلمه کلیدیclassبرای ساخت یک کلاس استفاده کنید و همیشه یک متد سازنده به کلاس اضافه کنید.

متد سازنده هر زمانی که شی ای از کلاس فراخوانی شود، اجرا می‌گردد.

مثال

مثالی ساده از شیوه تعریف یک کلاس با نام "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

حال، شما می‌توانید با استفاده از کلاس Car اشیا را بسازید:

مثال

ساخت یک شی از نوع کلاس Car با نام mycar:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
mycar = new Car("Ford");


متدها

متد سازنده یک متد به خصوص است، این متد جایی است که شما ویژگی‌های کلاس خود را مقداردهی می‌کنید، این متد به صورت خودکار زمانی که شی از کلاس ساخته می‌شود فراخوانی می‌شود و نام این متد می‌بایست دقیقاً سازنده یا "constructor" باشد. درحقیقت اگر شما متد سازنده ای در کلاس خود نداشته باشید، جاوااسکریپت یک متد سازنده پنهان و خالی به کلاس شما به صورت خودکار اضافه می‌کند.

همچنین شما می‌توانید متدهای خود را بسازید، شیوه نوشتار متدها می‌بایست برای شما آشنا باشد:

مثال

ساخت یک متد به نام "present":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return "I have a " + this.carname;
  }
}

mycar = new Car("Ford");
document.getElementById("demo").innerHTML = mycar.present();

همان‌طور که شما می‌توانید در مثال بالا ببینید، شما متد را با توجه به نام شی آن که بعد از آن پرانتز قرار گرفته‌است (هرگونه پارامتری درون پرانتزها قرار می‌گیرد) فراخوانی می‌کنید.

مثال

پاس دادن یک پارامتر به متدclass:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present(x) {
    return x + ", I have a " + this.carname;
  }
}

mycar = new Car("Ford");
document.getElementById("demo").innerHTML = mycar.present("Hello");

متدهای استاتیک یا ایستا

متدهای استاتیک یا ایستا

متدهای استاتیک یا ایستا در خود کلاس تعریف می‌شوند، و نه در اشیای کلاس.

این بدان معناست که شما نمی‌توانید متدهای استاتیک را بر روی شی (شی mycar) فراخوانی کنید، اما می‌توانید بر روی کلاس (Car) متد را فراخوانی کنید:

مثال

ساخت یک متد استاتیک و فراخوانی آن روی کلاس:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  static hello() {
    return "Hello!!";
  }
}

mycar = new Car("Ford");

//Call 'hello()' on the class Car:
document.getElementById("demo").innerHTML = Car.hello();

//and NOT on the 'mycar' object:
//document.getElementById("demo").innerHTML = mycar.hello();
//this would raise an error.

اگر شما می‌خواهید که از شی mycar درون متد استاتیک استفاده کنید، شما می‌توانید آن را به عنوان یک پارامتر به متد استاتیک پاس دهید.

مثال

Send "mycar" as a parameter:

ارسال شی "mycar" به عنوان یک پارامتر:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  static hello(x) {
    return "Hello " + x.carname;
  }
}

mycar = new Car("Ford");

document.getElementById("demo").innerHTML = Car.hello(mycar);

ارث بری

برای پیاده‌سازی مفهوم ارث بری کلاس، از کلمه کلیدیextendsاستفاده کنید.

یک کلاسی که با ارث بری کلاس ساخته شده‌است تمامی متدهای موجود در کلاس دیگر را ارث بری می‌کند:

مثال

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

mycar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = mycar.show();

ساخت یک کلاس با نام "Model" که متدها را از کلاس "Car"ارث بری خواهد کرد:

متدsuper()به کلاس والد اشاره دارد.

بافراخوانی متدsuper()در متد سازنده یا Constructor، ما متد سازنده کلاس والد را فراخوانی می‌کنیم و به متدها و ویژگی‌های کلاس والد دسترسی پیدا می کینم.

متدهای Getter (به فارسی: دریافت کننده) و متدهای setter (به فارسی: تنظیم کننده)

کلاسها به شما این امکان را می‌دهند که از متدهای Getter و setter استفاده کنید.

استفاده از متدهای getter و setter برای ویژگی‌های کلاس شما کاری هوشمندانه خواهد بود به خصوص اگر شما می‌خواهید قبل از برگرداندن داده‌هایتان یا قبل از تنظیم کردن آنها، اعمالی روی آنها انجام دهید.

برای اضافه کردن متدهای getter و setter در کلاس، از کلمه‌های کلیدیgetوsetاستفاده کنید.

مثال

ساخت یک متد دریافت کننده یا Getter و تنظیم کننده یا Setter برای ویژگی "carname":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

mycar = new Car("Ford");

document.getElementById("demo").innerHTML = mycar.cnam;


نام متدهای دریافت کننده یعنی Getter و متدهای تنظیم کننده یعنی Setter نمی‌تواند همنام ویژگی باشد، در این مثالcarname.

بسیاری از برنامه نویسان از یک کاراکتر زیر خط _ قبل از نام ویژگی استفاده می‌کنند تا نام متدهای دریافت کننده و تنظیم کننده و نام خود ویژگی را از یک دیگر جدا کنند:

مثال

شما می‌توانید از علامت زیر خط یا _ برای جداسازی متدهای دریافت کننده یا Getter / setter از نام خود ویژگی استفاده کنید:

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

mycar = new Car("Ford");

document.getElementById("demo").innerHTML = mycar.carname;

برای استفاده از متدهای Setter، از همان شیوه نوشتاری که زمانی که شما مقدار یک ویژگی را تنظیم می‌کردید اما این بار بدون پرانتز، استفاده کنید:

مثال

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

mycar = new Car("Ford");
mycar.carname = "Volvo";
document.getElementById("demo").innerHTML = mycar.carname;

جا به جایی

برخلاف توابع و سایر تعاریف در جاوااسکریپت، تعاریف کلاسها جابه‌جا نمی‌شوند.

این بدان معناست که شما می‌بایست یک کلاس را قبل از استفاده از آن تعریف کنید:

مثال

//You cannot use the class yet.
//mycar = new Car("Ford")
//This would raise an error.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

//Now you can use the class:
mycar = new Car("Ford")


استفاده از حالت "use strict" (به فارسی: سخت گیرانه)

شیوه‌های نوشتار یا syntax ها در کلاس‌ها باید در حالت سخت گیرانه یا "strict mode" نوشته شوند.

شما در صورتی که قوانین حالت سخت گیرانه یا "strict mode" را رعایت نکنید، با خطا مواجه خواهید شد.

مثال

در حالت سخت گیرانه یا strict mode" ، اگر شما یک متغیر را قبل از تعریف آن استفاده کنید، با خطا مواجه خواهید شد:

class Car {
  constructor(brand) {
    i = 0;
    this.carname = brand;
  }
}
var mycar = new Car("Ford");

شما می‌توانید مطالب بیشتری را در مورد حالت سخت گیرانه یا "Strict mode" در فصل حالت سخت گیرانه در جاوااسکریپت بیاموزید.

سازگاری با مرورگرها

جدول زیر اولین ورژن‌هایی از مرورگرها را که به طور کامل از کلاس‌ها در جاوااسکریپت پشتیبانی می‌کنند را مشاهده می‌کنید:

کروم Edge فایرفاکس سافاری اپرا
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
مارس ۲۰۱۶ ژوئیه ۲۰۱۵ مارس ۲۰۱۵ اکتبر ۲۰۱۵ مارس ۲۰۱۶

منابع آموزشی