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

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

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

در ادامه مقاله قسمت قبلی کلاس (class) و اشیا در جاوا اسکریپت اینبار به مباحث پیشرفته تر و کاربردی تر می پردازیم.

تعریف یک class به عنوان یک عبارت

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

  1. let User = class {
  2.   sayHi() {
  3.     alert("Hello");
  4.   }
  5. };
  6. User.sayHi();

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

get , set

برای کار با اشیا و به منظور تنظیم کردن مقدار یک عضو و در یافت مقدار یک عضو دو کلمه کلیدی به نام set , get وجود دارد . به مثال زیر دقت کنید:

  1. class User {
  2.  
  3.   constructor(name) {
  4.     // invokes the setter
  5.     this.name = name;
  6.   }
  7.  
  8.   get name() {
  9.     return this._name;
  10.   }
  11.  
  12.   set name(value) {
  13.     if (value.length < 4) {
  14.       alert("Name is too short.");
  15.       return;
  16.     }
  17.     this._name = value;
  18.   }
  19.  
  20. }
  21.  
  22. let user = new User("John");
  23. alert(user.name); // John
  24.  
  25. user = new User(""); // Name too short.

در مثال بالا با استقاده از get و set مقدار متغییر _name خوانده شده و تنظیم شده. دقت نمایید که در کانستراکتور کلاس با استفاده از دستور this.name درواقع متد set name(value); فراخوانی شده .

وراثت :

در واقع وراثت یک راهی است برای دسترسی یک کلاس به یک کلاس دیگر.است ب نحوی که کلاس پسر به متد های کلاس پدر دسترسی دارد و در خودش متد ها و اعضا جدید را شامل می شود.

در جاوا اسکریپت برای مبحث وراثت کلمه کلیدی extends وجود دارد. بدین صورت:
class Child extends Parent

بطور مثال

  1. //base class
  2. class Shape {
  3.     constructor(name,x,y){
  4.         this.name=name;
  5.         this.x=x;
  6.         this.y=y;
  7.     }
  8.  
  9.     get name()
  10.     {
  11.         return this._name;
  12.     }
  13.  
  14.     set name(name)
  15.     {
  16.         this._name=name;
  17.     }
  18. }
  19.  
  20. //child class
  21. class Rectangle extends Shape{
  22.     constructor(x,y,w,h){
  23.         super('Rectangle',x,y);
  24.         this.w=w;
  25.         this.h=h;        
  26.     }
  27.  
  28.     area()
  29.     {
  30.         return this.w * this.h;
  31.     }
  32. }
  33.  
  34. // another child
  35. class Circle extends Shape{
  36.     constructor(x,y,r)
  37.     {
  38.         super('Circle',x,y);
  39.         this.r=r;
  40.     }
  41.  
  42.     area()
  43.     {
  44.         let ar= this.r*this.r*3.14159;
  45.         return ar;
  46.     }
  47. }
  48.  
  49. let ob1 =new Circle(4,10,5);
  50. let ob2=new Rectangle(20,25,4,3);
  51.  
  52. alert('ob1 name:'+ob1.name +' and ob2 name:'+ob2.name);//ob1 name:Circle and ob2 name:Rectangle
  53. alert('ob1 area:'+ob1.area() +' and ob2 area:'+ob2.area());//ob1 area:78.53975 and ob2 area:12

در مثال بالا ابتدا یک کلاس به نام shape ساخته شده که سه عضو به نام x,y,name دارد. سپس دو کلاس پیاده سازی شده که هر دو مشخصات کلاس shape را به ارث می برند این دو کلاس Circle , Rectangle هستد.

دو شی از این دو کلاس به نام ob1 , ob2 ساخته شده و همانطور که مشخص است این دو شی مشخصات x,y خود را در کلاس shape و مشخصات دیگر همانند مساخت را در کلاس circle و rectangle ذخیره کرند.

در وراثت باید به این نکته دقت کنید که در تابع سازنده کلاس فرزند ابتدا باید تابع سازنده کلاس پدر را با کلامه کلیدی super صدا زده شود تا ابتدا کلاس پدر ساخته شود و سپس کلاس فرزند ساخته می شود.

در کل کلمه super هنگامی مهم است که تابعی هم نام کلاس پسر در کلاس پدر وجود داشته باشد در آن صورت ابتدای این تابع باید متد مربوطه کلاس پدر را با این کلمه صدا زد بصورت super.method(arg);.

منابع این مقاله :

https://javascript.info/class
https://javascript.info/class-inheritance
https://www.w3schools.com/js/js_classes.asp
https://code.tutsplus.com/tutorials/inheritance-and-extending-objects-with-javascript–cms-29836

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

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

دیدگاه های ثبت شده

    Kamyab | ۱۳ بهمن ۱۴۰۰

    سلام ممنون بابت توضیحاتتون
    عالی بود .