کلاس‌های JavaScript
کلاس‌ها در JavaScript راهی منظم برای تعریف شیءهایی با سازنده و متد هستند. با new نمونه می‌سازیم و دموی این درس در پایان tea / regular / mint را نشان می‌دهد.
تعریف کلاس و سازنده
کلاس شکل و رفتار شیءها را توصیف می‌کند. سازنده هنگام ساخت نمونه با new اجرا می‌شود و فیلدهای همان نمونه را مقداردهی می‌کند.
class Drink {
constructor(name, size) {
this.name = name;
this.size = size;
}
}
const order = new Drink("tea", "regular");
سازنده name و size را می‌گیرد و روی شیء تازه ذخیره می‌کند. درون کلاس، this به نمونهٔ فعلی اشاره دارد. عبارت new Drink(...) نمونه را می‌سازد و سازنده را اجرا می‌کند.
افزودن متد نمونه
متدها کارهایی هستند که نمونه‌ها می‌توانند انجام دهند. نام و پارامترهای متد را داخل بدنهٔ کلاس می‌نویسیم.
class Drink {
constructor(name, size) {
this.name = name;
this.size = size;
}
label() {
return this.name + " / " + this.size;
}
}
const order = new Drink("tea", "regular");
console.log(order.label());
فراخوانی order.label() مقدار tea / regular را برمی‌گرداند. متدهای کلاس روی prototype قرار می‌گیرند؛ پس نمونه‌ها از یک متد مشترک استفاده می‌کنند، نه یک کپی جداگانه.
گسترش کلاس
ارث‌بری به کلاس تخصصی اجازه می‌دهد رفتار کلاس عمومی را به کار بگیرد. extends رابطه را می‌سازد، super(...) سازندهٔ والد را صدا می‌زند و super.label() متد به‌ارث‌رسیده را فراخوانی می‌کند.
class SpecialDrink extends Drink {
constructor(name, size, extra) {
super(name, size);
this.extra = extra;
}
fullLabel() {
return super.label() + " / " + this.extra;
}
}
const special = new SpecialDrink("tea", "regular", "mint");
console.log(special.fullLabel());
نمونهٔ SpecialDrink متد label() را از Drink به ارث می‌برد و extra و fullLabel() را اضافه می‌کند. خروجی tea / regular / mint است. سازندهٔ کلاس فرزند باید پیش از استفاده از this، super(...) را اجرا کند.
متدهای static و فیلد خصوصی
متد static به خود کلاس تعلق دارد، نه نمونه‌ها. فیلد خصوصی مانند #secret فقط داخل بدنهٔ همان کلاس قابل خواندن است.
class Drink {
static kind() {
return "drink";
}
#secret = "recipe";
reveal() {
return this.#secret;
}
}
console.log(Drink.kind());
console.log(new Drink().reveal());
متد static را با Drink.kind() صدا بزن، نه با new Drink().kind(). بیرون کلاس نمی‌توانی به drink.#secret دسترسی داشته باشی.
دیدن کلاس‌ها در یک صفحه
این دمو نمونهٔ کامل Drink و SpecialDrink را می‌سازد و نتیجه را در صفحه می‌نویسد.
<p id="result"></p>
<script>
class Drink {
constructor(name, size) { this.name = name; this.size = size; }
label() { return this.name + " / " + this.size; }
}
class SpecialDrink extends Drink {
constructor(name, size, extra) { super(name, size); this.extra = extra; }
fullLabel() { return super.label() + " / " + this.extra; }
}
const order = new SpecialDrink("tea", "regular", "mint");
document.querySelector("#result").textContent = order.fullLabel();
</script>
صفحه دقیقاً tea / regular / mint را نشان می‌دهد. اعلان کلاس پیش از محل اعلان قابل استفاده نیست؛ این وضعیت «ناحیهٔ زمانی مرده» یا temporal dead zone است، نه ادعای گمراه‌کنندهٔ hoisting.
کلاس‌ها ساخت نمونه و رفتار مشترک را سازمان می‌دهند. آن‌ها با ماژول‌ها که فایل‌ها را سازمان می‌دهند و با متدی که مستقیم روی یک شیء نوشته می‌شود فرق دارند. برای نمونه از new و برای رفتار سطح کلاس از static استفاده کن.
📊 ویژگی‌های کلاس
| نحو | کاربرد | نمونه |
|---|---|---|
constructor(...) |
مقداردهی نمونهٔ تازه | constructor(name, size) |
this |
اشاره به نمونهٔ فعلی | this.name = name |
extends و super |
استفادهٔ دوباره از رفتار والد | class SpecialDrink extends Drink |
static |
تعریف متد سطح کلاس | Drink.kind() |
این جدول نحوهای اصلی کلاس را که در این درس به کار رفتند خلاصه می‌کند.
تمرین عملی
Drink را با name، size و label() بساز. سپس با extends، کلاس SpecialDrink را بساز، extra را اضافه کن و کاری کن fullLabel() مقدار tea / regular / mint را نشان دهد. در پایان Drink.kind() را روی خود کلاس صدا بزن.
اشتباه‌های رایج
متد نمونه را روی کلاس صدا نزن، در سازندهٔ فرزند super(...) را فراموش نکن و پیش از آن از this استفاده نکن. اعلان کلاس را هم پیش از خودش به کار نبر.
نکتهٔ اصلی
کلاس‌ها داده و رفتار نمونه را کنار هم می‌گذارند: سازنده فیلدها را مقداردهی می‌کند، متدها از prototype به‌صورت مشترک استفاده می‌شوند و ارث‌بری رفتار را دوباره به کار می‌گیرد.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود