خانه آموزش زبان جاوااسکریپت آموزش JS پیشرفته کار با اشیاء یا Objects در جاوااسکریپت

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

توسط

۱۳۹۹-۰۸-۰۱

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با اشیاء یا Objects در جاوااسکریپت با من همراه باشید.

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

Free-Learn

آنچه در این جلسه میخوانید :

1 اشیاء یا Objects در جاوااسکریپت
2 شکل کلی یک شئ در جاوااسکریپت
3 یک شئ یا Object در واقع یک متغیر هست
4 نحوه تعریف شئ در جاوااسکریپت
5 نحوه نمایش یا فراخوانی خصوصیت یک شئ
6 حلقه for در اشیاء
7 نحوه اضافه کردن ویژگی جدید به شئ
8 نحوه حذف کردن یک ویژگی از شئ
9 متد یا Method در شئ

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

در جاوااسکریپت میگن اشیاء ( شئ یا Object ) پادشاه هستن ، منظورش از این پادشاه بودن یعنی کلی بودن ساختار جاوااسکریپت بر پایه اشیاء یا Objects ( یعنی همواره جاوااسکریپت مبتنی بر شئ هست )

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

Free-Learn

شکل کلی یک شئ در جاوااسکریپت

اگه بخوایم بصورت کلی و یه شکل کلی از اشیاء یا شئ در جاوااسکریپت داشته باشیم میتونیم بصورت زیر نمایشش بدیم :

Object_Name = { Property1:Value1 , Property2:Value2 , ... PropertyN:ValueN }

1	Object_Name = { Property1:Value1 , Property2:Value2 , ... PropertyN:ValueN }

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

بفرض مثال Property1 یعنی نام ویژگی یا خصوصیت اول بعدش یه : میزاریم و مقدار همین خصوصیت رو مینویسیم بعد یه کاما , و دیگه بقیه خصوصیات + مقدارشون رو وارد میکنیم.

مثال : تعریف یک شئ از ماشین ( BMW )

var Car = { Name:"BMW", Model:"M440i", Color:"Light Green" , Code:669077 };

1	var Car = { Name:"BMW", Model:"M440i", Color:"Light Green" , Code:669077 };

Free-Learn

یک شئ یا Object در واقع یک متغیر هست

اگه یادتون باشه در جلسات قبلی ما یاد گرفتیم که چجوری میتونیم یک متغیر رو تعریف کنیم ، خب خیلی راحت با استفاده از کلمه کلیدی var میتونیم یک متغیر رو تعریف کنیم.

بفرض مثال میخوایم یک متغیر به نام test تعریف کنیم، پس میتونیم بصورت زیر عمل کنیم :

var test = "Salam";

1	var test = "Salam";

خب ما یه متغیر بنام test تعریف کردیم و مقدار Salam بهش دادیم، تموم شد رفت.

حال میگه یک شئ هم در حقیقت همون متغیر هست و برای نگهداری داده ها استفاده میشه فقط با این تفاوت که این متغیر میتونه ویژگی ( خصوصیات ) + مقدار داشته باشه.

مثلا میخوایم یک شئ از دانشجو تعریف کنیم، خب این دانشجو میتونه [ نام ، فامیلی ، کد دانشجویی و.. ] داشته باشه ، پس خوده دانشجو میشه شئ ( یا در واقع همون متغیر ) و به نام یا فامیلی و.. میگیم ویژگی های این شئ ، و در نهایت هر یک از این ویژگی ها هم میتونن مقدار داشته باشند.

var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 };

1	var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 };

Free-Learn

نحوه تعریف شئ در جاوااسکریپت

چندین روش برای ایجاد و تعریف یک شئ Object در زبان جاوااسکریپت وجود داره که این روش ها به شرح زیر می باشند :

تعریف شئ و خصوصیات در یک عبارت ( ساده ترین روش )
تعریف شئ و خصوصیات با استفاده از کلمه کلیدی new
تعریف شئ و خصوصیات با استفاده از سازنده ( یا Constructor ) شئ

تعریف شئ و خصوصیات در یک عبارت ( ساده ترین روش )

تو این روش ما هم خصوصیات هم مقادیر و هم خوده شئ رو در یک عبارت تعریف میکنیم. ( ساده ترین روش همین می باشد )

<script>

var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 };

</script>

var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 };

</script>

امتحان کنید

تعریف شئ و خصوصیات با استفاده از کلمه کلیدی new

<script>

var daneshjoo = new Object();
daneshjoo.Name = "Ali";
daneshjoo.Family = "Akbari";
daneshjoo.Age = 26;
daneshjoo.Code = 4455;

</script>

var daneshjoo = new Object();

daneshjoo.Name = "Ali";

daneshjoo.Family = "Akbari";

daneshjoo.Age = 26;

daneshjoo.Code = 4455;

</script>

امتحان کنید

تعریف شئ و خصوصیات با استفاده از سازنده ( یا Constructor ) شئ

تو این روش باید یه تابع ایجاد کنیم با پارامترهای مشخص ( مثلا برای دانشجو نام و فامیلی و سن و کد میخوایم ) بعدش با استفاده از کلمه کلیدی this مقدار هر یک از این پارامترهارو ( که میشه همون آرگومان ها ) به خوده شئ اختصاص میدیم.

<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>

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”]

مثال از روش اول :

<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>

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>

امتحان کنید

مثال از روش دوم :

<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>

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 تمامی ویژگی ها + مقادیر یک شئ رو در خروجی به نمایش درآوریم.

<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>

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

نحوه اضافه کردن ویژگی جدید به شئ

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

<script>

var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 };

daneshjoo.PhoneNumber = 09110911120; // اضافه کردن ویژگی جدید
document.write( daneshjoo.PhoneNumber );

</script>

var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 };

daneshjoo.PhoneNumber = 09110911120; // اضافه کردن ویژگی جدید

document.write( daneshjoo.PhoneNumber );

</script>

امتحان کنید

Free-Learn

نحوه حذف کردن یک ویژگی از شئ

برای حذف یک ویژگی از یک شئ کافیه از کلمه کلیدی delete استفاده نماییم.

<script>

var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 };

delete daneshjoo.Name; // حذف کردن ویژگی نام
delete daneshjoo.Family; // حذف کردن ویژگی فامیلی

</script>

var daneshjoo = { Name:"Ali", Family:"Akbari", Age:26 , Code:4455 };

delete daneshjoo.Name; // حذف کردن ویژگی نام

delete daneshjoo.Family; // حذف کردن ویژگی فامیلی

</script>

امتحان کنید

Free-Learn

متد یا Method در شئ

متدها در واقع عملیاتی هستند که بروی اشیاء ( شئ ) انجام میشه ، و بطور کلی تر بخوایم بگیم متدها یک تابع هستند که به عنوان یک خصوصیت از شئ ذخیره میشوند.

نحوه ایجاد متد در یک شئ – روش اول – داخل شئ

<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>

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>

امتحان کنید

نحوه ایجاد متد در یک شئ – روش دوم – خارج از شئ

var daneshjoo = {
 Name:"Ali",
 Family:"Akbari",
 Age:26 ,
 Code:4455
};

daneshjoo.FullName = function() {
 return this.Name + " " + this.Family; // نام و فامیلی رو برمیگردونه
};

var daneshjoo = {

Name:"Ali",

Family:"Akbari",

Age:26 ,

Code:4455

};

daneshjoo.FullName = function() {

return this.Name + " " + this.Family; // نام و فامیلی رو برمیگردونه

};

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب