آموزش Class در جاوا اسکریپت
کلاس در جاوا اسکریپت، مانند دستورالعملی برای ساختن اشیا است. در اصل کلاس به کامپیوتر یا مرورگر می‌گوید که هر شی باید چه ویژگی‌هایی داشته باشد و بتواند چه‌کاری انجام دهد. در این مطلب از مجله سبزلرن، قرار است که به صورت کامل و جامع کلاس‌های جاوا اسکریپت را با رویکردی آموزش محور موردبررسی و بازبینی قرار دهیم. در پایان مطالعه این مطلب کاربران درک نسبتاً درست و خوبی از مفهوم Class در جاوا اسکریپت به دست خواهند آورد.
پیشینه به وجود آمدن کلاس در جاوا اسکریپت
زبان برنامه نویسی جاوا اسکریپت بر اساس چیزی به نام نمونه‌های اولیه کار (Prototype) می‌کند که مانند راهنماهایی پنهان برای اشیا هستند. به زبانی ساده هر شی دارای نوعی ویژگی مخفی به نام Prototype است که ویژگی‌های آن را بیان می‌کند.
قبلاً توسعه‌دهندگان از توابع ویژه‌ای به نام توابع سازنده استفاده می‌کردند تا مفهوم شی گرایی در جاوا اسکریپت را به واقعیت تبدیل کنند. اما در سال 2015، با به‌روزرسانی ECMAScript 2015 (اغلب ES6 نامیده می‌شود)، مفهوم کلاس در جاوا اسکریپت پدید آمد. کلاس‌های جاوا اسکریپت واقعاً توانایی‌های عجیب و غریبی به جاوا اسکریپت اضافه نمی‌کنند ولی با این حال درک و نحوه استفاده از آن‌ها می‌تواند سناریوهای کدنویسی را آسان‌تر کند. اگر با سایر زبان‌های برنامه‌نویسی که از کلاس‌ها استفاده می‌کنند آشنا هستید، کار باکلاس‌ها در جاوا اسکریپت آسان‌تر می‌شود.
مفهوم اصلی کلاس در جاوا اسکریپت
در زندگی روزمره ما اغلب با چیزهایی سروکار داریم که خواص مشابهی دارند. به عنوان مثال، ساخت کارت شناسایی برای دانش‌آموزان شامل اطلاعاتی مانند نام، کلاس و شماره دانش‌آموزی آن‌ها است. اینجاست که کلاس‌ها و اشیاء وارد می‌شوند. در جاوا اسکریپت، که زبانی مبتنی بر نمونه اولیه است، ویژگی پنهان به نام Prototype وجود دارد که به گسترش خواص و متدهای اشیا کمک می‌کند. ES6، نسخه‌ای از جاوا اسکریپت، ایده کلاس‌ها را معرفی کرد. این کلاس‌ها روشی دقیق‌تر برای ایجاد طرح‌هایی ارائه می‌کنند که می‌توان از این طرح‌ها آن‌ها برای ساخت اشیا استفاده کرد.
سینتکس ایجاد کلاس ها در جاوا اسکریپت
در جاوا اسکریپت از کلمه کلیدی class برای ایجاد کلاس‌ها استفاده می‌کنیم. کلاس مانند طرحی برای ایجاد اشیا در کدهای ما است. نامی که به کلاس می‌دهیم دلخواه است ولی بهتر است حرف اول آن، کلمات بزرگ باشند. مثال زیر سینتکس class در جاوا اسکریپت را نشان می‌دهد:
class Classname {
constructor() {
// ...things you want to do when a new object is created
}
}
تشریح ساختار کد بالا به صورت است:
- class به ایجاد طرح اولیه کمک می‌کند.
- Classname همان نام کلاس مدنظر است.
- constructor نوعی تابع ویژه است که وقتی شی جدید از این کلاس ساخته می‌شود، آن را تنظیم می‌کند.
ایجاد کلاس جاوا اسکریپت
بیایید کلاسی ایجاد کنیم که نشان‌دهنده دانش‌آموزان در یک کلاس باشد. این کلاس اطلاعاتی در مورد نام، نام خانوادگی، سن و شماره دانش‌آموزی افراد خواهد داشت.
class Student {
constructor(firstNameInput, lastNameInput, ageInput, rollNoInput) {
firstName = firstNameInput;
lastName = lastNameInput;
age = ageInput;
rollNo = rollNoInput;
}
}
در کد بالا، ما کلاسی به نام Student می‌سازیم که طبق قرارداد شروع نام کلاس‌ها با حروف بزرگ است. در داخل کلاس، ما چهار ویژگی را تعریف می‌کنیم:
- firstName
- LastName
- age
- rollNo
تابع constructor یا به اصطلاح تابع سازنده در جاوا اسکریپت مانند مجموعه‌ای از دستورالعمل‌ها برای ایجاد دانش‌آموز جدید است. این تابع چهار پارامتر ورودی را می‌گیرد و آن‌ها را به ویژگی‌های مربوطه اختصاص می‌دهد.
در این رابطه کلمه کلیدی this در جاوا اسکریپت برای جلوگیری از سردرگمی بین ویژگی‌های کلاس و پارامترهای ارسال شده به سازنده استفاده می‌شود. شایان‌ذکر است که نام ویژگی‌ها در کلاس و نام پارامترها در سازنده می‌تواند متفاوت باشد که مثال زیر برای بیان این هدف است:
class Student {
constructor(firstNameInput, lastNameInput, ageInput, rollNoInput) {
firstName = firstNameInput;
lastName = lastNameInput;
age = ageInput;
rollNo = rollNoInput;
}
}
متدهای کلاس در جاوا اسکریپت
اکنون که کلاس دانش‌آموزشی خود را با جزئیات مختلف داریم در این بخش می‌خواهیم به شما نشان دهیم که چگونه می‌توانیم از این کلاس برای نشان دادن اطلاعات استفاده کنیم. اینجاست که متدهای کلاس در جاوا اسکریپت وارد عمل می‌شوند و مثال زیر برای بیان این هدف است:
class Student {
constructor(firstNameInput, lastNameInput, ageInput, rollNoInput) {
firstName = firstNameInput;
lastName = lastNameInput;
age = ageInput;
rollNo = rollNoInput;
}
name() {
return `The student's name is ${firstName} ${lastName}`;
}
}
در مثال بالا، متدی به نام name وجود دارد. وقتی این متد فراخوانی می‌شود، رشته‌ای حاوی نام و نام خانوادگی دانش‌آموز را به ما می‌دهد.
انواع متدهای کلاس در جاوا اسکریپت
متدهای کلاس در جاوا اسکریپت به طور کلی به سه نوع گروه زیر تقسیم می‌شوند:
- متدهای نمونه
- متدهای استاتیک
- متدهای Getter و Setter
ما هر یک از این انواع را با مثال‌های بیشتری در بخش‌های بعدی این مطلب از مجله سبزلرن بررسی خواهیم کرد.
استفاده از کلاس در جاوا اسکریپت
اکنون که کلاس خود را در جاوا اسکریپت تعریف کرده‌ایم، قدم بعدی استفاده از آن است. با این حال، کلاس‌ها در جاوا اسکریپت مانند طرح‌های اولیه هستند و ما نمی‌توانیم مستقیماً از آن‌ها استفاده کنیم. در عوض، ما باید شی را بر اساس آن طرح ایجاد کنیم.
شی در جاوا اسکریپت مانند عنصری مستقل است که با استفاده از طراحی کلاس ایجاد شده که خواص و ویژگی‌های خاص خود را دارد. مثال زیر برای بیان این هدف است:
var s1 = new Student('Peter', 'Parker', 16, 48);
در کد بالا، شئ به نام s1 بر اساس کلاس Student ایجاد می‌شود. کلمه کلیدی new طرح کلاس را می‌گیرد و از آن یک شی واقعی می‌سازد. مقادیر (‘Peter’, ‘Parker’, 16, 48) به سازنده کلاس ارسال می‌شود و جزئیاتشی جدید را پر می‌کند. اکنون، s1 دانش‌آموزی خاص با مجموعه‌ای از ویژگی‌های منحصربه‌فرد خود است.
متد سازنده در جاوا اسکریپت
متد constructor یا به اصطلاح فارسی متد سازنده مانند مجموعه دستورالعملی خاص در کلاس های جاوا اسکریپت است. هنگامی‌که شیئی از کلاس در جاوا اسکریپت ایجاد می‌شود، این متد به طور خودکار برای تنظیم اشیا فراخوانی می‌شود. اگر کلاس جاوا اسکریپت بدون هیچ سازنده صریحی ایجاد شود، همچنان نوعی کلاس خالی ایجاد خواهد کرد. در اینجا سینتکس استفاده از متد سازنده آورده شده است:
constructor(){
// ...things you want to do when an object is created
}
جزئیات کد بالا به صورت زیر است:
- constructor
نوعی کلمه کلیدی است که به جاوا اسکریپت می‌گوید که این یک متد سازنده ویژه است.
- ()
ممکن است حاوی پارامترهایی (ورودی) باشد که می‌خواهید در تنظیم شی استفاده کنید.
- {}
جایی است که شما دستورالعمل‌هایی را برای آنچه باید هنگام ایجاد یک شی اتفاق بیفتد را قرار می‌دهید.
مثال زیر برای بیان این هدف است:
class Programming {
constructor() {
console.log(`Programming class is called`);
}
}
let p1 = new Programming();
// Output: Programming class is called
در مثال بالا، کلاسی به نام «Programming» با متد سازنده داریم. وقتی یک شی p1 از این کلاس ایجاد می‌کنیم، به طور خودکار متد سازنده را راه‌اندازی می‌کند و در کنسول پیغام خروجی Programming class is calle را مشاهده می‌کنید.
گسترش کلاس در جاوا اسکریپت
یکی از مفاهیم قدرتمند در امور شی گرایی در جاوا اسکریپت، وراثت است. وراثت به ما اجازه می‌دهد تا کلاس جدیدی ایجاد کنیم که تمام ویژگی‌های یک کلاس موجود را به ارث می‌برد و اساساً روی آن ویژگی‌های منحصربه‌فرد خود را ایجاد می‌کند.
برای اینکه یک کلاس در جاوا اسکریپت از کلاس دیگری ویژگی به ارث ببرد، از کلمه کلیدی «extends» استفاده می‌کنیم که مثال زیر این موضوع را نشان می‌دهد:
class Coder extends Student {
constructor(firstNameInput, lastNameInput, ageInput, rollNoInput, language) {
super(firstNameInput, lastNameInput, ageInput, rollNoInput);
this.language = language;
}
displayLanguage() {
return `${firstName} codes in ${language}`;
}
}
let c1 = new Coder();
در مثال بالا، کلاسی به نام Coder ایجاد کرده‌ایم که کلاس Student را گسترش می‌دهد یا به اصطلاح ویژگی‌های آن را به ارث می‌برد. متد سازنده در Coder مسئول تنظیم شی و اطمینان از اینکه ویژگی‌های به ارث رسیده از Student با استفاده از super مقداردهی اولیه می‌شوند، به کار گرفته شده است. علاوه بر این، ما نوعی ویژگی جدید language به Coder اضافه کرده‌ایم. متد displayLanguage مختص Coder است و زبانی را که Coder با آن می‌نویسد را نشان می‌دهد.
بنابراین، با این تنظیمات، Coder نه‌تنها ویژگی‌های خاص خود را دارد، بلکه همه‌چیز را از Student به ارث می‌برد. رویکرد مثال بالا راه‌حل قدرتمندی برای سازمان‌دهی و استفاده مجدد از کد به روشی ساختاریافته است.
فیلدهای کلاس در Javascript
در کلاس های جاوا اسکریپت، فیلدها مانند محفظه یا کانتینرهایی هستند که اطلاعات را در خود نگه می‌دارند. دو نوع فیلد اصلی وجود دارد که در ادامه این فیلدها معرفی شده‌اند.
فیلدهای نمونه
فیلدهای نمونه که خود شامل دو نوع زیر هستند:
- فیلد نمونه خصوصی
به طور پیش‌فرض، ویژگی‌های کلاس در جاوا اسکریپت عمومی هستند، به این معنی که می‌توان از خارج از کلاس به آن‌ها دسترسی داشت و تغییر داد. برای خصوصی کردن آن‌ها (طوری که فقط در کلاس قابل‌دسترسی باشد)، قبل از نام متغیر یک «#» اضافه می‌کنیم.
- فیلد نمونه عمومی
ویژگی‌های کلاس به طور پیش‌فرض عمومی هستند. شما آن‌ها را به سادگی با بیان نام متغیر در کلاس اعلام می‌کنید.
مثال زیر برای درک فیلدهای نمونه اهمیت بالایی دارد:
class Person {
// Private instance field
#age = 0;
// Public instance field
name = "";
constructor(name) {
this.name = name;
}
birthday() {
this.#age++;
}
displayAge() {
return `Age: ${this.#age}`;
}
}
let p1 = new Person('Jon');
console.log(p1.name); // Jon
p1.name = 'Peter';
console.log(p1.name); // Peter
p1.birthday();
console.log(p1.displayAge()); // Age: 1
p1.age = 10; // This will result in an error as we cannot access private fields outside the class.
در مثال بالا age# نوعی فیلد خصوصی و name فیلد عمومی است. ما می‌توانیم بر اساس تنظیمات حریم خصوصی آن‌ها را دست‌کاری کنیم و به آن‌ها دسترسی داشته باشیم.
فیلدهای استاتیک
در کلاس های جاوا اسکریپت، فیلدهای ثابت یا استاتیکی وجود دارد که در تمام نمونه‌های یک کلاس به اشتراک گذاشته می‌شوند. مانند فیلدهای نمونه، فیلدهای استاتیک می‌توانند عمومی یا خصوصی باشند.
- فیلد استاتیک خصوصی
یک فیلد ثابت خصوصی با افزودن کلمه کلیدی static قبل از اعلام فیلد نمونه خصوصی ایجاد می‌شود. این باعث می‌شود که فقط در کلاس قابل‌دسترسی باشد.
- فیلد استاتیک عمومی
یک فیلد ثابت عمومی با افزودن کلمه کلیدیstatic قبل از نام متغیر ایجاد می‌شود. این باعث می‌شود که آن را از هرجایی در دسترس قرار دهید، نه فقط در داخل کلاس.
مثال زیر برای درک بهتر فیلدهای استاتیک کلاس در جاوا اسکریپت اهمیت زیادی دارد:
class Person {
// Private static field
static #age = 0;
// Public static field
static name = "";
constructor(name) {
this.name = name;
}
birthday() {
this.#age++;
}
displayAge() {
return `Age: ${this.#age}`;
}
}
let p1 = new Person('Jon');
console.log(p1.name); // Jon
console.log(p1.#age); // Displays an error
در مثال بالا، #age فیلد ثابت خصوصی است، به این معنی که فقط در کلاس Person قابل‌دسترسی است. تلاش برای دسترسی به آن با استفاده از «p1.#age» منجر به خطا می‌شود. از سوی دیگر، name یک فیلد ثابت عمومی است، بنابراین همان‌طور که در p1.name نشان داده شده است، می‌توان از هرجایی به آن دسترسی داشت.
متدهایGetters و Setters در جاوا اسکریپت
تا به اینجای مطلب، ما ایجاد کلاس‌ها، اختصاص ویژگی‌ها، ساخت متدها و ایجاد اشیا را پوشش داده‌ایم. با این حال، دسترسی و اصلاح خصوصیات خصوصی در کلاس جاوا اسکریپت به طور مستقیم یک روش معمول نیست. برای رسیدگی به این موضوع، از متدهای دریافت‌کننده و تنظیم‌کننده استفاده می‌کنیم.
متد Getter در جاوا اسکریپت
متدهای Getter یا به اصطلاح متد دریافت‌کننده به ما امکان دسترسی یا بازیابی مقادیر ویژگی‌ها در کلاس‌های جاوا اسکریپت را می‌دهند. با افزودن کلمه کلیدی «get» قبل از نام متد، متد دریافت‌کننده را می‌توان اعلام کرد.
متد Setters در جاوا اسکریپت
متدهای Setter یا متد تنظیم‌کننده به ما این امکان را می‌دهند که مقادیر ویژگی‌ها را در کلاس‌های جاوا اسکریپت تنظیم کنیم یا تغییر دهیم. با افزودن کلمه کلیدی «set» قبل از نام متد، می‌توانیم نوعی متد تنظیم‌کننده را اعلام کنیم.
مثال زیر نحوه استفاده از متد دریافت‌کننده و تنظیم‌کننده را نشان می‌دهد:
class Programming {
constructor() {
console.log('Programming class is called');
}
// Getter
get getLanguage() {
return this.language;
}
// Setter
set setLanguage(x) {
this.language = x;
}
}
let p1 = new Programming();
console.log(p1.getLanguage);
// Output: undefined
p1.setLanguage = 'JavaScript'; // This sets the value of language to 'JavaScript'
console.log(p1.getLanguage);
// Output: JavaScript
در مثال بالا، «getLanguage» متد دریافت‌کننده است که مقدار ویژگی «language» را بازیابی می‌کند. همچنین «setLanguage» متد تنظیم‌کننده است که به ما امکان می‌دهد مقداری به ویژگی language اختصاص دهیم. پس از تنظیم آن بر روی مقدار JavaScript، فراخوانی getLanguage در کنسول خروجی JavaScript را به ما می‌دهد.
Hoisting در جاوا اسکریپت
Hoisting در جاوا اسکریپت فرایندی است که در آن اعلان‌های متغیرها، توابع یا کلاس‌ها قبل از اجرای کد به بالای محدوده خود منتقل می‌شوند و درک مفهوم آن برای استفاده صحیح از کلاس در جاوا اسکریپت اهمیت بالایی دارد. برخلاف توابع، کلاس‌های جاوا اسکریپت در بالای محدوده قرار نمی‌گیرند. این بدان معناست که شما نمی‌توانید به کلاس جاوا اسکریپت قبل از اعلام آن در برنامه دسترسی داشته باشید. مثال زیر برای این هدف است:
let p1 = new Programming();
// Output: ReferenceError: Programming is not defined
class Programming {
constructor() {
console.log(`Programming class is called`);
}
}
در مثال بالا، تلاش برای ایجاد نمونه از کلاس Programming قبل از اعلان آن با «let p1 = new Programming();» منجر به خطای «ReferenceError» می‌شود زیرا کلاس در فاقد ویژگی Hoisting است. همیشه مطمئن شوید که یک کلاس را قبل از استفاده از آن در کد خود اعلام کرده‌اید.
حالت سخت‌گیرانه در جاوا اسکریپت
یکی دیگر از مفاهیمی که در استفاده از کلاس‌ها باید به آن دقت کنیم حالت سخت‌گیرانه یا use-strict است. به زبان ساده، حالت سخت‌گیرانه در جاوا اسکریپت که در ES5 معرفی شد، به مفسر دستور می‌دهد تا کد جاوا اسکریپت را به شیوه‌ای سخت‌گیرانه‌تر اجرا کند. شیوه کار این حالت به صورت زیر است:
- رسیدگی به خطا
حالت سخت‌گیرانه خطاهای پنهان در کد جاوا اسکریپت را با پیام‌های خطای صریح جایگزین کرده و شناسایی و رفع مشکلات را آسان‌تر می‌کند.
- محدودیت‌های نحوی
استفاده حالت سخت‌گیرانه محدودیت‌های نحوی را در کدنویسی اضافه می‌کند و از اعلان‌های خاصی که در کد جاوا اسکریپت در حالت غیر سخت‌گیرانه مجاز هستند، جلوگیری می‌کند.
- بهینه‌سازی
حالت سخت‌گیرانه به دلیل بررسی دقیق‌تر، برنامه را بهینه‌تر می‌کند و کمک خواهد کرد تا مشکلات احتمالی را زودتر تشخیص دهید.
کلاس در جاوا اسکریپت همیشه تحت حالت سخت‌گیرانه کار می‌کنند. این بدان معناست که کدهای داخل کلاس‌های جاوا اسکریپت از قوانین حالت سخت‌گیرانه پیروی کرده و محیط کدنویسی قوی‌تر و مقاوم‌تر از خطا را تضمین می‌کنند.
در ادامه این مطلب چند سؤال متداول در رابطه با کلاس در جاوا اسکریپت برای درک بهتر آن‌ها ارائه خواهیم کرد.
سوالات متداول
Class در جاوا اسکریپت چیست؟
کلاس جاوا اسکریپت به عنوان طرح یا الگو برای ایجاد اشیاء با ویژگی‌ها و اقدامات مشابه عمل می‌کند. کلاس در اصل داده‌ها و کدهای مرتبط را سازمان‌دهی می‌کند و یک رویکرد ساختاریافته برای برنامه‌نویسی شی گرا در جاوا اسکریپت ارائه می‌دهد.
چگونه کلاس جاوا اسکریپت را تعریف کنیم؟
برای تعریف کلاس در جاوا اسکریپت، از کلمه کلیدی class و به دنبال آن نام کلاس و متد خاصی به نام سازنده که مسئول مقداردهی اولیه خصوصیات شی است، استفاده می‌کنیم. مثال زیر برای بیان این هدف است:
class MyClass {
constructor() {
// constructor logic
}
}
چگونه شی از کلاس جاوا اسکریپت ایجاد کنیم؟
برای ایجاد یک شی از کلاس جاوا اسکریپت، از کلمه کلیدی new به همراه نام کلاس و هر آرگومان سازنده موردنیاز استفاده می‌کنیم. این فرآیند که به عنوان نمونه‌سازی شناخته می‌شود، یک نمونه منحصربه‌فرد از کلاس را ایجاد می‌کند. مانند مثال زیر:
const myObject = new MyClass();
آیا کلاس جاوا اسکریپت می‌تواند از کلاس دیگری ویژگی یا خصوصیات ارث‌بری کند؟
بله، کلاس‌های جاوا اسکریپت از وراثت از طریق کلمه کلیدی extends پشتیبانی می‌کنند. وراثت یک کلاس فرزند را قادر می‌سازد تا ویژگی‌ها و متدها را از کلاس والد به ارث ببرد و ساختار سلسله مراتبی را تقویت کند. کلاس فرزند می‌تواند قابلیت‌های کلاس والد را گسترش دهد و از آن استفاده کند. مثال زیر برای این هدف است:
class ChildClass extends ParentClass {
constructor() {
super();
// child class constructor logic
}
}
متدهای دریافت‌کننده و تنظیم‌کننده در کلاس جاوا اسکریپت چه چیزی هستند؟
متدهای دریافت‌کننده و تنظیم‌کننده دسترسی و اصلاح ویژگی‌ها در کلاس جاوا اسکریپت را تسهیل می‌کنند. دریافت‌کننده‌ها مقادیر ویژگی‌ها را بازیابی می‌کنند، درحالی‌که تنظیم‌کننده‌ها آن‌ها را تغییر می‌دهند. این متدها در اصل امکان دسترسی کنترل‌شده و دست‌کاری ویژگی‌ها را فراهم می‌کنند. مثال زیر برای بیان این هدف مهم است.
class MyClass {
constructor() {
this._myAttribute = 0;
}
get myAttribute() {
return this._myAttribute;
}
set myAttribute(value) {
this._myAttribute = value;
}
}
یادگیری جاوا اسکریپت از مبتدی تا حرفه‌ای
کلاس‌ها در جاوا اسکریپت از مفاهیم مهمی هستند که با استفاده از آن‌ها می‌توان کدهای تمیزتر و بهتری نوشت. در مطلب فوق از مجله سبز لرن اطلاعاتی کامل و جامعی در رابطه با مفهوم کلاس در جاوا اسکریپت با رویکردی آموزش محور و عملی ارائه شد. زبان برنامه‌نویسی جاوا اسکرییپت دارای پیچیدگی‌های خاص خود بوده که تسلط بر همه این پیچیدگی‌ها نیازمند تلاش و برنامه‌ریزی زیادی است. یادگیری بخشی از مفاهیم جاوا اسکریپت از طریق مقالات و یا دوره‌های رایگان موجود در اینترنت امکان‌پذیر است اما برای تسلط بهتر و قدم گذاشتن به صورت حرفه‌ای در جاوا اسکریپت، بهتر است از دوره‌های آموزش حرفه‌ای استفاده کنید. دوره آموزش صفر تا صد جاوا اسکریپت سبزلرن یکی از این دوره‌هایی است که به صورت کاملاً عملی و کاربردی کاربران را با برنامه‌نویسی جاوا اسکریپت آشنا می‌کند و کاربران می‌توانند در کنار تلاش و کوشش با تکیه به محتوای آموزشی موجود در آن، اولین و مهم‌ترین قدم را در راستای حرفه‌ای شدن در جاوا اسکریپت بردارند.
پیشنهاد مطالعه
خیلی ممنون بابات اموزش های مفیدتون
🙏❤️