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

اگر بخواهیم یک تعریف ساده از object بیان کنیم باید بگوییم که در زندگی واقعی، خود شما یک آبجکت هستید! در واقع همه آدم‌ها آبجکت هستند. آبجکت‌هایی که آن‌ها را با مشخصاتی مثل قد، وزن، نام، شماره شناسنامه و … می‌شناسند. در واقع هر چیزی را که بتوان ویژگی‌های برای آن در نظر گرفت (مثل قد وزن شماره شناسنامه و …) و به هر یک از این ویژگی‌ها مقدار خاصی داد آبجکت گفته می‌شود. بنابر این در همان مثال آدم‌ها، هر آدمی یک آبجکت‌ محسوب می‌شود که دارای یک سری مؤلفه‌های کلی است و هر فرد، مؤلفه‌های مخصوص به خود دارد. ما به این مؤلفه‌ها در آبجکت property-های آبجکت و به مقدار هر یک از آن‌ها value آبجکت می‌گوییم.

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

فرض کنید می‌خواهیم بگوییم اسم من محمد حسین است! با توجه به دانش قبلی خود می‌توانیم به زبان جاوا اسکریپت بنویسیم:

var myName = “mohammad Hossein Malek”;

ولی حالا اگر بخواهیم مشخصات بیشتری از خودمان را در یک متغیر ذخیره کنیم چکار باید کنیم؟ مثلا به قد، سن یا سال تولد وی هم نیاز داریم. در جلسات پیش ناچار بودیم برای هر مؤلفه‌ یک متغیر جدید بسازیم. مثلا بنویسیم var age = 25 یا …  ولی در این جلسه می‌خواهیم نه‌تنها نام خودمان را بلکه مشخصات فردی‌مان را در یک متغیر ذخیره کنیم! در واقع خودمان را در یک آبجکت ذخیره کنیم:

var myName = {

firstName: “mohammad”,

family: “malek”,

 age: 25,

languge: ‘persian’

};

همانطور که در مثال بالا می‌بینید، ما همچنان یک متغیر داریم؛ ولی در این متغیر صفات و ارزش‌های بیشتری نهفته است. مثل زبان، سن، نام خانوادگی و …!

کار آبجکت‌ها همینگونه است! یک متغیر با چند ویژگی که هر ویژگی یک مقدار منحصربه‌فرد برای خودش دارد.

نحوه و قاعده نوشتن آبجکت‌ها بسیار ساده است. یک آکولاد باز می‌کنیم. سپس هر تعداد که می‌خواهیم ویژگی می‌نویسیم. بین هر ویژگی (مثلا name در مثال بالا) و مقدار آن (‌مثلا mohammad Hossein مقدار name است) یک علامت دو نقطه : قرار می‌گیرد. همچنین برای تمایز بین دو ویژگی از هم نیز علامت , قرار می‌دهیم. به‌عنوان یک نکته مهم دیگر دقت کنید که آخرین آیتم یک آبجکت، علامت , قرار نمی‌گیرد و این به معنای پایان یک آبجکت است.

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

با هم یک مثال دیگر می‌بینیم:

var pizza = {

name: ”peperoni”,

price: 2500,

off: ”10%”

};

در این مثال name و price و off هر کدام، متغیرهای آبجکت pizza هستند. هر کدام از این متغیرها می‌توانند خالی باشند، یک متغیر استرینگ یا متنی را در بر بگیرند، یک عدد باشند یا حتی یک فانکشن متفاوت!

به‌عنوان نکته پایانی بخاطر داشته باشید که در نوشتن آبجکت‌ها نیازی نیست که بین آيتم‌های آبجکت اینتر بزنید و این کار صرفا باعث خوانایی بیشتر کدهای شما خواهد شد. پس سعی کنید این نکته را برای بهتر شدن کدهایتان همیشه رعایت کنید.

دسترسی به مقادیر آیتم‌های آبجکت:

دسترسی به مقادیر هر آیتم در آبجکت آسان است. مثلا فرض کنید در آبجکت person می‌خواهید شماره شناسنامه فرد را استخراج کنید! کافی است نام متغیر ذخیره‌کننده آبجکت و سپس نام مؤلفه‌ مورد نظر را به همراه یک نقطه بنویسید تا مقدار آن دریافت شود.

objectName.propertyName

یا

objectName[“propertyName”]

که در مثال person به‌صورت زیر می‌شود:

var person = {

firstName:”mohammd hossein”,

lastName:”malek”,

age: 25,

idNumber: 0310866170

};

var idNumber = person.idNumber;

var hisName = person.name ;

alert(hisName , idNumber) 

یا همانطور ساده و بدون استفاده از یک متغیر دیگر‌:

alert(person.name)

برای تغییر یک مقدار در آبجکت نیز کافی است به‌سادگی یک مساوی بعد از هر آیتم آبجکت بگذاریم و مقدار جدید را به آن بدهیم. مثلا برای تغییر نام آبجکت person باید به‌صورت زیر بنویسیم:

person.name = “ali”

حالا اگر person.name را در صفحه چاپ کنیم به‌جای مقدار اولیه مقدار جدید‌ آن یعنی استرینگ ali نمایش داده خواهد شد.

پروژه‌ اول:

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

var peperoni = {

foodName: “pizzaPepperoni”

foodPrice: 1000,

offer:  true

}

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

ذخیره آبجکت‌‌ها در دل یکدیگر

