بررسی اشیاء در جاوا اسکریپت

در این مقاله به بررسی اشیا در جاوا اسکریپت پرداخته شده است. مضمون شی در مفهوم کلاس در برنامه نویسی شی گرا نمود دارد.

یک شی‌ء در جاوا اسکریپت، نوع داده‌ای است که از مجموعه‌ای از نام‌ها یا کلیدها و مقادیر تشکیل شده است و با زوج "نام: مقدار" (name:value) نمایش داده می‌شود. زوج "نام: مقدار" می‌تواند شامل خصوصیاتی باشد که این خصوصیات ممکن است حاوی هر نوع داده (از جمله رشته ها، اعداد و مقادیر پولی) و همچنین متدها (توابعی که بر روی اشیا عملیات انجام می‌دهند) باشد.

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

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

ایجاد یک شی‌ء

یک شی‌ء، یک نوع داده جاوا اسکریپت می‌باشد، مانند یک عدد یا رشته که انواع داده‌ای هستند. یک شی‌ء مانند یک نوع داده می‌تواند به‌عنوان نوع یک متغیر تعریف شود.

دو روش برای ساخت یک شی‌ء در جاوا اسکریپت وجود دارد:

Object literal: که از براکت ها استفاده می‌کند:{ }

Object constructor: که از کلمه کلیدی new استفاده می‌کند.

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

1- روش object literal

1// Initialize object literal with curly brackets
2const objectLiteral = {};

روش object literal، مقداردهی اولیه شی‌ء را با استفاده براکت‌های خالی نشان می‌دهد.

2- روش object constructor

حال، از روش object constructor استفاده خواهیم کرد.

1// Initialize object constructor with new Object
2const objectConstructor = new Object();

داده مشابه‌ای با استفاده از روش object constructor ایجاد شده که مقدار دهی اولیه این شی با new object() انجام شده است.

هر دو این روش‌ها، یک شی‌ء خالی ایجاد می‌کنند. روش object literal رایج ترین و محبوب‌ترین روش است زیرا نتایج ناسازگار و غیرمنتظره بسیار کمتری دارد. ما می‌توانیم یک شی‌ء نمونه ایجاد کنیم که برای توصیف یک شخص شامل متغیر gimli باشد.

1// Initialize gimli object
2const gimli = {
3    name: "Gimli",
4    race: "dwarf",
5    weapon: "axe",
6    greet: function() {
7        return `Hi, my name is ${this.name}!`;
8    },
9};

شی‌ء جدید ما gimli است که دارای سه خصوصیت می‌باشد. هر خصوصیت شامل زوج name:value (key:value) می‌باشد. Weapon نام یکی از خصوصیت‌ها می‌باشد که با مقدار خصوصیت رشته‌ای "axe" جفت می‌شود. این شی‌ء دارای یک متد به نام greet است؛ مقدار متد معادل محتوی function تعریف شده است.

درون متد greet می‌توانید از کلمه کلیدی this استفاده کنید. هنگامی‌که درون یک شی‌ء از کلمه کلیدی this استفاده می‌شود، در واقع this به شی‌ء جاری، در این مورد gimli اشاره دارد. ارسال gimli به کنسول، کل شی‌ء را چاپ می‌کند.

1gimli;

