کلاس‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مرجع جاوا اسکریپت

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

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

تعریف کلاس

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

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

مثال

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

1 class Car {
2   constructor(brand) {
3     this.carname = brand;
4   }
5 }

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

مثال

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

1 class Car {
2   constructor(brand) {
3     this.carname = brand;
4   }
5 }
6 mycar = new Car("Ford");


مشاهدهٔ نتیجه

توجه: متد سازنده زمانی که شی ساخته می‌شود، به طور خودکار فراخوانی می‌شود.

متدها

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

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

مثال

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

 1 class Car {
 2   constructor(brand) {
 3     this.carname = brand;
 4   }
 5   present() {
 6     return "I have a " + this.carname;
 7   }
 8 }
 9 
10 mycar = new Car("Ford");
11 document.getElementById("demo").innerHTML = mycar.present();


مشاهدهٔ نتیجه


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

مثال

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

 1 class Car {
 2   constructor(brand) {
 3     this.carname = brand;
 4   }
 5   present(x) {
 6     return x + ", I have a " + this.carname;
 7   }
 8 }
 9 
10 mycar = new Car("Ford");
11 document.getElementById("demo").innerHTML = mycar.present("Hello");


مشاهدهٔ نتیجه


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

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

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

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

مثال

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

 1 class Car {
 2   constructor(brand) {
 3     this.carname = brand;
 4   }
 5   static hello() {
 6     return "Hello!!";
 7   }
 8 }
 9 
10 mycar = new Car("Ford");
11 
12 //Call 'hello()' on the class Car:
13 document.getElementById("demo").innerHTML = Car.hello();
14 
15 //and NOT on the 'mycar' object:
16 //document.getElementById("demo").innerHTML = mycar.hello();
17 //this would raise an error.


مشاهدهٔ نتیجه


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

مثال

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

 1 class Car {
 2   constructor(brand) {
 3     this.carname = brand;
 4   }
 5   static hello(x) {
 6     return "Hello " + x.carname;
 7   }
 8 }
 9 
10 mycar = new Car("Ford");
11 
12 document.getElementById("demo").innerHTML = Car.hello(mycar);


مشاهدهٔ نتیجه


ارث بری

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

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

مثال

 1 class Car {
 2   constructor(brand) {
 3     this.carname = brand;
 4   }
 5   present() {
 6     return 'I have a ' + this.carname;
 7   }
 8 }
 9 
10 class Model extends Car {
11   constructor(brand, mod) {
12     super(brand);
13     this.model = mod;
14   }
15   show() {
16     return this.present() + ', it is a ' + this.model;
17   }
18 }
19 
20 mycar = new Model("Ford", "Mustang");
21 document.getElementById("demo").innerHTML = mycar.show();


مشاهدهٔ نتیجه


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

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

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

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

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

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

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

مثال

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

 1 class Car {
 2   constructor(brand) {
 3     this.carname = brand;
 4   }
 5   get cnam() {
 6     return this.carname;
 7   }
 8   set cnam(x) {
 9     this.carname = x;
10   }
11 }
12 
13 mycar = new Car("Ford");
14 
15 document.getElementById("demo").innerHTML = mycar.cnam;


مشاهدهٔ نتیجه


توجه: با اینکه getter یک متد است، شما از پرانتز زمانی که می‌خواهید مقادیر ویژگی‌ها را دریافت کنید استفاده نمی‌کنید.

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

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

مثال

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

 1 class Car {
 2   constructor(brand) {
 3     this._carname = brand;
 4   }
 5   get carname() {
 6     return this._carname;
 7   }
 8   set carname(x) {
 9     this._carname = x;
10   }
11 }
12 
13 mycar = new Car("Ford");
14 
15 document.getElementById("demo").innerHTML = mycar.carname;


مشاهدهٔ نتیجه


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

مثال

 1 class Car {
 2   constructor(brand) {
 3     this._carname = brand;
 4   }
 5   get carname() {
 6     return this._carname;
 7   }
 8   set carname(x) {
 9     this._carname = x;
10   }
11 }
12 
13 mycar = new Car("Ford");
14 mycar.carname = "Volvo";
15 document.getElementById("demo").innerHTML = mycar.carname;


مشاهدهٔ نتیجه


جابه‌جایی

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

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

مثال

 1 //You cannot use the class yet.
 2 //mycar = new Car("Ford")
 3 //This would raise an error.
 4 
 5 class Car {
 6   constructor(brand) {
 7     this.carname = brand;
 8   }
 9 }
10 
11 //Now you can use the class:
12 mycar = new Car("Ford")


مشاهدهٔ نتیجه


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

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

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

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

مثال

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

1 class Car {
2   constructor(brand) {
3     i = 0;
4     this.carname = brand;
5   }
6 }
7 var mycar = new Car("Ford");


مشاهدهٔ نتیجه


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

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

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

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


منابع آموزشی