آبجکت‌ها می‌توانند به‌صورت تو در تو ذخیره شوند! یعنی شما می‌توانید یک آبجکت را به‌عنوان یکی از مقادیر، در آبجکت دیگری ذخیره کنید. چگونه؟ به شیوه زیر:

var peperoni = {

foodName: “pizzaPepperoni” ,

foodPrice: 1000,

offer: {

   haveOff: true,

   offerPercentage: 10

    }

}

اکنون برای دسترسی به آیتم‌های داخل آبجکت offer به شیوه زیر عمل می‌کنیم:

var offerPercentage = peperoni.offer.offerPercentage

اگر دقت کرده باشید ما عمدا نام متغیر جدیدمان را با نام آیتم offerPercentage در درون آبجکت offer یکی در نظر گرفته‌ایم. تا بدین ترتیب بگوییم که این دو متغیر کاملا از هم جدا هستند! یعنی offerPercentage به‌عنوان یکی از آیتم‌های آبجکت peperoni هیچ ارتباطی به متغیرهای بیرون آبجکت ندارد و کاملا جدا از آن‌ها محسوب می‌شود!

اضافه کردن ویژگی‌های جدید به آبجکت‌ها:

اگر بخواهیم ویژگی جدیدی به آبجکت اضافه کنیم یک روش بسیار ساده وجود دارد؛ نوشتن نام ویژگی جدید بعد از نام آبجکت. مثلا می‌خواهیم به آبجکت پپرونی در مثال قبل یک ویژگی جدید به نام ingredients یا همان مواد تشکیل‌دهنده اضافه کنیم. برای این کار به روش زیر عمل می‌کنیم:

var peperoni = {

foodName: “pizzaPepperoni”,

foodPrice: 1000,

offer: {

   haveOff: true,

   offerPercentage: 10

}

}

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

peperoni.foodIngredients = “peperoni,cheese”

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

var peperoni = {

foodName: “pizzaPepperoni“,

foodPrice: 1000,

offer: {

   haveOff: true,

   offerPercentage: 10

},

foodIngredients: “peperoni , cheese”

}

Object Constructor

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

مثال زیر یک آبجکت‌ ساز است. همانطور که مشاهده می‌کنید، برای ساخت یک Object Constructor یک فانکشن تعریف می‌کنیم که ویژگی‌های آبجکت را به‌عنوان متغیر دریافت می‌کند و سپس با کمک this ( در واقع this یک متغیر نیست ولی برای فهم ساده‌تر فعلا فرض کنید یک متغیر است)‌ آن‌ها را در یک آبجکت جدید ذخیره می‌کند. به همین سادگی!

function Name(name, family,age) {

    this.firstName = name;

    this.lastName = family;

    this.age = age;

}

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

var ali = new nameGenerator(“ali”, “malek”, 30);

var mohammadHossein = new Name(“mohammad hossein”, “malek”, 25);

نکته: سعی کنید برای خوانایی و اصولی بودن کدها، نام فانکشن‌های آبجکت ساز را با حرف اول بزرگ بنویسید. مثلا Name یا Car یا هر چیز دیگری با حرف اول بزرگ نوشته شود.

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

this چیست؟

 وقتی شما یک فانکشن می‌سازید، در واقع مانند آن است که یک آبجکت می‌سازید! بله درست شنیدید!‌ فانکشن‌ها نیز نوعی آبجکت هستد. در واقع هر چیزی در جاوا اسکریپت به‌جز استرینگ‌ها، اعداد، بولین‌ها (true و false) و undefined و  null آبجکت محسوب می‌شود.

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

در ادامه، ما از کلمه new پشت فانکشن استفاده کرده‌ایم. کلمه کلیدی new نیز با هر بار استفاده، یک آبجکت جدید از  فانکشن ما می‌سازد و متغیرهایی را که بدان پاس داده‌ایم به‌عنوان مقدار در آبجکت ما وارد می‌کند. بنابراین مقدار نهایی متغیر ali در مثال بالا خواهد شد؛

ali = {

firstName: “ali”,

lastName: “malek”,

age: 50

}

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

Prototypes برای آبجکت‌ها

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

راه استاندارد ساختن یک پروتوتایپ استفاده از Object Constructor یا همان آبجکت سازی است که در مثال‌های قبلی استفاده کردیم. همچنین شما می‌توانید آیتم‌های جدیدی به کانستراکتور فانکشن‌ها اضافه کنید. 

مثلا در مثال قبلی ما می‌خواهیم زبان را نیز به پروتوتایپ آبجکت اضافه کنیم تا بدین ترتیب آبجکت‌ها دارای یک موضوع جدید باشند. 

function Name(name, family,age) {

    this.firstName = name;

    this.lastName = family;

    this.age = age;

}

برای این کار یک ویژگی به پروتوتایپ Name اضافه می‌کنیم:

Name.language = “فارسی”;

این ویژگی در تمامی آبجکت‌هایی که از این به بعد از طریق Name ساخته می‌شود، اضافه خواهد شد. بدین ترتیب وقتی ما یک آبجکت جدید به نام ali بسازیم، مقدار جدیدی خواهد داشت.

var ali = new nameGenerator(“ali”, “malek”, 30);

حالا آبجکت ali ما که در بالا توسط آبجکت یک مقدار جدید به نام language خواهد داشت، به شکل زیر نمایش داده می‌شود: 

ali = {

    firstName: “ali”,

     lastName: “malek”,

     age: 30,

     language: “فارسی”

}

بخش اول آموزش آبجکت‌ها تمام شد. در بخش بعدی به مباحث بیشتری از آبجکت‌ها خواهیم پرداخت. با زومیت همراه شوید.