Class در جاوا اسکریپت

کلاس و برنامه نویسی شی گرا در جاوا اسکریپت

در این مقاله در مورد اشیا و کلاس ها و نحوه پیاده سازی یک کلاس با استفاده از کلمه class و همچنین با استفاده از تابع مطالبی را بیان می کنیم.

کلمه کلیدی class یک کلمه ای است یه شما توانایی ایجاد یک کلاس در جاوا اسکریپت را می دهد.که می توانید با استفاده از آن اشیا زیاد و کار بردی با قابلیت توسعه و تغییر را ایجاد کنید.

مقدمه :

اگر شما یک برنامه نویس به زبان های برنامه نویسی شی گرا مانند سی پلاس پلاس یا جاوا و … باشید می دانید که کلاس ها هسته برنامه نویسی شی گرا ( Object Oriented Programming ) هستند.

برای تعریف یک کلاس در جاوا اسکریپت می توان از کلمه کلیدی class استفاده کرد. این کلمه کلیدی در نسخه ECMAScript2015 (ES6) به جاوا اسکریپت اضافه شد .

سوال :

آیا تا قبل از سال 2015 نمیشد در جاوا اسکریپت یک کلاس ایجاد کرد؟
در پاسخ باید بگویم که بله این کلمه کلیدی فقط به این خاطر اضافه شده که کمی ساخت یک کلاس و آبجکت را راحت تر کند. در ادامه میبینیم که بدون این کلمه کلیدی میتوان مفاهیم آبجکت گرایی رو پیاده سازی کرد.و درواقع خود کلاس یک جور function هست.

استفاده از class :

بطور ساده اگر بخواهیم یک کلاس در جاوا اسکریپت پیاده سازی کنیم مانند زیر عمل می کنیم.

```
class MyClass {
```
```
  // class methods
```
```
  constructor() { ... }
```
```
  method1() { ... }
```
```
  method2() { ... }
```
```
  method3() { ... }
```
```
  ...
```
```
}
```

هر کلاسی یک constructor یا تابع سازنده دارد. این تابع هنگامی که یک شی از این کلاس را ساختیم ( یک شی با کلمه کلیدی new ساخته میشود) بطور خود کار اجرا می شود ؛ و ما نمی توانیم آن را صدا بزنیم یا از صدا زدن آن جلو گیری کنیم. اصطلاحا این تابع تولد شی است و چیزی که متولد شده رو نمی توان دوباره به وجود آورد.

یک مثال :

```
class User {
```
```
 
```
```
  constructor(yname) {
```
```
    this.name = yname;
```
```
  }
```
```
 
```
```
  sayHi() {
```
```
    alert(this.name);
```
```
  }
```
```
 
```
```
}
```
```
 
```
```
// Usage:
```
```
let user = new User("John");
```
```
user.sayHi();
```

در اینجا یک کلاس به نام User ساخته شده که یک متد به نام sayHi() و یک عضو به نام name دارد. در هنگام ایجاد این کلاس همانطور که در خط 14 می بینید یک داده به این کلاس می دهیم و این داده درون این عضو قرار می گیرد.

در تا بع سازنده کلاس با کلمه کلیدی this یک عضو جدید به این کلاس به نام name اورده شده که مقدار yname به آن نسبت داده شده.

this چیست؟

this درواقع یک اشاره گر به خود کلاس است که برای دسترسی به متدها و اعضای کلاس از آن استفاده می شود.برای مثال در تابع سازنده کلاس اگر به صورت زیر بود می توان عملگر this را بهتر درک کرد.

```
 constructor(name) {
```
```
    this.name = name;
```
```
  }
```

در اینجا متغییر name عنوان پارامتر پاس داده می شود به تابع سازنده در درون عضوی از کلاس که همین نام را دارد ریخته می شود برای درستری به عضو کلاس استفاده از this ضروری است.

چه اتفاقاتی در یک کلاس می افتد :

```
class User {
```

  constructor(name) { this.name = name; }

```
  sayHi() { alert(this.name); }
```
```
}
```
```
 
```
```
// class is a function
```
```
alert(typeof User); // function
```
```
 
```

// ...or, more precisely, the constructor method

alert(User === User.prototype.constructor); // true

```
 
```

// The methods are in User.prototype, e.g:

alert(User.prototype.sayHi); // alert(this.name);

```
 
```

// there are exactly two methods in the prototype

alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

در کد بالا ویژگی های متدها و اعضا این کلاس بیان شده.در خط 7 اگر ببینید متوجه می شوید که بعد از اجرای این خط یک پیغام با محتوای function ظاهر می شود زیرا در تابع alert گفته شده نوع User را برگردان همانطور که در ابتدا گفتیم کلاس در واقع نوعی فانکشن است.

با اجرای خط 16 می توانیم ببینیم که در اینجا دقیقا دو نمونه اولیه از متدهای این کلاس وجود دارد نام این متد ها constructor ,sayHi می باشد.

تفاوت class و function :

همان کلاس User این بار با تابع پیاده سازی شده:

// rewriting class User in pure functions

```
 
```
```
// 1. Create constructor function
```
```
function User(name) {
```
```
  this.name = name;
```
```
}
```

// any function prototype has constructor property by default,

```
// so we don't need to create it
```
```
 
```
```
// 2. Add the method to prototype
```
```
User.prototype.sayHi = function() {
```
```
  alert(this.name);
```
```
};
```
```
 
```
```
// Usage:
```
```
let user = new User("John");
```
```
user.sayHi();
```

نکته اول prototype درواقع یک ویژگی است که تمام توابع در جاوا اسکریپت آن را درند حتی اگر از آن استقاده نکینم و با استفاده از آن میتوانیم به یک شی یا تابع یک تابع یا عضوی را نسبت دهیم و از این به بعد آن تابع ( عضو) قسمتی از این شی است.

در واقع در class هنگامی که ما یک متد جدید در کلاس مانند sayHi اضافه میکنیم این متد در صفت prototype ذخیره می شود (این اتفاق در پشت قضیه و توسط مفسر اتفاق می افتد).

اما یک تفاوت عمده بین class و function است . شما می توانید یک کلاسی که با تابع مانند بالا نوشته اید بطور مستقیم اجرا کنید یعنی بنویسید User(); وا اتفاقاتی ک باید رخ می دهد. اما در کلاسی که با کلمه class نوشته شده نمیتوان آن را بصورت مستقیم اجرا کرد و باید یک شی از ان را با کلمه new ساخت.

```
class User {
```
```
  constructor() {}
```
```
}
```
```
 
```
```
alert(typeof User); // function
```

User(); // Error: Class constructor User cannot be invoked without 'new'

در خط آخر کلاس را بدون کلمه new خواستیم اجرا کنیم که با ارور مواجه می شویم.

ادامه دارد در قسمت بعد با دستورات و نحوه نوشت کلاس بیشتر آشنا می شویم و بحث وراثت در کلاس را پیش می بریم…

ali | ۰۲ فروردین ۱۴۰۰

سلام
کلاس و آبجکت ساز از لحاظ کاربرد چه تفاوتی باهم دارن؟

رضا احمدی | ۰۲ فروردین ۱۴۰۰

سلام
منظورتون رو از آبجکت ساز متوجه نمیشم!؟
ولی در کل کلاس به طور مستقیم تو برنامه استفاده نمیشه و بعد اینکه کلاس رو پیاده سازی کردیم باید ازش ابجکت(ها) ساخته بشه و توی برنامه با اون اشیا ما کار میکنیم نه خود کلاس.

علیرضا | ۱۸ اردیبهشت ۱۴۰۰

ممنون که به JIT Compiler میگید مفسر 🙂

رضا احمدی | ۰۷ تیر ۱۴۰۰

سلام دوست عزیز
درگیر لغات نباش.
ولی جهت اطلاع شما JIT هر دو جنبه کامپابل و تفسیر رو در خودش جای داده ولی در مرحله اول کد رو تفسیر میکنه…

Class در جاوا اسکریپت - وب سایت رضا احمدی