مقدمه ای بر کلاس های جاوا اسکریپت: مبانی، نحو و استفاده از مثال

معرفی

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

کلاس های جاوا اسکریپت چیست؟

کلاس های جاوا اسکریپت نوع خاصی از تابع هستند که به عنوان یک الگو برای ایجاد یک شی عمل می کنند. به طور خلاصه، کلاس های جاوا اسکریپت چیزی نیست جز روش دیگری برای نوشتن یک تابع. ما می توانیم یک کلاس را به عنوان طرح یا نقشه یک خانه در نظر بگیریم که شامل نحوه ساخت بخش های مختلف خانه است.

نحو

کلاس جاوا اسکریپت را می توان دقیقاً مانند یک تابع اعلام و بیان کرد.

// using declared class
class MyClass {
    constructor(){/*...*/}
    method_1(){/*...*/}
    method_2(){/*...*/}
}


// using expressed class
const MyClass = class {
   constructor(){/*...*/}
    method_1(){/*...*/}
    method_2(){/*...*/}
}

می توانید در مورد اعلان کلاس و بیان کلاس بیشتر بخوانید. برای اختصار، در طول این پست به نوع اعلام شده پایبند خواهیم بود.

کلاس – از کلمه کلیدی برای ایجاد کلاس استفاده کنید

کلاس من – نام یک کلاس

نحوه ایجاد کلاس

یک کلاس را می توان با استفاده از class کلمه کلیدی به دنبال یک نام کلاس مشخص، سپس یک پرانتز باز و بسته کننده { }.

برای بهترین شیوه، حرف اول یک کلاس باید با حروف بزرگ شروع شود.

بدنه کلاس

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

class Person { // creates a new class named 'Person'
    constructor(name, age){ // class member (constructor)
        this.name = name; // class member (property)
        this.age = age; // class member (property)
    }
    getAge(){ // class member (method)
        return this.age; 
    }
    setName(name){ // class member (method)
        return this.name = name; 
    }
} // end of class body 

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

console.log(typeof Person) // function

سازنده

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

فقط یک متد سازنده در یک کلاس می تواند وجود داشته باشد. اگر بیش از یکی باشد constructor، یک خطای نحوی ایجاد می شود. این constructor زمانی که یک نمونه جدید از یک کلاس با استفاده از عبارت ایجاد می شود، متد به طور خودکار فراخوانی می شود new کلمه کلیدی.

نحو

constructor(){/*...*/} // constructor with no parameter
constructor(){args1, args2} // constructor with two parameter
constructor(){args1, args2, /*...*/ argsN} // constructor with parameter up to N

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayHello(){
        console.log(`My name is ${this.name}, am ${this.age} years old`)
    }
}
const person1 = new Person('John', 21);
console.log(person1.sayHello()); // My name is John, am 21 years old 

در مثال بالا، کلاس Person سازنده ای دارد که نام شخص و ویژگی های سن را در خود نگه می دارد. یک شی شخص (person1) با the ایجاد می شود new کلمه کلیدی که به ما کمک می کند سازنده کلاس را به طور خودکار فراخوانی کنیم و آرگومان مورد نیاز را ارسال کنیم، سپس متد “sayHello” را فراخوانی می کنیم که به ما کمک می کند تا پیام را در کنسول چاپ کنیم.

ایجاد ویژگی های شی جاوا اسکریپت با استفاده از this کلمه کلیدی

در کلاس جاوا اسکریپت this کلمه کلیدی را می توان برای دسترسی و اصلاح ویژگی ها و روش های نمونه کلاس فعلی استفاده کرد. وقتی استفاده می کنیم this در یک کلاس، به جای ایجاد یک متغیر جدید، اساساً به نمونه فعلی یک کلاس اشاره می کنیم.

به نوعی می توانیم بگوییم this در کلاس جاوا اسکریپت مانند اعلان یک متغیر برای آن نمونه از یک کلاس است. با این حال، درک آن مهم است this دقیقاً مشابه اعلان متغیر نیست.

وقتی استفاده می کنیم this در کلاس جاوا اسکریپت، شما به صراحت یک متغیر جدید را اعلام نمی کنید. در عوض، شما به نمونه فعلی کلاس اشاره می کنید و به ویژگی ها و روش آن دسترسی پیدا می کنید یا آن را تغییر می دهید.