1Output
2{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

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

خصوصیات و متدها

اشیا می‌توانند دارای خصوصیات (properties) و متدها (method) باشند.

یک خصوصیت، رابط بین یک نام (کلید) و مقدار (value) درون یک شی‌ء است و می‌تواند هر نوع داده‌ای داشته باشد. به‌طور کلی، یک خصوصیت به ویژگی یک شی‌ء اشاره دارد.

یک متد، تابعی است که حاوی مقدار خصوصیت یک شی‌ء است، و بنابراین کاری است که یک شی‌ء می‌تواند انجام دهد.

یک روش ساده برای به خاطر سپردن تفاوت بین خصوصیات شی‌ء و متدها این است که خصوصیت را همانند یک اسم و متد را به‌عنوان یک فعل در نظر بگیرید. در مثال بالا، name، race و weapon تماماً اسم‌های مرتبط با یک شی‌ء هستند و خصوصیت هستند. Fight() و talk() فعل‌هایی هستند که ممکن است به‌عنوان تعریف تابع متد استفاده شوند.

دسترسی به خصوصیات شی‌ء

دو روش برای دسترسی به خصوصیات یک شی‌ء وجود دارد:

استفاده از علامت نقطه (.)

استفاده از علامت براکت [ ]

شی‌ء مثال gimli را دوباره مرور کنید:

1const gimli = {
2    name: "Gimli",
3    race: "dwarf",
4    weapon: "axe",
5    greet: function() {
6        return `Hi, my name is ${this.name}!`;
7    },
8};

اگر ما بخواهیم مقدار خصوصیت weapon را بازیابی کنیم، می‌توانیم علامت نقطه را پس از نام شی‌ء بنویسیم و سپس نام خصوصیت یا متد موردنظر را بنویسیم.

1// Retrieve the value of the weapon property
2gimli.weapon;

1Output
2"axe"

خروجی gimli.weapon معادل مقدار خصوصیت weapon یعنی “axe” است. ما می‌توانیم داده مشابه‌ای را با استفاده از علامت براکت تولید کنیم. نحوه استفاده از علامت براکت همانند روش استفاده از یک ‌رشته است به‌طوری‌که نام خصوصیت درون دو براکت مربعی قرار می‌گیرد.

1// Retrieve the value of the weapon property
2gimli["weapon"];

1Output
2"axe"

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

1gimli.greet();

1Output
2"Hi, my name is Gimli!"

در مثال بالا، ما می‌بینیم که مقدار رشته‌ای برای متد شی‌ء () greet برگردانده شده است. حال می‌توانیم به بررسی تغییر خصوصیات شی‌ء از طریق افزودن زوج name: value یا تغییر زوج‌های موجود بپردازیم.

افزودن و تغییر خصوصیات شی‌ء

برای افزودن یک خصوصیت جدید به یک شی‌ء می‌توانید با استفاده از عملگر انتساب (=) یک مقدار جدید را به یک خصوصیت اختصاص دهید؛ برای مثال، ما می‌توانیم یک نوع داده عددی را به‌عنوان خصوصیت جدید age به شی‌ء gimli اضافه کنیم. هر دو علامت نقطه و براکت را می‌توان برای افزودن یک خصوصیت جدید شی‌ء مورد استفاده قرار داد.

1// Add new age property to gimli
2gimli.age = 139;

1// Add new age property to gimli
2gimli["age"] = 139;

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

1gimli.age;

1Output
2139

با فرآیندی مشابهی می‌توان یک متد را نیز به یک شی‌ء اضافه کرد.

1// Add new fight method to gimli
2gimli.fight = function() {
3    return `Gimli attacks with an ${this.weapon}.`;
4}

هنگامی‌که متد جدید شی‌ء ساخته شد، می‌توانیم همانند روش بالا، متد جدید را فراخوانی کنیم.

1gimli.fight();

1Output
2"Gimli attacks with an axe."

خصوصیت یک شی‌ء را می‌توان با اختصاص یک مقدار جدید به خصوصیت موجود تغییر داد.

1// Update weapon from axe to battle axe
2gimli.weapon = "battle axe";

در این نقطه، اگر شی‌ء را فراخوانی کنیم، می‌توانیم تمام خصوصیات و متدهای اضافه‌شده و اصلاح‌شده را مشاهده کنیم.

1gimli;

1Output
2{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

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

حذف خصوصیات شی‌ء

برای حذف یک خصوصیت از یک شی‌ء باید از کلمه کلیدی delete استفاده کنید. delete، یک عملگر است که یک خصوصیت از یک شی‌ء را حذف می‌کند؛ در مثال زیر، با استفاده از delete، خصوصیت weapon از شی‌ء gimli را حذف خواهیم کرد.

1// Remove weapon from gimli
2delete gimli.weapon;

1Output
2true

اگر عملیات حذف با موفقیت انجام شود یا خصوصیت موردنظر وجود نداشته باشد آنگاه خروجی عملیات delete معادل مقدار true خواهد بود. در زیر خروجی شی‌ء gimli را برای بررسی نتیجه عملیات delete ببینید.

1gimli;

1Output
2{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

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

تکرار خصوصیات شی‌ء

جاوا اسکریپت دارای یک نوع حلقه داخلی است که برای تکرار خصوصیات یک شی‌ء به‌طور اختصاصی در نظر گرفته‌شده است. این حلقه با for …in شناخته ‌شده است. در زیر، یک نسخه ساده‌ شده از شی‌ء نمونه ما، gimli، ارائه ‌شده است.

1const gimli = {
2    name: "Gimli",
3    race: "dwarf",
4    weapon: "battle axe",
5};

ما می‌توانیم از حلقه for…in برای پیمایش تمام خصوصیات gimli و چاپ آنها در کنسول استفاده کنیم. در این مورد، می‌توانیم مقادیر خصوصیت را با استفاده از براکت به‌عنوان یک متغیر بازیابی کنیم.

1// Iterate through properties of gimli
2for (let key in gimli) {
3  console.log(gimli[key]);
4}

1Output
2Gimli
3dwarf
4battle axe

ما همچنین می‌توانیم نام خصوصیت را با استفاده از اولین متغیر در حلقه for…in بازیابی کنیم ما از یک متد رشته‌ای برای تبدیل مقادیر کلیدی به حروف بزرگ استفاده کرده‌ایم.

1// Get keys and values of gimli properties
2for (let key in gimli) {
3  console.log(key.toUpperCase() + ':', gimli[key]);
4}

1Output
2NAME: Gimli
3RACE: dwarf
4WEAPON: battle axe

حلقه for…in نباید از با حلقه for…of اشتباه گرفته شود؛ حلقه for…of به‌طور انحصاری برای نوع شی‌ء آرایه استفاده می‌شود. یک متد شمارشی دیگر، متد object.keys() است که یک آرایه از کلیدهای شی‌ء را بازمی‌گرداند.

1// Initialize method on gimli object to return property keys
2Object.keys(gimli);

1["name", "race", "weapon"]

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

نتیجه‌گیری

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

در این آموزش، ما تفاوت بین خصوصیات (properties) و متدها، چگونگی ایجاد اشیاء، نحوه افزودن، تغییر، حذف و تکرار خصوصیات شی‌ء را یاد گرفتیم.

اگر تمایل به مطالعه بیشتر در این موضوع داشته باشید، شاید آموزش های زیر نیز برای شما مفید باشند:

• آموزش جامع جاوا اسکریپت (JavaScript)
• آموزش برنامه‌نویسی از مبتدی تا پیشرفته
• ۱۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید

**

منبع