آشنایی کامل با Hoisting در Javascript - قسمت آخر - Hoisting مربوط به کلاسها

آخرین مطالب

امکانات وب

آشنایی کامل با Hoisting در Javascript - قسمت آخر - Hoisting مربوط به کلاسها

0 61 ۲۳ خرداد ۹۶

در جلسه قبل قواعد Hoisting مربوط به توابع رو توضیح دادیم و شما رو با اونا آشنا کردیم. در این جلسه قصد داریم قواعد Hoisting مربوط به Class یا کلاسها در Javascript رو به شما آموزش بدیم و نکات مربوط به Hoisting رو به پایان برسونیم.

همونطور که میدونین در ES5 خیلی بر روی برنامه نویسی شئ گرا تمرکز نشده بود و ما برای اینکه در ES5 بصورت شئ گرا برنامه بنویسیم، باید موارد سختی رو یاد میگرفتیم و از function constructor ها استفاده می کردیم. اما با اومدن ES6 این ایراد همانند خیلی از ایرادهای دیگه برطرف شد و کلاسها به Javascript اضافه شدند. هدف این جلسه این نیست که به شما نحوه کار با کلاسها رو آموزش بده، اما برای اینکه بهتر مطلب رو بفهمید یک مثال میزنم. اگر بخوایم یک کلاس رو در ES5 تعریف کنیم و با اون کار کنیم، بصورت زیر عمل میکنیم:

function Hello(name) {

this.name = name;

}

Hello.prototype.hello = function hello() {

return 'Hello ' + this.name + '!';

};

Hello.sayHelloAll = function () {

return 'Hello everyone!';

};

function HelloWorld() {

Hello.call(this, 'World');

}

HelloWorld.prototype = Object.create(Hello.prototype);

HelloWorld.prototype.constructor = HelloWorld;

HelloWorld.sayHelloAll = Hello.sayHelloAll;

HelloWorld.prototype.echo = function echo() {

alert(Hello.prototype.hello.call(this));

};

var hw = new HelloWorld();

hw.echo();

alert(Hello.sayHelloAll());

میبینید که فهمیدن کد بالا در ابتدا سخت و دشوار هست و کلمات کلیدی مثل prototype و constructor زیاد استفاده شده است. اگر بخوایم تقریبا همچنین کاری رو در ES6 انجام بدیم، کد بصورت زیر میشه:

class Hello {

constructor(name) {

this.name = name;

}

hello() {

return 'Hello ' + this.name + '!';

}

static sayHelloAll() {

return 'Hello everyone!';

}

class HelloWorld extends Hello {

constructor() {

super('World');

}

echo() {

alert(super.hello());

}

var hw = new HelloWorld();

hw.echo();

alert(Hello.sayHelloAll());

میبینید که در اینجا از Class استفاده شده و کدنویسی اون شبیه به زبانهای معروف دیگه شده و بهتر میتونیم اون رو بفهمیم. همونطور که قبلا هم گفتیم، در آینده ای نزدیک ES6 و ... رو به شما آموزش میدیم. خب حالا بریم سراغ بحث خودمون که Hoisting در مورد کلاسها هست.

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

class declaration
class expression

بررسی class declaration

این نوع از کلاسها نیز به بالا Hoist میشن ولی باید اینو در نظر بگیرید که مقدار uninitialised برای اون قرار داده میشه و در ظاهر مثل این میمونه که اصلا Hoisting صورت نگرفته است. پس باید در ابتدا کلاس مورد نظر رو تعریف کنیم و بعد از اون میتونیم از اون استفاده کنیم. کد زیر رو در نظر بگیرید:

var Frodo = new Hobbit();

Frodo.height = 100;

Frodo.weight = 300;

console.log(Frodo);

class Hobbit {

constructor(height, weight) {

this.height = height;

this.weight = weight;

}

همونطور که میبینید در خط 6 کلاس با نام Hobbit رو تعریف کردیم و دو ویژگی height و weight رو برای اون قرار دادیم. در خط 1 سعی کردیم که به این کلاس دسترسی داشته باشیم و با استفاده از new یک نمونه جدید از اون بسازیم. اگر در مرورگر این کد رو اجرا کنیم، خروجی بصورت زیر میشه:

شاید این موضوع مقداری شما رو گیج کنه و با خودتون بگید که این کلاس اصلا Hoist نشده باشد. ولی اگر این کد رو درون ابزارهای linter مانند JSHint قرار بدیم، مشکل کار رو به ما بیان میکنن.

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

class Hobbit {

constructor(height, weight) {

this.height = height;

this.weight = weight;

}

var Frodo = new Hobbit();

Frodo.height = 100;

Frodo.weight = 300;

console.log(Frodo);

خروجی در مرورگر:

میبینید که شئ مورد نظر در Console چاپ میشه.

بررسی class expression

در این نوع کلاسها، متغیر بصورت undefined به بالا Hoist میشه و تعریف کلاس سر جاش باقی میمونه. اگر قبل از تعریف این نوع کلاسها، از اونا استفاده کنیم، یک ارور به ما نشون داده میشه و بهمون میگه که این متغیر constructor نیست و نمیتونیم از روی اون یک شئ جدید رو به وجود بیاریم. کد زیر رو ببینید:

var Square = new Polygon();

Square.height = 10;

Square.width = 10;

console.log(Square);

var Polygon = class {

constructor(height, width) {

this.height = height;

this.width = width;

}

};

میبینید که در خط 6 یک کلاس بی نام یا Anonymous رو به متغیر Polygon نسبت دادیم. در خط یک از این کلاس استفاده شده و اگر مرورگر رو باز کنیم، ارور زیر نمایش داده میشه:

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

var Polygon = class Polygon {

constructor(height, width) {

this.height = height;

this.width = width;

}

};

var Square = new Polygon();

Square.height = 10;

Square.width = 10;

console.log(Square);

با اینکار خروجی بصورت زیر خواهد شد:

امیدوارم با مطالعه این 6 مطلب دید بهتری نسبت به Hoisting پیدا کرده باشید و بهتر کدهاتون رو درک کنید.

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

یا علی

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

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

برچسب : نویسنده : استخدام کار 7learn بازدید : 318 تاريخ : جمعه 26 خرداد 1396 ساعت: 14:26

آشنایی کامل با Hoisting در Javascript - قسمت آخر - Hoisting مربوط به کلاسها

آخرین مطالب

امکانات وب