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

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


۲۹ دی ۱۳۹۸
رضا احمدی
763 بازدید
دسته بندی : JavaScript , برنامه نویسی

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

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

مقدمه :

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

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

سوال :

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

استفاده از class :

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

  1. class MyClass {
  2.   // class methods
  3.   constructor() { ... }
  4.   method1() { ... }
  5.   method2() { ... }
  6.   method3() { ... }
  7.   ...
  8. }

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

یک مثال :

  1. class User {
  2.  
  3.   constructor(yname) {
  4.     this.name = yname;
  5.   }
  6.  
  7.   sayHi() {
  8.     alert(this.name);
  9.   }
  10.  
  11. }
  12.  
  13. // Usage:
  14. let user = new User("John");
  15. user.sayHi();

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

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

this چیست؟

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

  1.  constructor(name) {
  2.     this.name = name;
  3.   }

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

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

  1. class User {
  2.   constructor(name) { this.name = name; }
  3.   sayHi() { alert(this.name); }
  4. }
  5.  
  6. // class is a function
  7. alert(typeof User); // function
  8.  
  9. // ...or, more precisely, the constructor method
  10. alert(User === User.prototype.constructor); // true
  11.  
  12. // The methods are in User.prototype, e.g:
  13. alert(User.prototype.sayHi); // alert(this.name);
  14.  
  15. // there are exactly two methods in the prototype
  16. alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

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

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

تفاوت class و function :

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

  1. // rewriting class User in pure functions
  2.  
  3. // 1. Create constructor function
  4. function User(name) {
  5.   this.name = name;
  6. }
  7. // any function prototype has constructor property by default,
  8. // so we don't need to create it
  9.  
  10. // 2. Add the method to prototype
  11. User.prototype.sayHi = function() {
  12.   alert(this.name);
  13. };
  14.  
  15. // Usage:
  16. let user = new User("John");
  17. user.sayHi();

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

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

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

  1. class User {
  2.   constructor() {}
  3. }
  4.  
  5. alert(typeof User); // function
  6. User(); // Error: Class constructor User cannot be invoked without 'new'

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

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

مطالب مرتبط

 دیدگاهتان را بنویسید   

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

0 دیدگاه ارائه شده برای "Class در جاوا اسکریپت قسمت دوم"

  1. Avatar محمد گفت:

    دمت گرم واقعا مفید و کامل بود
    اجرتون با الله تعالی

  2. Avatar siavash گفت:

    آقا دمت گرم چرا ادامه نمیدی؟

    1. رضا احمدی رضا احمدی گفت:

      قربونت.ادامه داره ولی فعلا وقت نوشتن ندارم….

  3. Avatar احمدرضا گفت:

    سلام وقتتون بخیر من دانشجو هستم
    برای امتحان پایان ترم گفتن که ۲ تا پروژه باعنوان file editorو chatبا کیوت ارائه بدیم ممنون میشم راهنمایی کنین

    1. رضا احمدی رضا احمدی گفت:

      سلام
      صفحه زیر میتونه راهنمای خوبی برای شما باشه.
      WIP-How to create a simple chat application

      موفق باشید.

  4. Avatar کسری بخشایی گفت:

    سفارش پروژه – برنامه نویسی
    نام و نام خانوادگی : کسری بخشایی
    تلفن : ۰۹۳۹۷۹۴۱۵۸۸
    ایمیل :ksrbakhshaei1376@gmail.com


    plants and zombie

    هزینه پیشنهادی: ۲۰۰۰۰۰ تومان – زمان پیشنهادی ۱ هفته
    file:https://mrzx.ir/wp-content/uploads/2020/08/project.pdf

  5. Avatar جمشیدیان گفت:

    سلام. میشه لطفا فایل شبیه سازی با ادوات الکترونیکی (فایل پروتئوس یا التیوم) این پروژه را برام بفرستید؟ خواهش میکنم، احتیاج دارم

    1. رضا احمدی رضا احمدی گفت:

      با سلام
      شماتیک مدار بصورت کامل توضیح داده شده . اونو توی پروتئوس رسم کنیدو و اجرا کنید .

  6. Avatar ALI REZAIE گفت:

    سفارش پروژه – برنامه نویسی
    نام و نام خانوادگی : ALI REZAIE
    تلفن : ۰۹۳۵۹۳۰۸۰۸۳
    ایمیل :alirfabad@gmail.com


    Qt login by google acount
    سلام و عرض ادب… یک لاگین میخام به gui اضافه کنم… البته با استفاده از گوگل اکانت… داخل نرم افار از یک api گوگل استفاده کردم قلش هر کاربر باید لاگین کنه… بعد اینکه لاگین کرد یا عکسش یا اسمش داخل تولبار نشون داده بشه…
    هزینه پیشنهادی: تومان – زمان پیشنهادی ۱ هفته
    file:

  7. Avatar الی گفت:

    عالی بود ممنون

  8. Avatar الی گفت:

    سلام من میخوام این پروژه رو بسازم اما نمی تونم بفهمم بعضی قطعات مثل J7 کارش چی هست؟ و اصلا چه قطعه ای باید بخرم. ممنون میشم راهنماییم کنید

    1. رضا احمدی رضا احمدی گفت:

      سلام
      قطعه j7 یک کانکتور پین هدر نری است که به پورت B میکرو وصل شده. این قطعه در این پروژه کاربردی ندارد و فقط برای استفاده های ممکن در آینده بر روی برد قرار گرفته تا اگر نیاز به تغییر جزیی در پروژه بود برنامه میکرو را تغییر داده و از این پورت استفاده شود.
      پین هدر 40*1 صاف نری

  9. Avatar الی گفت:

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