آموزش ویژگی های ECMAScript 6 (جلسه 17) : آموزش جزئیات کلاسها

آخرین مطالب

امکانات وب

آموزش ویژگی های ECMAScript 6 (جلسه 17) : آموزش جزئیات کلاسها - قسمت 2

همونطور که اطلاع دارید در جلسه گذشته در مورد Class Expression و Class Declaration و first class citizen و ... صحبت کردیم. در این جلسه میخوایم مباحث مربوط به کلاسها رو ادامه بدیم و چیزهایی که مونده رو به اتمام برسونیم.

همونطور که اطلاع دارید در مبحث توابع IIFEs وجود دارند که مخفف Immediately Invoked Function Expression است. با استفاده از IIFE ها میتونین توابع رو تعریف کرده و بعد از اون و فوراً اونا رو با مقدار دلخواه فراخوانی کنید. چنین چیزی برای کلاسها نیز وجود داره و میتونیم فورا بعد از تعریف کردن کلاس، با استفاده از () یک شئ جدید از اون بسازیم و استفاده کنیم. مثلا کد زیر رو در نظر بگیرید:

let person = new class {

constructor(name) {

this.name = name;

}

sayName() {

console.log(this.name);

}

}('Mohammad');

person.sayName();

میبینید که یک متغیر بنام person ساختیم و قصد داریم که یک نمونه جدید از کلاس رو درون اون ذخیره کنیم. در ابتدا از کلمه new استفاده کردیم و بعد Class Expression رو قرار دادیم و کدهای مورد نظرمون رو درونش قرار دادیم. بعد از تعریف کلاس یک () رو قرار دادیم و درون اون رشته Mohammad رو ارسال کردیم. این رشته به Constructor پاس داده میشه و به ویژگی name نسبت داده میشه. زمانی که ما متد sayName از شئ person را فراخوانی میکنیم، عبارت Mohammad در Console چاپ خواهد شد.

مورد بعدی که باید در مورد کلاسها بدونین اینه که میتونین خصوصیات Accessor مانند getter و setter رو به وجود بیارید. getter و setter به شما این اجازه رو میدن که بصورت خلاصه و با سرعت به ویژگی مورد نظرتون دسترسی داشته باشید و اون رو بخونید و یا اینکه اون رو تغییر بدین (همون read و write کردن). با استفاده از این موارد میتونیم نحوه دریافت و write کردن ویژگی مورد نظرمون رو سفارش سازی کنیم و حالت خاصی رو برای اون در نظر بگیریم. کلاس زیر رو در نظر بگیرید:

class Employee {

constructor(name) {

this._name = name;

}

get name() {

return this._name.toUpperCase();

}

set name(newName){

if(newName){

this._name = newName;

}

همونطور که میبینید یک کلاس بنام Employee درست کردیم و یک نام رو برای ویژگی _name اون در نظر گرفتیم. بعد از اون دو خصوصیت get و set رو تعریف کردیم و برای هر دوی اونا اسم name رو مشخص کردیم. حالا کد زیر رو قرار میدیم:

let someEmployee = new Employee("Mohammad");

console.log(someEmployee.name);

همونطور که میبینید یک نمونه جدید از کلاس Employee ساختیم و درون شئ someEmployee قرار دادیم. بعد از اون میخوایم در خط 3 به ویژگی name اون دسترسی داشته باشیم. این کار در پس زمینه بخش getter رو فراخوانی میکنه و همونطور که در کلاس و در بخش get میبینید، نام مورد نظر رو دریافت میکنیم و اون رو بصورت UpperCase در میاریم. پس چیزی که در Console چاپ خواهد شد بصورت MOHAMMAD خواهد بود. حالا اگر کد زیر رو قرار بدیم:

someEmployee.name = null;

همونطور که میبینید میخوایم چیزی رو تغییر بدیم یا write کنیم. این کار در پست صحنه setter یا بخش set در class رو فراخوانی میکنه. درون set یک شرط قرار دادیم و تنها در صورتی که true باشه کار مورد نظر انجام میشه. به دلیل اینکه null در شرط مورد نظر صدق نمیکنه، پس هیچ تغییری در ویژگی _name رخ نمیده. پس میبینید که با استفاده از getter و setter میتونیم نحوه خوانده شدن و نوشته شدن رو سفارش سازی کنیم و مطابق با نیازمون تغییر بدیم.

مورد دیگری که در مورد کلاسها باید بدونین متدهای استاتیک یا static است. متدهای استاتیک مستقیما توسط خود کلاس فراخوانی میشن و نمیتونیم اونا رو توسط نمونه های ساخته شده توسط کلاس فراخوانی کنیم. مثال زیر رو در نظر بگیرید:

class Triple {

static triple(n) {

if (n === undefined) {

n = 1;

}

return n * 3;

}

console.log(Triple.triple());

console.log(Triple.triple(6));

همونطور که میبینید یک کلاس بنام Triple تعریف کردیم و یک متد استاتیک بنام triple رو برای اون تعریف کردیم و وظیفه اون این هست که ورودی ما رو در عدد 3 ضرب میکنه و برمی گردونه. میبینید که بعد از تعریف کلاس، بدون اینکه با استفاده از کلمه new، نمونه جدیدی از این کلاس به وجود بیاریم، در خط 10 و 11 به این متد دسترسی پیدا کردیم. در خط 10 این متد رو بدون آرگومان صدا زدیم و با اینکار خروجی 3 خواهد بود. در خط 11 متد triple رو با ورودی 6 فراخوانی کردیم و 3 * 6 برابر با 18 خواهد بود. بهمین راحتی.

موفق و پیروز باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : آموزش,ویژگی,جلسه,آموزش,جزئیات,کلاسها,قسمت, نویسنده : استخدام کار 7learn بازدید : 245 تاريخ : دوشنبه 27 شهريور 1396 ساعت: 20:56

آموزش ویژگی های ECMAScript 6 (جلسه 17) : آموزش جزئیات کلاسها - قسمت 2

آخرین مطالب

امکانات وب

آموزش ویژگی های ECMAScript 6 (جلسه 17) : آموزش جزئیات کلاسها - قسمت 2

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه