Object در جاوا اسکریپت چیست؟ – از صفر تا صد + مثال

اعلان چندین «متغیر» (Variable) برای ذخیره‌سازی مقادیر مختلف می‌تواند برنامه جاوا اسکریپت را نامرتب و خوانایی آن را کاهش دهد. برای رفع این مشکل، در جاوا اسکریپت و بسیاری از انواع زبان‌های برنامه نویسی، مفهومی به نام «شی» (Object) ارائه شده است که به کاربر امکان می‌دهد مقادیر مرتبط را با هم گروه‌بندی کند. Object در جاوا اسکریپت انواع داده‌های قدرتمندی به حساب می‌آید که می‌توانند مقادیر پیچیده را ذخیره کند و کاربر را قادر می‌سازد کدهای سازمان‌یافته و خواناتری ایجاد کند. در این مطلب به اصول اولیه اشیا در جاوا اسکریپت، نحوه ایجاد آن‌ها، کپی کردن آن‌ها، پیمایش آن‌ها و سایر موارد مرتبط پرداخته می‌شود. قبل از پرداختن به مفهوم Object در جاوا اسکریپت، داشتن درک اولیه‌ای از جاوا اسکریپت، از جمله متغیرها، توابع و انواع داده‌ها بسیار مهم است.

Object در جاوا اسکریپت چیست؟

در جاوا اسکریپت، شی یا همان Object نوعی داده است که می‌تواند مجموعه‌هایی از جفت‌های «کلید-مقدار» را در خود جای دهد. برخلاف انواع داده‌های اولیه مانند اعداد و رشته‌ها، اشیا می‌توانند انواع مختلفی از داده‌ها را به‌عنوان مقادیر در خود ذخیره کنند.

کلید یا نام ویژگی معمولاً از نوع رشته است، اگرچه هر نوع داده دیگری را می‌توان به رشته تبدیل کرد. شی را می‌توان به عنوان یک قفسه یا کمد چندمنظوره با فضایی برای وسایلی مانند: کتاب‌ها، فایل‌ها و غیره در نظر گرفت.

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

const emptyObject = {};
console.log(typeof emptyObject); //'object'

اشیا می‌توانند دارای متغیرها و توابع باشند. متغیرهای موجود در شی به عنوان ویژگی‌ و متغیرهای موجود در توابع به عنوان متد شناخته می‌شوند. متدها به شی اجازه می‌دهند تا از خصوصیات درون خود برای انجام کاری استفاده کند. به عنوان مثال، در کد زیر: object1.user

، object1.nationality

 و object1.profession

همگی ویژگی‌های object1

 هستند، در حالی که object1.myBio()‎

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

const object1 = {
    user: "alex",
    nationality: "Nigeria",
    profession: "Software Enginneer",
    myBio() {
        console.log(`My name is ${this.user}. I'm a               ${this.profession} from ${this.nationality}`)
    }
}
console.log(object1.user); //Alex 
console.log(object1.nationality); //Nigeria 
console.log(object1.profession); //Software Engineer 
console.log(object1.myBio()); //My name is alex. I'm a Software Engineer from Nigeria

کلیدهای موجود در نمونه کد بالا « user

 » ،« Nationity

» و « profession

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

const object2 = { 
        users: ["Alex", "James", "Mohammed"], 
        professions: { 
            alex: "software engineer", 
            james: "lawyer", 
            mohammed: "technical writer" 
        } 
    }; 
    console.log(object2.users); //['Alex', 'James', 'Mohammed'] 
    console.log(object2.professions); //{alex: 'software engineer', james: 'lawyer', mohammed: 'technical writer'

سینتکس Object در جاوا اسکریپت

ایجاد Object در جاوا اسکریپت بسیار آسان است.

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

let myCup = new Object();
myCup.color = "transparent";
myCup.volume = 1;
myCup.weight = 0.5;

با این کار جسمی به نام myCup

 با سه ویژگی ( color

، volume

و weight

) ساخته شد که هرکدام مقدار خاص خود را دارند.

سینتکس کوتاه تر شی در جاوا اسکریپت

شی نمونه کد بالا را می‌توان با «سینتکسی» (Sytnat) مختصرتر به صورت زیر نیز بازنویسی کرد:

