کلاس‌های ES6
کلاس‌های ES6 (ES6 Classes) یکی از مهم‌ترین ویژگی‌های جاوااسکریپت مدرن هستند که برنامه‌نویسی شیءگرا (Object-Oriented Programming) را ساده‌تر و ساختاریافته‌تر می‌کنند. پیش از ES6، توسعه‌دهندگان برای ایجاد اشیاء از توابع سازنده (Constructor Functions) و زنجیره‌های پروتوتایپ (Prototype Chains) استفاده می‌کردند که برای مبتدیان گیج‌کننده بود. کلاس‌ها با ارائه سینتکس واضح، قابلیت بازاستفاده و سازماندهی بهتر کد را فراهم می‌کنند.
در پروژه‌های واقعی، کلاس‌ها کاربرد فراوان دارند. در یک فروشگاه آنلاین (Online Shop)، می‌توان کلاس Product ایجاد کرد تا اطلاعات محصول مانند نام، قیمت و توضیحات را مدیریت کند. در وب‌سایت خبری (News Website)، کلاس NewsItem می‌تواند برای مدیریت تیتر، محتوا و تاریخ انتشار به کار رود. در وبلاگ شخصی (Personal Blog)، کلاس Article برای مقالات و نویسنده‌ها مناسب است و در پرتال دولتی (Government Portal) می‌توان کلاس‌های User یا Form را برای مدیریت کاربران و فرم‌ها تعریف کرد.
می‌توان کلاس‌های ES6 را مانند ساختن یک خانه تصور کرد: کلاس‌ها نقشه و طراحی خانه هستند و هر شیء (Object) یک اتاق است که می‌توان آن را مطابق نیاز شخصی تزئین و سازماندهی کرد. در این آموزش، شما یاد خواهید گرفت چگونه کلاس‌ها را تعریف کنید، سازنده‌ها (Constructors) و متدها (Methods) را استفاده کنید، وراثت (Inheritance) را پیاده‌سازی کنید و آن‌ها را در پروژه‌های واقعی به کار ببرید.
مثال پایه
javascript// تعریف یک کلاس ساده در ES6
class User {
constructor(name, email) { // سازنده (Constructor) ویژگی‌های نمونه را مقداردهی می‌کند
this.name = name;
this.email = email;
}
greet() { // متد (Method) مشترک برای همه نمونه‌ها
return `سلام، ${this.name}!`;
}
}
const user1 = new User("مهدی", "[[email protected]](mailto:[email protected])");
console.log(user1.greet()); // "سلام، مهدی!"در این مثال، ما یک کلاس به نام User تعریف کرده‌ایم. کلمه کلیدی class ساختار شیءگرای مدرن را معرفی می‌کند. متد constructor به طور خودکار هنگام ایجاد یک نمونه (Instance) با new فراخوانی می‌شود و ویژگی‌های نمونه را مقداردهی می‌کند. this به نمونه جاری اشاره دارد.
متد greet() تابعی است که برای تمام نمونه‌ها مشترک است و در پروتوتایپ (Prototype) قرار می‌گیرد تا حافظه بهینه استفاده شود. با استفاده از new User("مهدی", "[email protected]") یک نمونه جدید ایجاد می‌کنیم و فراخوانی user1.greet() پیغام شخصی‌سازی شده را بازمی‌گرداند.
این کلاس می‌تواند در وبلاگ یا پرتال دولتی برای مدیریت کاربران استفاده شود. تفاوت بین کلاس و شیء باید به خوبی درک شود: کلاس نقشه است و شیء اتاق واقعی که مطابق نیاز تزئین شده است.
مثال کاربردی
javascript// کلاس برای مدیریت محصولات در فروشگاه آنلاین
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
display() { // نمایش جزئیات محصول
return `${this.name} قیمت: ${this.price} تومان`;
}
}
const product1 = new Product("لپ‌تاپ", 45000000);
const product2 = new Product("هدفون", 2000000);
console.log(product1.display()); // "لپ‌تاپ قیمت: 45000000 تومان"
console.log(product2.display()); // "هدفون قیمت: 2000000 تومان"برای استفاده بهینه از کلاس‌های ES6، بهتر است چند Best Practice را رعایت کنیم:
- از سینتکس مدرن (
class,extends,super) استفاده کنید تا کد خواناتر و قابل نگهداری باشد. - ورودی‌ها را در سازنده اعتبارسنجی کنید، مانند اطمینان از مثبت بودن قیمت محصولات.
- متدها را در داخل کلاس تعریف کنید و نه در سازنده، تا حافظه بهینه استفاده شود.
- از وراثت (Inheritance) برای ساختاردهی مجدد کد استفاده کنید، مانند کلاس پایه
Postبرای وبلاگ و توسعه آن بهVideoPostیاImagePost.
اشتباهات رایج شامل فراموش کردنnew، تعریف متدها در سازنده، استفاده نادرست ازthisدر callbackها و ترکیب منطق تجاری با UI است. برای دیباگ کردن، ازconsole.log(this)وinstanceofاستفاده کنید و کلاس‌ها را به صورت ماژولار تقسیم کنید تا کد مرتب و قابل نگهداری باشد.
📊 مرجع سریع
| Property/Method | Description | Example |
|---|---|---|
| constructor | مقداردهی اولیه به نمونه کلاس | class A { constructor(x){ this.x = x; } } |
| this | اشاره به نمونه جاری | this.name = "مهدی"; |
| method() | تعریف تابع روی پروتوتایپ | greet(){ return "سلام"; } |
| extends | وراثت کلاس‌ها | class B extends A {} |
| super | فراخوانی سازنده یا متد والد | super(name); |
| static | متد سطح کلاس | static info(){ return "اطلاعات"; } |
خلاصه و گام‌های بعدی:
در این آموزش، با مفاهیم کلاس‌های ES6 شامل سازنده‌ها، متدها، ایجاد نمونه‌ها و وراثت آشنا شدید. کلاس‌ها کمک می‌کنند کد منظم، بازاستفاده‌پذیر و قابل نگهداری باشد، مانند نقشه‌ای که یک خانه را سازماندهی می‌کند.
در پروژه‌هایی مانند فروشگاه آنلاین، وبلاگ، سایت خبری یا پرتال دولتی، کلاس‌ها می‌توانند کاربران، محصولات، مقالات یا آیتم‌های خبری را مدل کنند. این مفاهیم به طور مستقیم با HTML DOM Manipulation و ارتباط با Backend قابل استفاده هستند.
گام‌های بعدی شامل متدهای استاتیک، وراثت پیشرفته و Design Patterns مانند Singleton و Factory است. برای تمرین، یک وبلاگ کوچک یا ماژول فروشگاهی با کلاس‌های محصولات، کاربران و سفارشات ایجاد کنید. کد ماژولار و تمیز باعث مقیاس‌پذیری و نگهداری آسان می‌شود.
🧠 دانش خود را بیازمایید
آزمون دانش شما
درک خود از این موضوع را با سوالات کاربردی بسنجید.
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود