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

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

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

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

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

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

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

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

1const object1 = {
2    user: "alex",
3    nationality: "Nigeria",
4    profession: "Software Enginneer",
5    myBio() {
6        console.log(`My name is ${this.user}. I'm a               ${this.profession} from ${this.nationality}`)
7    }
8}
9console.log(object1.user); //Alex 
10console.log(object1.nationality); //Nigeria 
11console.log(object1.profession); //Software Engineer 
12console.log(object1.myBio()); //My name is alex. I'm a Software Engineer from Nigeria

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

1const object2 = { 
2        users: ["Alex", "James", "Mohammed"], 
3        professions: { 
4            alex: "software engineer", 
5            james: "lawyer", 
6            mohammed: "technical writer" 
7        } 
8    }; 
9    console.log(object2.users); //['Alex', 'James', 'Mohammed'] 
10    console.log(object2.professions); //{alex: 'software engineer', james: 'lawyer', mohammed: 'technical writer'

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

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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

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

با این کار جسمی به نام myCup  با سه ویژگی ( color ، volume و weight ) ساخته شد که هرکدام مقدار خاص خود را دارند.

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

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

1let myCup = {
2 color: "transparent",
3 volume: 1,
4 weight: 0.5
5}

در این مثال متغیر با استفاده از سینتکس let myCup = {}‎  اعلان می‌شود. در خط جدید، این سینتکس اولین ویژگی به صورت color: "transparent"  نوشته خواهد شد. همچنین چون این ویژگی آخرین ویژگی شی مذکور نیست پس به یک کاما یا ویرگول در آخر خط نیاز است.

در خط بعد، ویژگی حجم به صورت ‎ volume: 1,  نوشته می‌شود و اینجا هم به کاما نیاز است. آخرین ویژگی این شی که weight  باشد، بدون علامت کاما در آخر نوشته خواهد شد. بعد در آخر سر علامت براکت بسته و به این صورت Object در جاوا اسکریپت با سینتکسی مختصرتر و خواناتر تعریف می‌شود.

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

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

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

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

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

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

1object2.property3 = "value3";

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

1object2["property4"] = "value4";

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

1object2.ages = [30, 32, 40];
2object2["summary"] = `Object2 has ${object2.users.length} users`;
3console.log(object2);
4/*
5{
6    "users": [
7        "Alex",
8        "James",
9        "Mohammed"
10    ],
11    "professions": {
12        "alex": "software engineer",
13        "james": "lawyer",
14        "mohammed": "technical writer"
15    },
16    "ages": [
17        30,
18        32,
19        40
20    ],
21    "summary": "Object2 has 3 users"
22}
23*/

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

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

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

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

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

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

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

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

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

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

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

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

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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

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

1const Table = function (height, width, length, color) {
2 this.height = height;
3 this.width = width;
4 this.len = length;
5 this.color = color;
6};

در مثال فوق متغیری با نام const Table  اعلان و با تابع برابر قرار داده شده است. همچنین برای این تابع از پارامترهای مختلفی مانند height  ، width   ، length  و color  استفاده شده است.

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

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

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

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

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

1function Profile(name, age, nationality) { 
2    this.name = name; 
3    this.age = age; 
4    this.nationality = nationality; 
5    this.bio = function () { 
6        console.log(`My name is ${this.name}. I'm ${this.age} years old. I'm from ${this.nationality}`) 
7    } 
8};
9
10const oladele = new Profile("Oladele", 50, "Nigeria" );
11console.log(oladele.bio()); //My name is Oladele. I'm 50 years old. I'm from Nigeria

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

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

1let x = 10;
2let y = x;
3x = 20;
4console.log(x); //20
5console.log(y); //10
6
7let object4 = { 
8    name: "Alex", 
9    age: 40 
10}; 
11let object5 = object4; 
12console.log(object5); //{name: 'Alex', age: 40} 
13object4.name = "Jane"; 
14console.log(object5); //{name: 'Jane', age: 40}
15console.log(object4 === object5); //true

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

عملگر Spread چیست؟

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

فیلم آموزش مقدماتی نود جی اس Node.js در فرادرس

کلیک کنید

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

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

همان‌طور که قابل مشاهده است، برخلاف نمونه کد قبلی که تغییر در object4 باعث تغییر در object5  شد، در مثال فوق تغییر در object6 منجر به تغییر در object5 نشده است.

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

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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

1let object7  = Object.assign({}, object6); 
2console.log(object7); //{name: 'Jane', age: 40}
3console.log(object7); //{name: 'Jane', age: 40}
4
5console.log(object6 === object7); //false
6object6.age = 60
7console.log(object6); //{name: 'Jane', age: 60}
8console.log(object7); //{name: 'Jane', age: 40

در قطعه کد بالا، همان‌طور که قابل مشاهده است، تغییر مقدار ویژگی age  برای object6  باعث تغییر در مقدار ویژگی age برای object7 نشده است. توجه به این نکته که عملگر spread و هم متد Object.assign()  فقط نوعی کپی «کم‌عمق» (shallow copy) از شی می‌سازند، در این رابطه بسیار مهم است.

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

1let objectX = {
2    name: 'Mary', 
3    age: 40,
4    gadgets: { 
5        brand: ["apple", "sony"]
6    }
7};
8
9let objectY = {...objectX};
10objectY.name = "Bianca";
11objectY.gadgets.brand[0] = "hp";
12console.log(objectX);
13/*
14{
15    "name": "Mary",
16    "age": 40,
17    "gadgets": {
18        "brand": [
19            "hp",
20            "sony"
21        ]
22    }
23}
24*/ 
25
26console.log(objectY);
27/*
28{
29    "name": "Bianca",
30    "age": 40,
31    "gadgets": {
32        "brand": [
33            "hp",
34            "sony"
35        ]
36    }
37}
38*/

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

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 به صورت زیر است:

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

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

1let objectZ = {
2    name: "Ade",
3    Pronuon: "he",
4    age: 60
5};
6for(let property in objectZ) {
7    console.log(`${property}: ${objectZ[property]}`)
8}
9/* 
10name: Ade
11Pronuon: he
12age: 60
13*/

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

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

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

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

در این مثال فرض بر این است که شیئی به نام myTable  وجود دارد که دارای ویژگی‌های زیر است.

1let myTable = {
2 height: 75,
3 width: 120,
4 length: 60,
5 color: "white"
6}

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

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

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

1myTable.whatIsMyColor();

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

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

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

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

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

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

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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

1const Table = function (height, width, length, color) {
2 this.height = height;
3 this.width = width;
4 this.len = length;
5 this.color = color;
6
7 this.whatIsMyColor = function () {
8 document.write(`My color is: undefined<br>`);
9 }
10};

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

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

مقدار در اینجا برابر است با My color is  و به دنبال آن کاراکتر $ و کروشه {} را مانند قطعه کد بالا باید نوشت. در داخل کروشه باز و بسته {} نیز باید this.color  نوشته شود که این عبارت مقدار را برای شی می‌خواند. حال اگر document.write فراخوانی شود پیغامی در سند «HTML» نشان می‌دهد.برای استفاده از سازنده جهت اعلان شی جدید برای مثال بالا، باید متغیری را با let myFirstTable  اعلان کرد و سپس new Table(80, 80, 120, "blue")  را فراخوانی کرد. مقادیر موجود در برائت‌ها شی هستند.

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

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

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

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

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

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

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

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

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

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

سخن پایانی

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

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