let myCup = {
 color: "transparent",
 volume: 1,
 weight: 0.5
}

در این مثال متغیر با استفاده از سینتکس let myCup = {}‎

 اعلان می‌شود. در خط جدید، این سینتکس اولین ویژگی به صورت color: “transparent”

 نوشته خواهد شد. همچنین چون این ویژگی آخرین ویژگی شی مذکور نیست پس به یک کاما یا ویرگول در آخر خط نیاز است.

در خط بعد، ویژگی حجم به صورت ‎ volume: 1,

 نوشته می‌شود و اینجا هم به کاما نیاز است. آخرین ویژگی این شی که weight

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

چه زمانی در انتهای خط باید از کاما استفاده کرد؟

هنگامی که هر یک از مقادیر ویژگی فهرست می‌شوند، باید در انتهای خطوط از کاما استفاده شود، ولی علامت کاما برای ویژگی آخر نوشته نخواهد شد. همچنین برخی از «کد ادیتورها» (Code Editors) ممکن است اجازه استفاده از کاما را برای آخرین ویژگی نیز بدهند، اما معمولاً بهتر است آخرین ویژگی بدون کاما نوشته شود.

نحوه دسترسی به Object و ایجاد ویژگی ها یا متدهای شی جدید

دو روش برای دسترسی به Object در جاوا اسکریپت وجود دارد که در پایین بحث خواهند شد.

روش اول با استفاده از ذکر نام شی و ویژگی آن پشت سرم هم با علامت نقطه (.) در بین آن‌ها به صورت زیر است:

object2.property3 = "value3";

روش دوم استفاده از علامت کروشه باز وبسته «[]» است. در این روش به دنبال نام شی، ویژگی مدنظر در درون براکت به منظور ایجاد دسترسی به آن قرار می‌گیرد. سینتکس زیر این موضوع را بیان می‌کند.

object2["property4"] = "value4";

هر دو خط کد بالا ویژگی‌های جدیدی را به object2

 اضافه می‌کنند. خط اول از نماد نقطه استفاده می‌کند، در حالی که خط دوم از نماد براکت استفاده خواهد کرد. مثال زیر برای درک بهتر این موضوع بسیار حائز اهمیت است:

object2.ages = [30, 32, 40];
object2["summary"] = `Object2 has ${object2.users.length} users`;
console.log(object2);
/*
{
    "users": [
        "Alex",
        "James",
        "Mohammed"
    ],
    "professions": {
        "alex": "software engineer",
        "james": "lawyer",
        "mohammed": "technical writer"
    },
    "ages": [
        30,
        32,
        40
    ],
    "summary": "Object2 has 3 users"
}
*/

به صورت مشابه اشیا می‌توانند مقادیرشان را با استفاده از هر یک از نمادها تغییر دهند که مثال زیر این موضوع را نشان می‌دهد.

object2.users = ["jane", "Williams", "John"];
object2["age"] = [20, 25, 29]
console.log(object2.users); //['jane', 'Williams', 'John']
console.log(object2.ages) //[20, 25, 29

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

محدودیت در ویژگی‌ های چندکلمه‌ای

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

مثال زیر در رابطه با این موضوع است:

object3.users height = [5.6, 5.4, 6.0];
Console.log(object3.users height); //SyntaxError

برای قطعه کد بالا، همان‌طور که معلوم است، نوعی خطای نحوی اتفاق می‌افتد، زیرا جاوا اسکریپت دستور را به عنوان object3.users

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

در این موارد کاربر مجاز است از آندرلاین (_) و کاراکتر خاص ($) در نام‌گذاری استفاده کند. برای اطمینان از عدم بروز چنین اشکالاتی، بهتر است از علامت براکت استفاده شود. مثال بالا با علامت براکت به صورت زیر بازنویسی می‌شود و هیچ‌گونه خطایی ایجاد نخواهد شد.

object3["users height"] = [5.6, 5.4, 6.0];  
console.log(object3["users height"]); //[5.6, 5.4, 6]

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

سازنده برای شی جاوا اسکریپت

یکی از تکنیک‌های مهم در برنامه نویسی شی گرا، «وراثت» (Inheritance) است. وراثت در جاوا اسکریپت به معنی ایجاد شی فرزند برای به ارث بردن ویژگی‌های شی پدر خواهد بود. این یعنی کاربر می‌تواند فقط یک بار توابع را برای اشیا بنویسد و فقط مقادیر آن را تغییر دهد. این عملیات کار برنامه‌نویس را ساده می‌کند و تعداد خطاها را نیز کاهش می‌دهد.

راهی عالی برای بهره بردن از وراثت در جاوا اسکریپت، کار با «سازنده‌ها» (Constructor) است. همان‌طور که گفته شد، سازنده تابعی ویژه برای ساخت Object در جاوا اسکریپت است و این شی را برای استفاده آماده می‌کند. همچنین این سازنده آرگومان‌هایی را می‌گیرد که با استفاده از این آرگومان‌ها می‌توان مقادیر اولیه شی را تنظیم کرد.

مثال زیر برای بیان این مسئله مهم است:

const Table = function (height, width, length, color) {
 this.height = height;
 this.width = width;
 this.len = length;
 this.color = color;
};

در مثال فوق متغیری با نام const Table

 اعلان و با تابع برابر قرار داده شده است. همچنین برای این تابع از پارامترهای مختلفی مانند height

 ، width

  ، length

 و color

 استفاده شده است.

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

کاربر می‌تواند Object در جاوا اسکریپت را با استفاده از دو روش ایجاد کند. این روش‌ها استفاده از «شی تحت اللفظی» (Object Literal) و استفاده از «سازنده شی» (Object Constructor) هستند. کلیه مثال‌هایی که تا به اینجا مورد بررسی قرار گرفتند از نوع Object Literal بودند.

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

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

فراخوانی کرد. کلمه کلیدی new

نمونه‌ای از یک شی را ایجاد و کلمه کلیدی this

را به شی جدید متصل می‌کند. کلمه کلیدی this

به خودِ شی اشاره می‌کند. مثال زیر برای درک مفاهیم بیان شده در این بخش بسیار مهم است:

function Profile(name, age, nationality) { 
    this.name = name; 
    this.age = age; 
    this.nationality = nationality; 
    this.bio = function () { 
        console.log(`My name is ${this.name}. I'm ${this.age} years old. I'm from ${this.nationality}`) 
    } 
};

const oladele = new Profile("Oladele", 50, "Nigeria" );
console.log(oladele.bio()); //My name is Oladele. I'm 50 years old. I'm from Nigeria

نحوه ایجاد کپی از شی در جاوا اسکریپت

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

let x = 10;
let y = x;
x = 20;
console.log(x); //20
console.log(y); //10

let object4 = { 
    name: "Alex", 
    age: 40 
}; 
let object5 = object4; 
console.log(object5); //{name: 'Alex', age: 40} 
object4.name = "Jane"; 
console.log(object5); //{name: 'Jane', age: 40}
console.log(object4 === object5); //true

برای ایجاد کپی از شی، می‌توان از «عملگر Spread» استفاده کرد.

 

عملگر Spread چیست؟

عملگر Spread در جاوا اسکریپت با علامت سه نقطه (…) نمایش داده می‌شود.  همچنین با استفاده از عملگر Spread می‌توان برای کپی کردن مقادیر هر عنصر «تکرارشونده‌ای» (Iterable) از جمله اشیا استفاده کرد.

عنصر «Iterable» در جاوا اسکریپت به شیئی گفته می‌شود که می‌توان آن را با کمک حلقه for در جاوا اسکریپت پیمایش کرد. برای مثال اشیا، آرایه‌ها، مجموعه‌ها، رشته‌ها و غیره همگی Iterable هستند. کاربر برای استفاده از عملگر Spread، باید آن را به عنوان پیشوند به شیئی که می‌خواهد از آن کپی تهیه کند، مانند مثال زیر بگذارد:

let object6 = {...object5}; 
object5.name = "Willaims"; 
console.log(object5); //{name: 'Willaims', age: 40}
console.log(object6); //{name: 'Jane', age: 40}
console.log(object5 === object6); //false

همان‌طور که قابل مشاهده است، برخلاف نمونه کد قبلی که تغییر در object4

باعث تغییر در object5

 شد، در مثال فوق تغییر در object6

منجر به تغییر در object5

نشده است.

نحوه استفاده از متد Object.assign

با استفاده از متد Object.assign()‎

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

