انواع داده ها (data types) در جاوا اسکریپت: اشیاء

javascript-objects

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

اشیاء در دنیای واقعی

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

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

تا الان یاد گرفته اید که کار متغیر ها (variables) ذخیره ی داده هاست؛ این متغیر ها یک داده را گرفته و در خود ذخیره می کنند:

var car = "Fiat";

اشیاء (objects) نیز نوعی متغیر هستند اما آن ها تعداد مقدار زیادی از داده ها را در خود ذخیره می کنند:

var car = {type:"Fiat", model:"500", color:"white"};

همین طور که می بینید این مقادیر به صورت جفت های name:value (یعنی مقدار:نام) کنار هم قرار گرفته و با ویرگول از هم جدا می شوند.

نکته: در اشیاء نیز فضای خالی (whitespace) اهمیتی ندارد و هر دو حالت زیر یک کد هستند:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

ویژگی ها (property) اشیاء

به جفت های name:value در جاوا اسکریپت ویژگی (property) می گویند. مثال:

Property Value (مقدار ویژگی) Property (ویژگی)
John firstName
Doe lastName

دسترسی به ویژگی های اشیاء

برای دسترسی به ویژگی های اشیاء دو روش وجود دارد:

objectName.propertyName

objectName["propertyName"]

متد های (methods) اشیاء

متد ها اعمالی هستند که روی اشیاء انجام می شوند و مانند تعریف یک تابع عادی در اشیاء ذخیره می شوند:

مقدار ویژگی ویژگی
John firstName
Doe lastName
50 age
blue eyeColor
function() {return this.firstName + " " + this.lastName;} fullName

بنابراین به زبان ساده، متد ها در واقع توابعی هستند که در یک شیء ذخیره شده اند.

یک مثال از چنین شیء ای را در کد زیر می بینید:

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

خروجی این کد عبارت "John Doe خواهد بود.

کلید واژه ی this

در تعریف یک تابع (در اشیاء)، کلمه ی this (به معنای "این") به مالک آن تابع برمیگردد. یعنی در مثال بالا کلمه ی this به شیء person بر میگردد چرا که صاحب و مالک تابعِ fullname است. به زبان ساده تر this.firstName یعنی خصوصیتِ firstname ای که متعلق به این شیء است.

البته این کلمه بسته به اینکه کجا استفاده شده باشد معنی متفاوتی دارد. کلمه ی this:

  • در یک متد، به مالک شیء اشاره دارد.
  • اگر به تنهایی استفاده شود، به شیء global (شیء ای که همیشه در جاوا اسکریپت موجود می باشد) اشاره دارد.
  • در یک تابع، باز هم به شیء global اشاره دارد.
  • در یک رویداد (event)، اشاره به عنصری دارد که رویداد را دریافت کرده است.
  • در متد هایی مانند ()call و ()apply می تواند به هر چیزی که تعیین شود اشاره کند.

مثال استفاده در رویداد ها:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <b>this</b> Keyword</h2>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

مشاهده ی خروجی این کد در ادیتور آنلاین جاوا اسکریپت.

مثال استفاده به تنهایی:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <b>this</b> Keyword</h2>

<p>In this example, <b>this</b> refers to the window Object:</p>

<p id="demo"></p>

<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

مشاهده ی خروجی این کد در ادیتور آنلاین جاوا اسکریپت.

مثال استفاده در تابع:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <b>this</b> Keyword</h2>

<p>In this example, <b>this</b> represents the <b>person</b> object.</p>
<p>Because the person object "owns" the fullName method.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

مشاهده ی خروجی این کد در ادیتور آنلاین جاوا اسکریپت.

مثال استفاده در متد های ()call و ()apply:

این متد ها از پیش در جاوا اسکریپت تعریف شده اند و می توانند یک متد شی ای را به وسیله ی یک شیء دیگر (به عنوان آرگومان) صدا بزنند. در مثال زیر هنگامی که person1.fullName را با person2 (به عنوان آرگومان) صدا بزنیم، کلمه ی this به person2 اشاره خواهد داشت، حتی اگر یک متد برای person1 باشد:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript this Keyword</h2>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>

<p id="demo"></p>

<script>
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
var x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

مشاهده ی خروجی این کد در ادیتور آنلاین جاوا اسکریپت.

در جلسات بعدی در مورد این متد ها بیشتر صحبت خواهیم کرد.

دسترسی به متد های اشیاء

دسترسی به متد های اشیاء مانند دسترسی به ویژگی های اشیاء است، با ساختار:

objectName.methodName()

اگر بعد از نام متد از پرانتز استفاده نکنید، تعریف متد به شما برگردانده می شود نه نتیجه ی آن:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

خروجی این کد را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

امیدوارم از این قسمت استفاده ی کافی را برده باشید.

در پناه حق.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (4 دیدگاه)

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

Hamid
14 شهریور 1399
فوق العاده

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

حسن فرجی
04 شهریور 1398
منطور از شی global چیه ؟ (لینکی که دادین واسه سایت انگلیسی هست که متاسفانه انگلیسی بلد نیستم و اون توضیحی که گذاشته من ازش چیزی نفهمیدم)

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

امیر زوارمی
07 شهریور 1398
شیء سراسری (global) یعنی شیء ای که دارای Scope سراسری باشه. همیشه توی جاوااسکریپت یک شیء سراسری داریم منتهی بستگی به موقعیتش داره. مثلا توی مرورگر و در حالت عادی شیء global میشه شیء window در جاوااسکریپت: https://developer.mozilla.org/en-US/docs/Web/API/Window (متاسفانه منبع خوب فارسی براش ندیدم). اگر از worker ها استفاده کنید شیء سراسری میشه WorkerGlobalScope: https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope

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

حسن فرجی
04 شهریور 1398
سلام من نتونستم از objectName.propertyName و objectName.methodName() در عمل استفاده کنم ممنون میشم نمونه کد بزارین.

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

امیر زوارمی
07 شهریور 1398
سلام دوست عزیز objectName.propertyName دو قسمت داره: - objectName که باید به جاش اسم شیء خودتون رو قرار بدین. - propertyName که باید به جاش اسم اون خصوصیت خودتون رو قرار بدین. یک نمونه کد رو میتونید توی سایت زیر ببینید: https://www.w3schools.com/js/tryit.asp?filename=tryjs_objects_properties_1 همچنین: https://www.w3schools.com/js/tryit.asp?filename=tryjs_objects_properties_2

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

sajjadVa22
20 بهمن 1397
سوالی دارم ازتون آیا دلیل خاصی داره که برای بعضی از اسم ها انگلیسی اش رو هم داخل پرانتز میارین یا بعضی موقع ها توی پرانتز معنی فارسی اش رو مینویسین؟

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

امیر زوارمی
20 بهمن 1397
سلام بله قطعا... من بعضی اوقات میگم: - "میخوایم خصوصیات اشیاء جاوا اسکریپت رو توضیح بدیم" : این جمله یعنی می خوام در مورد اشیاء و رفتار اون ها و خصوصیاتشون توضیح بدم، اینجا کلمه ی خصوصیت یک کلمه ی عادی هست به همون معنای فارسی اش. اما بعضی موقع ها میگم: - "این حلقه، خصوصیات شیء رو برای ما استخراج میکنه و نمایش میده" اینجا منظورم از "خصوصیت"، یک اصطلاح برنامه نویسی هست به نام property که معنای خاصی داره و دیگه اون معنای عادی اش توی زبان فارسی رو نمیده. برای مشخص شدن فرق بزرگی که بین این ها هست من از اصطلاحات انگلیسی اصلی شون استفاده می کنم. دلایل دیگه ای هم داره البته. مثلا شما به عنوان برنامه نویس مجبور هستید از منابع انگلیسی زبان سرچ کنید و اگر حتی اسم چیزی رو که میخواید سرچ کنید ندونید کار به جایی نمی برین. دونستن نام اصلی این اصطلاحات و عبارات برای یک برنامه نویس خیلی مهمه. شما هر چقدر هم به ادب فارسی علاقه داشته باشید، باز هم کد نویسی تون به انگلیسی خواهد بود. ---------------------------------- بعد میگیم پس چرا برای بعضی از این کلمات (داخل پرانتز) ترجمه ی فارسی میارم؟ بعضی از کلمات مثل "شیء" (به جای object) در فرهنگ برنامه نویسی فارسی جا افتادن و همه میدونن چی هستن بنابراین نیازی نیست خودمون رو هلاک کنیم که یک ترجمه بسازیم. اما جایی که ترجمه ای جا نیوفتاده یا ترجمه ی درستی برای اصطلاحی وجود نداره من عین انگلیسی اش رو میارم. مثلا اگر به جای "شیء global" یا "شیء گلوبال" بگید شیء جهانی! خیلی ها معنی حرف شما رو نمی فهمن. مثل این میمونه که بلوتوث (Bluetooth) رو ترجمه کنید "دندان آبی" ! یا حتما دیدید که کتاب های علوم دبستان رو سعی کردن ترجمه کنن و مثلا باکتری رو ترجمه کردن "ترکیزه" !! میتونین توی این لینک ببینین: http://www.bookcity.org/detail/8403 این کار درستی نیست و فقط باعث سر در گمی میشه. اما خیلی از اوقات اگر یه ترجمه از خود اون اصطلاح بهتون بدم، خود معنای اون اصطلاح به یادگیری اش کمک میکنه. اینطوری نیست که ما دیگه اون اصطلاح رو با معنی اش بشناسیم، فقط یک بار ترجمه اش می کنم تا معنی اش رو درک کنیم. مثلا this یعنی "این". اینطوری راحت تر درک میکنیم که وقتی از this استفاده کردیم یعنی مثلا "همین شیء" یا همین فلان و ...

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

مریلا
21 تیر 1398
کاملا فرمایش شما صحیح است. من به شخصه هیچوقت از کتابهای ترجمه شده کامپیوتر و ویدیوهای فارسی نمی توانستم استفاده کنم چون به خاطر سپردن معادلهای فارسی برایم بسیار دشوار بود. فهمیدن و به خاطر سپردن اینکه این معادل فارسی الان معادل کدام اصطلاح زبان برنامه نویسی است از فهمیدن خود مطلب برایم سختتر بود به حدی که از خواندن کتاب منصرف میشدم. خواهش میکنم شما به همین روش خودتان ادامه دهید. من برای آموزش جاوااسکریپت ویدیوهای زیادی از جمله ویدیوهای Brad Traversy را مشاهده کرده ام و به جرات می توانم بگویم شما بسیار ساده و روان توضیح داده اید و از ابتدایی ترین مباحث شروع کرده اید. شاید بد نباشد در آینده حتی به انتشار مطالبتان به زبان انگلیسی هم فکر کنید(برای مبتدی ها). بسیار سپاسگزارم از وقتی که گذاشته اید و با جزییات همه موارد را توضیح داده اید. پیروز باشید :)

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

هانیه
15 اردیبهشت 1399
مطالب خوبشون، ترجمه بسیار خوبی از سایت 3schoole هستش، اونجا میتونید انگلیسی این مطالب رو پیدا کنید.

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