به عنوان مثال، زمانی که یک ویژگی را در سازنده یک کلاس با استفاده از this، ما متغیری در محدوده جهانی ایجاد نمی کنیم. در عوض، ما یک خاصیت را روی نمونه فعلی کلاس تنظیم می کنیم که می تواند باشد دسترسی پیدا کرد و اصلاح شده استفاده كردن this.

class Rectangle{
    constructor(width, height){
        this.width = width;
        this.height = height;
    }

    area(){
        return this.width * this.height;
    }

    rectInfo(){
        console.log(`Rectangle is ${this.width}x${this.height} dimension with ${this.area()} area`);
    }
}
const rect1 = new Rectangle(10, 6);

console.log(rect1.area()); // 60
rect1.rectInfo() // Rectangle is 10x6 dimension with 60 area

در مثال بالا ما یک کلاس “مستطیل” با سازنده ای ایجاد می کنیم که ویژگی های “height” و “width” را برای هر کلاس نمونه با استفاده از آن تنظیم می کند. this. ما همچنین روش “منطقه” را ایجاد می کنیم که از آن استفاده می کند this برای دسترسی به ویژگی های “height” و “width” نمونه فعلی و برگرداندن مساحت مستطیل. علاوه بر این، ما یک روش “rectInfo” تعریف می کنیم که برخی از اطلاعات مستطیل را با استفاده از آن نمایش می دهد. this برای دسترسی به ویژگی های شی “height” و “width” با روش “area”.

بعداً، یک نمونه جدید از کلاس “Rectangle” با استفاده از new کلمه کلیدی. سپس از مقادیر “height” و “width” عبور می کنیم. ما متد “area” را با استفاده از نمونه کلاس “rect1” می نامیم.

در مرحله بعد، ما متد “rectInfo” را با استفاده از نمونه کلاس “rect1” می نامیم که مستطیل “width” و “height” را چاپ می کند.

رشته

فیلدهای کلاس جاوا اسکریپت ویژگی جدیدی در ECMAScript 2022 هستند که به شما امکان می‌دهد تا خصوصیات شی را مستقیماً در بدنه کلاس تعریف کنید، بدون نیاز به تعریف آنها در متد سازنده. این می‌تواند کد شما را پاک‌تر و خواناتر کند و همچنین می‌تواند مقدار کدی را که برای نوشتن نیاز دارید کاهش دهد. فیلدها چیزی نیستند جز متغیرهایی که اطلاعات مختص یک کلاس را در خود نگهداری می کنند. یک فیلد می تواند خصوصی یا عمومی باشد.

فیلد خصوصی فقط در تعریف کلاس آن قابل دسترسی است. دسترسی به یک فیلد خصوصی خارج از تعریف کلاس آن یک خطای نحوی ایجاد می کند. یک فیلد خصوصی با اعلام شده است # (تگ هش) به دنبال آن نام فیلد (تلفظ می شود نام های هش).

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

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

class Employee {
    name = "Jane";
    #id = 1123;

    details(){
        console.log(`${this.name} with ${this.#id} ID works here`);
    }
}
const jane = new Employee()
jane.details() // Jane with 1123 ID works here

console.log(jane.#id) // SyntaxError: Private field '#id' must be declared in an enclosing class

در مثال بالا، یک فیلد عمومی “name” را اعلام کردیم و آن را با رشته “جین” مقداردهی اولیه کردیم. همچنین یک فیلد خصوصی “#id” اعلام کردیم و آن را با تعدادی اعداد “1123” مقداردهی اولیه می کنیم. ما یک روش “جزئیات” را تعریف کردیم که جزئیات کارمند را چاپ می کند.

ما یک شی کلاس “jane” ایجاد می کنیم، سپس متد جزئیات را فراخوانی می کنیم. بعداً سعی کردیم ویژگی شی فیلد خصوصی را “#id” بنامیم که یک “SyntaxError” ایجاد می کند.

روش کلاس جاوا اسکریپت

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

کلاس‌های جاوا اسکریپت از تعاریف متد استفاده می‌کنند که سینتکس کوتاه‌تری برای ویژگی تابع در یک شیء اولیه است.

نحو:

class MyClass{
    method_1(){/*...*/}
    method_2(){/*...*/}
}

class Calculator{
    addition(a, b){ // addition method
        return a + b
    }
    subtraction(a, b){ // subtraction method
        return a - b
    }
    multiply(a, b){ // multiply method
        return a * b
    }
    division(a, b){ // division method
        return a / b
    }
}
const calc = new Calculator();

const add = calc.addition(10, 2);
console.log(add); // 12

const sub = calc.subtraction(100, 20);
console.log(sub); // 80

const mul = calc.multiply(10, 2);
console.log(mul); // 20

const div = calc.division(10, 2);
console.log(div); // 5

در این مثال، کلاس “Calculator” ما دارای چهار روش است که اقدامات مختلفی را انجام می دهد. ما یک نمونه از کلاس “calc” ایجاد کردیم که از آن برای دسترسی به تمام متدهای مختلف در کلاس استفاده می کنیم.

ایجاد نمونه های کلاس

بعد از اینکه باید کروکی و پلان (الگوی) ساختمان خود را ترسیم کردیم، قدم بعدی که باید برداریم این است که ساخت خانه خود را بر اساس نقشه ای که داریم شروع کنیم. با این طرح می توانیم صدها خانه بسازیم.

یک نمونه از یک کلاس یک شی منفرد است که از یک الگوی کلاس ایجاد می شود. هنگامی که یک نمونه کلاس ایجاد می شود، تمام ویژگی ها و متدهای تعریف شده در کلاس را به ارث می برد. با این حال، هر نمونه ای که ایجاد می کنیم یک شی جداگانه با حالت منحصر به فرد خود است. بنابراین هر تغییری که در یک نمونه ایجاد شود، روی نمونه های دیگر همان کلاس تأثیری نخواهد داشت.

نحو:

const objName = new ClassName()

اجازه دهید یکی از نمونه های قبلی خود را دوباره مرور کنیم:

class Rectangle{
    constructor(width, height){
        this.width = width;
        this.height = height;
    }
    area(){
        return this.width * this.height;
    }
    rectInfo(){
        console.log(`Rectangle is ${this.width}x${this.height} with ${this.area()} area`);

    }
}
const rect1 = new Rectangle(10, 6); // class instance 'rect1'
const rect2 = new Rectangle(20, 10); // class instance 'rect2'
const rect3 = new Rectangle(8, 3); // class instance 'rect3'

console.log(rect1.area()); // 60
rect1.rectInfo() // Rectangle is 10x6 with 60 area

console.log(rect2.area()); // 200
rect2.rectInfo(); // Rectangle is 20x10 with 200 area

console.log(rect3.area()); // 24
rect3.rectInfo(); // Rectangle is 8x3 with 24 area

در این مثال ما سه مستطیل مختلف بر اساس قالب (کلاس) که داریم ایجاد کردیم. ما نمونه های کلاس “rect1″، “rect2” و “rect3” را با استفاده از عبارت ایجاد کردیم new کلمه کلیدی به دنبال نام کلاس “مستطیل”. سپس، مقادیر سازنده خود را که خصوصیات کلاس نیز هستند، ارسال کردیم. هنگامی که نمونه ها با استفاده از new کلمه کلیدی، آنها ویژگی های “width”، “height” و “rea”، “rectInfo” را به ارث می برند. سپس متدهای کلاس را با استفاده از نمونه های کلاس ایجاد شده “area()” و “rectInfo()” نامیدیم.

خلاصه

در این پست وبلاگ، بحث کردیم که کلاس ها چیست و چگونه می توان آنها را ایجاد کرد. سپس به بررسی اعضای کلاس مانند سازنده ها، نحوه استفاده پرداختیم this کلمه کلیدی، و توضیح داد که چه زمینه ها و روش ها هستند. در نهایت، ما نشان دادیم که چگونه می توان نمونه های شی را ایجاد کرد.

نتیجه

کلاس های جاوا اسکریپت مفهومی ضروری برای ساخت برنامه های پیچیده وب هستند. آنها راهی برای ایجاد اشیاء قابل استفاده مجدد با ویژگی ها و روش های از پیش تعریف شده ارائه می دهند که امکان کپسوله سازی را فراهم می کند و نگهداری کد را آسان تر می کند.