اولین پارامتر شی هدف است که ویژگی‌های کپی شده را می‌گیرد. پارامتر دوم شی منبع یا شی مبدأ محسوب می‌شود و دارای ویژگی‌هایی است که کاربر می‌خواهد کپی کند. مثال زیر برای این مفهوم بسیار مهم است:

let object7  = Object.assign({}, object6); 
console.log(object7); //{name: 'Jane', age: 40}
console.log(object7); //{name: 'Jane', age: 40}

console.log(object6 === object7); //false
object6.age = 60
console.log(object6); //{name: 'Jane', age: 60}
console.log(object7); //{name: 'Jane', age: 40

در قطعه کد بالا، همان‌طور که قابل مشاهده است، تغییر مقدار ویژگی age

 برای object6

 باعث تغییر در مقدار ویژگی age

برای object7

نشده است. توجه به این نکته که عملگر spread و هم متد Object.assign()

 فقط نوعی کپی «کم‌عمق» (shallow copy) از شی می‌سازند، در این رابطه بسیار مهم است.

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

let objectX = {
    name: 'Mary', 
    age: 40,
    gadgets: { 
        brand: ["apple", "sony"]
    }
};

let objectY = {...objectX};
objectY.name = "Bianca";
objectY.gadgets.brand[0] = "hp";
console.log(objectX);
/*
{
    "name": "Mary",
    "age": 40,
    "gadgets": {
        "brand": [
            "hp",
            "sony"
        ]
    }
}
*/ 

console.log(objectY);
/*
{
    "name": "Bianca",
    "age": 40,
    "gadgets": {
        "brand": [
            "hp",
            "sony"
        ]
    }
}
*/

در کدهای بالا کارهای زیر را انجام می‌شوند:

1. شیئی به نام objectX

    ایجاد می‌کند.

2. سه ویژگی ( name

    , age

   , gadgets

    ) را به objectX

   اختصاص می‌دهد.

3. به ویژگی gadgets

    شیئی به عنوان مقدار آن خواهد داد.

4. به مقدار شیء ویژگی gadgets

   یک ویژگی brand

    می‌دهد.

5. به ویژگی brand

   آرایه‌ای به عنوان مقدار آن می‌دهد.

6. با استفاده از عملگر spread خصوصیات را در objectX

   در objectY

    کپی می‌کند.

7. مقدار ویژگی name objectY

    را به Mary

    تغییر می‌دهد.

8. اولین مورد در مقدار آرایه ویژگی brand

   را از apple

    به hp

    تغییر داد.

در قطعه کد بالا، مقدار آرایه نوعی شی عمیق تودرتو است. باید به این نکته توجه داشت که تغییر در مقدار ویژگی name

برای  objectY

باعث تغییر در مقدار ویژگی name برای objectX

نخواهد شد، اما تغییر در شیء عمیق تودرتو objectX

باعث تغییر مشابهی در شی عمیق تودرتو objectX

خواهد شد.

 

پیمایش Object در جاوا اسکریپت

از حلقه «For…in» در جاوا اسکریپت برای پیمایش اشیا و انتخاب ویژگی‌های آن استفاده می‌شود. سینتکس حلقه For…in به صورت زیر است:

for(let key in object) {
    //perform action(s) for each key
}

کلمه کلیدی key

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

let objectZ = {
    name: "Ade",
    Pronuon: "he",
    age: 60
};
for(let property in objectZ) {
    console.log(`${property}: ${objectZ[property]}`)
}
/* 
name: Ade
Pronuon: he
age: 60
*/

برای این هدف باید به علامت براکت در حلقه برای بدست آوردن مقادیر ویژگی توجه کرد. استفاده علامت نقطه به‌جای علامت براکت، «Undefined» بازمی‌گرداند.

مثالی از اضافه کردن متد به شی جاوا اسکریپت

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

در این مثال فرض بر این است که شیئی به نام myTable

 وجود دارد که دارای ویژگی‌های زیر است.

let myTable = {
 height: 75,
 width: 120,
 length: 60,
 color: "white"
}

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

 را برای شی جدول چاپ می‌کند.

myTable.whatIsMyColor = function() {
 console.log("My color is: " + this.color);
};

در مثال بالا متد myTable.whatIsMyColor

 است و باید تابعی بدون پارامتر درون آن نوشت. این تابع می‌تواند هر چیزی باشد و این تابع باید به کاربر کمک کند که با اشیا کارە کند. در داخل تابعی که قطعه کد بالا نوشته شده است، فراخوانی و با استفاده از کلمه کلیدی this.color

 ، متد به ویژگی‌های شی پیوند داده می‌شود. هم‌اکنون تماس بین آن‌ها برقرار و می‌توان myTable.whatIsMyColor

را به صورت زیر فراخوانی کرد.

myTable.whatIsMyColor();

می‌توان چندین بار متد myTable.whatIsMyColor

را فراخوانی کرد و این کار خودش نوعی مزایا به‌حساب می‌آید که کاربر می‌تواند در کار با Object در جاوا اسکریپت از آن بهره ببرد.

کلمه کلیدی This در جاوا اسکریپت

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

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

متدها در داخل سازنده ها

سازنده‌ها روشی بسیار خوب برای تعریف متدها برای Object در جاوا اسکریپت هستند.

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

const Table = function (height, width, length, color) {
 this.height = height;
 this.width = width;
 this.len = length;
 this.color = color;

 this.whatIsMyColor = function () {
 document.write(`My color is: undefined
`);
 }
};

استفاده از سازنده برای اعلان Object جدید در جاوا اسکریپت

در مثال بالا متد this.whatIsMyColor

 نوشته شده است و برابر با تابعی بدون پارامتر قرار می‌گیرد. همچنین با استفاده از علامت براکت {} بدنه تابع نیز ایجاد شده است. در مثال بالا باید document.write

 فراخوانی شده و مقدار را در آن وارد کرد.

مقدار در اینجا برابر است با My color is

 و به دنبال آن کاراکتر $ و کروشه {} را مانند قطعه کد بالا باید نوشت. در داخل کروشه باز و بسته {} نیز باید this.color

 نوشته شود که این عبارت مقدار را برای شی می‌خواند. حال اگر document.write

فراخوانی شود پیغامی در سند «HTML» نشان می‌دهد.برای استفاده از سازنده جهت اعلان شی جدید برای مثال بالا، باید متغیری را با let myFirstTable

 اعلان کرد و سپس new Table(80, 80, 120, “blue”)

 را فراخوانی کرد. مقادیر موجود در برائت‌ها شی هستند.

می‌توان از سازنده‌ها بارها و بارها استفاده کرد. حال می‌توان متغیر دوم را با نام let mySecondTable

 نیز اعلان کرد. برای این هدف باری دیگر جدول جدیدی فراخوانی می‌شود و باید مقادیر را درون آن نوشت. جدول زیر به‌صورت new Table(80, 100, 150, “red”)

 است.
حال باید متد را برای هر دو شی فراخوانی کرد که برای شی اول به‌صورت myFirstTable.whatIsMyColor()

 و برای شی دوم به‌صورت mySecondTable.whatIsMyColor()

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

سؤالات متداول

در این بخش ٣ پرسش و پاسخ متداول در رابطه با Object ها در جاوا اسکریپت، جهت درک بهتر این موضوع مورد بررسی واقع خواهند شد.

آیا شی نوعی تابع در جاوا اسکریپت است؟

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

مثالی از شی در جاوا اسکریپت چیست؟

شی جاوا اسکریپت موجودیتی است که حالت و رفتار (ویژگی و متد) دارد. همه‌چیز در جاوا اسکریپت یک شی است. به عنوان مثال: ماشین، خودکار، دوچرخه، صندلی، شیشه و غیره همگی شی هستند و در کل  جاوا اسکریپت زبانی مبتنی بر شی است.

آیا آرایه یک شی جاوا اسکریپت است؟

بله آرایه‌ها نوعی شی در جاوا اسکریپت محسوب می‌شوند. عملگر Typeof در جاوا اسکریپت Object را برای آرایه‌ها برمی‌گرداند.

سخن پایانی

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

در این مطلب آموزشی از مجله تم آف در رابطه با Object های جاوا اسکریپت و رسالت آن‌ها توضیحاتی همراه با مثال ارائه شد. همچنین در رابطه با نحوه دسترسی به آن‌ها و ایجاد متدها و ویژگی‌ها برای آن‌ها به صورت کامل بحث شد.