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

در این نوشته، شما یاد می گیرید که چطور از class expressions برای declare یک class جدید در جاوا اسکریپت(javascript) استفاده کنید.

معرفی JavaScript class expressions

مشابه با کلاس ها و توابع که دارای expression forms هستند.class expression یک راه حل جایگزین برای تعریف یک class جدید فراهم می کند.

class expression نیازی به identifier(شناسه) بعد از کلمه کلیدی class ندارد.شما می توانید از یک class expression هنگام variable declaration(تعریف متغیر) استفاده کنید و آن را به عنوان یک argument به تابع پاس دهید.

برای مثال، قطعه کد زیر یک class expression تعریف می کند:

let Person = class {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

let Person = class {

constructor(name) {

this.name = name;

}

getName() {

return this.name;

}

در سمت چپ expression متغیر Person قراردارد که به یک class expression اختصاص داده شده است.

class expression با کلمه کلیدی class وسپس تعریف کلاس شروع می شود.

یک class expression می تواند نام داشته باشد یا نداشته باشد.در این مثال ما یک unnamed class expression داریم.

قطعه کد زیر یک instance از Person ایجاد می کند.synatx آن دقیقا مشابه با class declaration است.

let person = new Person('John Doe');

1	let person = new Person('John Doe');

مشابه با class declaration نوع(type) یک class expression برابر با function است.

console.log(typeof Person); // function

1	console.log(typeof Person); // function

مشابه با function expressions درواقع class expressions نیز hoisted نیستند.یعنی شما نمی توانید یک instance از class قبل از تعریف class expression ایجاد کنید.

First-class citizen

class ها در جاوا اسکریپت first-class citizens هستند.یعنی شما می توانید یک class رو به یک تابع پاس دهید،آن را از تابع برگردانید و آن را به یک متغیر assign کنید.

به مثال زیر توجه کنید:

function factory(aClass) {
    return new aClass();
}

let greeting = factory(class {
    sayHi() { console.log('Hi'); }
});

greeting.sayHi(); // 'Hi'

function factory(aClass) {

return new aClass();

}

let greeting = factory(class {

sayHi() { console.log('Hi'); }

});

greeting.sayHi(); // 'Hi'

در ابتدا، تابع ()factory را تعریف می کنیم که یک class expression را به عنوان argument می گیرد و یک instance از class را برمی گرداند.

function factory(aClass) {
    return new aClass();
}

function factory(aClass) {

return new aClass();

}

سپس یک unnamed class expression را به تابع ()factory پاس می دهیم و نتیجه را در متغیر greeting ذخیره می کنیم

let greeting = factory(class {
    sayHi() { console.log('Hi'); }
});

let greeting = factory(class {

sayHi() { console.log('Hi'); }

});

class expression یک متد به نام ()sayHi دارد و متغیر greeting یک instance از class expression است.

تخفیف عید غدیر 1400 | فرصت فوق العاده یادگیری

سپس متد ()sayHi را در greeting object فراخوانی می کنیم:

greeting.sayHi(); // 'Hi'

1	greeting.sayHi(); // 'Hi'

Singleton یک الگوی طراحی (design pattern) است که نمونه سازی(instantiation ) از یک کلاس را تنها به یک نمونه(instance) محدود می کند.این کار این اطمینان را به ما می دهد که تنها یک instance از کلاس در سراسر سیستم ایجاد می شود.

با فراخوانی class constructor می توان از Class expressions برای ساخت singleton استفاده کرد.

برای انجام اینکار شما باید از new operator با class expression که شامل پرانتز در انتها تعریف class مشابه مثال زیر است، استفاده کنید:

let app = new class {
    constructor(name) {
        this.name = name;
    }
    start() {
        console.log(`Starting the ${this.name}...`);
    }
}('Awesome App');

app.start(); // Starting the Awesome App...

let app = new class {

constructor(name) {

this.name = name;

}

start() {

console.log(`Starting the ${this.name}...`);

}

}('Awesome App');

app.start(); // Starting the Awesome App...

اما این مثال چگونه کار می کند.

قطعه کد زیر یک unnamed class expresion است:

new class {
    constructor(name) {
        this.name = name;
    }
    start() {
        console.log(`Starting the ${this.name}...`);
    }
}

new class {

constructor(name) {

this.name = name;

}

start() {

console.log(`Starting the ${this.name}...`);

}

class یک ()constructor دارد که یک argument را می گیرد.همچنین یک method به نام ()start دارد.می توان با قراردادن پرانتز بلافاصله بعد از expression، سازنده class را فراخوانی کنید:

new class {
    constructor(name) {
        this.name = name;
    }
    start() {
        console.log(`Starting the ${this.name}...`);
    }
}('Awesome App')

new class {

constructor(name) {

this.name = name;

}

start() {

console.log(`Starting the ${this.name}...`);

}

}('Awesome App')

این expression یک instance از class expression را بر می گرداند که در متغیر app ذخیره می شود.

خط کد زیر start() method را در app object فراخوانی می کند:

app.start(); // Starting the Awesome App...

1	app.start(); // Starting the Awesome App...

خلاصه :

ES6 یک روش جایگزین برای تعریف یک class جدید با استفاده از class expression ارائه می کند.
Class expressions می تواند دارای نام یا بدون نام باشد.
class expression می تواند برای ایجاد یک singleton object استفاده شود

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

معرفی JavaScript class expressions

First-class citizen

خلاصه :

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

معرفی JavaScript class expressions

First-class citizen

خلاصه :

مطالب زیر را حتما مطالعه کنید

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

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

()includes در جاوا اسکریپت

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

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

()Object.is در جاوا اسکریپت

دیدگاهتان را بنویسید لغو پاسخ