جاوا اسکریپت به زبان ساده: جلسه سیزدهم - آبجکت‌ (بخش دوم - پیشرفته)

یک‌شنبه ۱۵ بهمن ۱۳۹۶ - ۱۹:۰۰
مطالعه 4 دقیقه
در جلسه قبلی، به مرور آبجکت‌ها پرداختیم. در این جلسه قصد داریم این موضوع را زیر ذره‌بین ببریم و با امکانات‌ بیشتری از جمله متدها و قابلیت‌های دیگر آبجکت‌ آشنا شویم.
تبلیغات

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

متدهای آبجکت:

قبل از اینکه متدها را در آبجکت تعریف کنیم بد نیست باز هم تعریف فانکشن‌ها را یادآوری کنیم! فانکشن‌ها مثل یک کار به‌خصوص هستند؛ فرآیندی مشخصی را که برایشان تعریف شده است انجام می‌دهند.

متدها نیز فانکشن‌ها (یا اکشن‌هایی) هستند که در داخل آبجکت ذخیره شده‌اند. این فانکشن‌ها به آیتم‌های دیگر آبجکت دسترسی دارند. مثلا فرض کنید یک آبجکت داریم که دو ویژگی نام و نام خانوادگی دارد. حالا ما به یک متد نیاز داریم که بتواند نام و نام خانوادگی را جمع کند و نام کامل را به ما خروجی بدهد. این کار با کمک یک فانکشن که دو آیتم اول آبجکت را جمع کند انجام می‌شود. پس این فانکشن را به‌عنوان یک آیتم جدید در آبجکت ذخیره می‌کنیم.

 استفاده از متد همانند دیگر ویژگی‌های فانکشن تنها با نوشتن نام آن متد انجام می‌شود. منتها چون اینجا با یک فانکشن سر و کار داریم، ضروری است تا علامت () را در انتهای نام فانکشن قرار دهیم. مانند:‌

()objectName.methodName

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

ابتدا یک آبجکت به‌عنوان پیتزای مخصوص می‌سازیم:

var pizzaObject = {

name: “specialPizza”,

price : 1000,

off: 100

}

حالا فرض کنید یک مشتری به اسم محمد حسین داریم که یک پیتزای مخصوص سفارش داده است. می‌خواهیم فاکتور نهایی را با محاسبه میزان تخفیف برای وی محاسبه کنیم.

ابتدا متغیر محمد حسین را تعریف می‌کنیم:

var customerName = “mohammad hossein”

var factor = {

user: customerName,

orderNumber : 123,

deliveryType: “free”,

pizzaName = pizzaObject.name,

priceWithOutOff = pizzaObject.price,

offPrice = pizzaObject.offPrice,

calculateFinalPrice = function() {

   return this.priceWithOutOff - this.offPrice 

}

}

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

حالا اگر مقدار نهایی فاکتور را در یک متغیر به نام finalPrice بریزیم و این متغیر را در کنسول چاپ کنیم، قیمت نهایی پیتزا را دریافت خواهید کرد:

var finalPrice = factor.calculateFinalPrice()

console.log(finalPrice)

همچنین می‌توانید متدهای جدید را بعد از تعریف یک آبجکت بدان اضافه کنید. این کار مشابه اضافه کردن آیتم‌ها و ویژگی‌های جدید به آبجکت در جلسه قبل است.کافی است نام متد را بنویسید و به‌عنوان مقدار آن، کاری را که باید انجام بدهد در قالب یک فانکشن بنویسید. برای مثال ما یک آبجکت با نام user داریم. این آبجکت دارای نام و نام خانوادگی است.

var user = {

name: "mohammad Hossein",

family: "malek"

}

حالا می‌خواهیم یک متد بدان اضافه کنیم که نام و نام خانوادگی را در کنار هم بنویسید. برای این کار یک فانکشن را به‌عنوان مقدار به ویژگی‌های فانکشن اضافه می‌کنیم:

user.fullName = function() {

return this.name + this.family

}

alert(user.fullName())

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

user.fullNameSecond = function() {

return user.name + user.family

}

alert(user.fullNameSecond())

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

سخن پایانی:

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

تبلیغات
داغ‌ترین مطالب روز

نظرات

تبلیغات