کار با اشیاء یا Objects در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با اشیاء یا Objects در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
اشیاء یا Objects در جاوااسکریپت
در جاوااسکریپت میگن اشیاء ( شئ یا Object
) پادشاه هستن ، منظورش از این پادشاه بودن یعنی کلی بودن ساختار جاوااسکریپت بر پایه اشیاء یا Objects ( یعنی همواره جاوااسکریپت مبتنی بر شئ هست )
یعنی در جاوااسکریپت به هرطرف نگاه کنید یه شئ میبینید، مثلا آرایه ها در جاوااسکریپت همواره شئ هستند، یا توابع یا مثلا تاریخ شئ هستند، یا مثلا اعداد و رشته ها هم میتونن شئ باشند ، پس برای اینه که میگن جاوااسکریپت مبتنی بر شئ هست.
Free-Learn
شکل کلی یک شئ در جاوااسکریپت
اگه بخوایم بصورت کلی و یه شکل کلی از اشیاء یا شئ در جاوااسکریپت داشته باشیم میتونیم بصورت زیر نمایشش بدیم :
1 |
Object_Name = { Property1:Value1 , Property2:Value2 , ... PropertyN:ValueN } |
خب Object_Name
که همون نام شئ هست، بعدش داخل این شئ باید ویژگی ها یا خصوصیات رو تعریف کنیم و هر یک از این خصوصیات هم یه مقدار دارند.
بفرض مثال Property1
یعنی نام ویژگی یا خصوصیت اول بعدش یه : میزاریم و مقدار همین خصوصیت رو مینویسیم بعد یه کاما , و دیگه بقیه خصوصیات + مقدارشون رو وارد میکنیم.
مثال : تعریف یک شئ از ماشین ( BMW )
1 |
var Car = { Name:"BMW", Model:"M440i", Color:"Light Green" , Code:669077 }; |
Free-Learn
یک شئ یا Object در واقع یک متغیر هست
اگه یادتون باشه در جلسات قبلی ما یاد گرفتیم که چجوری میتونیم یک متغیر رو تعریف کنیم ، خب خیلی راحت با استفاده از کلمه کلیدی var
میتونیم یک متغیر رو تعریف کنیم.
بفرض مثال میخوایم یک متغیر به نام test تعریف کنیم، پس میتونیم بصورت زیر عمل کنیم :
1 |
var test = "Salam"; |
خب ما یه متغیر بنام test تعریف کردیم و مقدار Salam بهش دادیم، تموم شد رفت.
حال میگه یک شئ هم در حقیقت همون متغیر هست و برای نگهداری داده ها استفاده میشه فقط با این تفاوت که این متغیر میتونه ویژگی ( خصوصیات ) + مقدار داشته باشه.
مثلا میخوایم یک شئ از دانشجو تعریف کنیم، خب این دانشجو میتونه [ نام ، فامیلی ، کد دانشجویی و.. ] داشته باشه ، پس خوده دانشجو میشه شئ ( یا در واقع همون متغیر ) و به نام یا فامیلی و.. میگیم ویژگی های این شئ ، و در نهایت هر یک از این ویژگی ها هم میتونن مقدار داشته باشند.
1 |
var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 }; |
Free-Learn
نحوه تعریف شئ در جاوااسکریپت
چندین روش برای ایجاد و تعریف یک شئ Object در زبان جاوااسکریپت وجود داره که این روش ها به شرح زیر می باشند :
- تعریف شئ و خصوصیات در یک عبارت ( ساده ترین روش )
- تعریف شئ و خصوصیات با استفاده از کلمه کلیدی new
- تعریف شئ و خصوصیات با استفاده از سازنده ( یا Constructor ) شئ
تعریف شئ و خصوصیات در یک عبارت ( ساده ترین روش )
تو این روش ما هم خصوصیات هم مقادیر و هم خوده شئ رو در یک عبارت تعریف میکنیم. ( ساده ترین روش همین می باشد )
1 2 3 4 5 |
<script> var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 }; </script> |
- تعریف شئ و خصوصیات با استفاده از کلمه کلیدی new
1 2 3 4 5 6 7 8 9 |
<script> var daneshjoo = new Object(); daneshjoo.Name = "Ali"; daneshjoo.Family = "Akbari"; daneshjoo.Age = 26; daneshjoo.Code = 4455; </script> |
- تعریف شئ و خصوصیات با استفاده از سازنده ( یا Constructor ) شئ
تو این روش باید یه تابع ایجاد کنیم با پارامترهای مشخص ( مثلا برای دانشجو نام و فامیلی و سن و کد میخوایم ) بعدش با استفاده از کلمه کلیدی this
مقدار هر یک از این پارامترهارو ( که میشه همون آرگومان ها ) به خوده شئ اختصاص میدیم.
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function daneshjoo(Name, Family, Age, Code) { this.name = Name; this.family = Family; this.age = Age; this.code = Code; } var MyDaneshjoo = new daneshjoo("Ali", "Akbari", 26, 4455); </script> |
Free-Learn
نحوه نمایش یا فراخوانی خصوصیت یک شئ
خب ما شئ مون رو تعریف کردیم، حالا چجوری میتونیم به خصوصیات ( یا ویژگی یا Property ) های موجود در این شئ دسترسی داشته باشیم و آنها را فراخوانی و در نهایت در خروجی به نمایش درآوریم.
۲ روش برای فراخوانی یا نمایش خصوصیات اشیاء داریم :
- objectName.property
- objectName[“property”]
مثال از روش اول :
1 2 3 4 5 6 7 8 9 10 |
<script> var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 }; var a = daneshjoo.Name; var b = daneshjoo.Family; var c = daneshjoo.Age; var d = daneshjoo.Code; </script> |
مثال از روش دوم :
1 2 3 4 5 6 7 8 9 10 |
<script> var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 }; var a = daneshjoo["Name"]; var b = daneshjoo["Family"]; var c = daneshjoo["Age"]; var d = daneshjoo["Code"]; </script> |
Free-Learn
حلقه for در اشیاء
خب دوستان در ادامه آموزش کار با اشیاء یا Objects در جاوااسکریپت میخوایم با نحوه استفاده از حلقه for
در اشیاء رو یاد بگیریم.
در مثال های بالا همونطور که مشاهده کردید ما برای اینکه بتونیم آیتم های یک شئ رو در خروجی به نمایش درآوریم، باید تکی تکی انتخاب و در خروجی نمایش دهیم.
ولی خب شاید ما بخوایم تمامی آیتم ها ( یا منظور همون ویژگی ها ) رو در خروجی به نمایش درآوریم، پس اینجاست که میتونیم با استفاده از دستور ( یا حلقه بهش میگن ) for .. in تمامی ویژگی ها + مقادیر یک شئ رو در خروجی به نمایش درآوریم.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 }; var x ; // یک متغیر دلخواه var result = ""; // یک متغیر دلخواه برای نگهداری مقادیر for( x in daneshjoo ){ result = result + daneshjoo[x]; } document.write( result ); </script> |
Free-Learn
نحوه اضافه کردن ویژگی جدید به شئ
ما میتونیم هر لحظه که بخوایم به دلخواه خودمون ویژگی + مقدار به شئ اضافه کنیم، فقط حواستون باشه که ویژگی جدید باید بعد از خوده شئ قرار بگیرد نه قبل آن.
1 2 3 4 5 6 7 8 |
<script> var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 }; daneshjoo.PhoneNumber = 09110911120; // اضافه کردن ویژگی جدید document.write( daneshjoo.PhoneNumber ); </script> |
Free-Learn
نحوه حذف کردن یک ویژگی از شئ
برای حذف یک ویژگی از یک شئ کافیه از کلمه کلیدی delete
استفاده نماییم.
1 2 3 4 5 6 7 8 |
<script> var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 }; delete daneshjoo.Name; // حذف کردن ویژگی نام delete daneshjoo.Family; // حذف کردن ویژگی فامیلی </script> |
Free-Learn
متد یا Method در شئ
متدها در واقع عملیاتی هستند که بروی اشیاء ( شئ ) انجام میشه ، و بطور کلی تر بخوایم بگیم متدها یک تابع هستند که به عنوان یک خصوصیت از شئ ذخیره میشوند.
- نحوه ایجاد متد در یک شئ – روش اول – داخل شئ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 , FullName : function() { return this.Name + " " + this.Family; // نام و فامیلی رو برمیگردونه } }; var a = daneshjoo.FullName(); document.write( a ); </script> |
- نحوه ایجاد متد در یک شئ – روش دوم – خارج از شئ
1 2 3 4 5 6 7 8 9 10 |
var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 }; daneshjoo.FullName = function() { return this.Name + " " + this.Family; // نام و فامیلی رو برمیگردونه }; |