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

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

توسط

۱۳۹۹-۰۸-۰۱

این آموزش در تاریخ ۱۴۰۱/۰۳/۲۴ آپدیت شده است.

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

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

Free-Learn

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

1 اشیاء یا Objects در جاوااسکریپت
2 نحوه تعریف یک شئ در زبان جاوا اسکریپت
3 نحوه نمایش یا فراخوانی آیتم های یک شئ
4 یک شئ یا Object در واقع یک متغیر هست
5 حلقه for در اشیاء
6 نحوه اضافه کردن ویژگی جدید به شئ
7 نحوه حذف کردن یک ویژگی از شئ
8 متد یا 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 };

مثال شماره ۲ : تعریف یک شئ از دانشجو ( دارای خصوصیت های نام ، فامیلی ، سن و کد )

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

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

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

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

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

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

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

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

امتحان کنید

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

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

var Daneshjoo = new Object();

Daneshjoo.Name = "Ali";

Daneshjoo.Family = "Akbari";

Daneshjoo.Age = 25;

Daneshjoo.Code = 4455;

امتحان کنید

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

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

function Daneshjoo(Name, Family, Age, Code) {
 this.Name = Name;
 this.Family = Family;
 this.Age = Age;
 this.Code = Code;
}
var MyDaneshjoo = new Daneshjoo("Shima", "Sadeghi", 22, 8835);

function Daneshjoo(Name, Family, Age, Code) {

this.Name = Name;

this.Family = Family;

this.Age = Age;

this.Code = Code;

}

var MyDaneshjoo = new Daneshjoo("Shima", "Sadeghi", 22, 8835);

امتحان کنید

Free-Learn

نحوه نمایش یا فراخوانی آیتم های یک شئ

خب حالا ما مثلا شئ مون رو تعریف کردیم، حالا چجوری میتونیم به خصوصیات ( یا ویژگی یا Property ) های موجود در این شئ دسترسی داشته باشیم و آنها را فراخوانی و در نهایت در خروجی به نمایش درآوریم.

۲ روش برای فراخوانی یا نمایش خصوصیات اشیاء داریم :

objectName.property
objectName[“property”]

مثال از روش اول : نام شئ رو مینویسیم بعدش یه نقطه میزاریم و در نهایت نام خصوصیت رو وارد میکنیم

<script>

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

var a = Daneshjoo.Name;
var b = Daneshjoo.Family;
var c = Daneshjoo.Age;
var d = Daneshjoo.Code;

document.write( a + b + c + d );

</script>

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

var a = Daneshjoo.Name;

var b = Daneshjoo.Family;

var c = Daneshjoo.Age;

var d = Daneshjoo.Code;

document.write( a + b + c + d );

</script>

امتحان کنید

مثال از روش دوم : نام شئ رو مینویسیم بعدش یه [” “] میزاریم و داخلش نام خصوصیت رو وارد میکنیم

<script>

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

var a = Daneshjoo["Name"];
var b = Daneshjoo["Family"];
var c = Daneshjoo["Age"];
var d = Daneshjoo["Code"];

document.write( a + b + c + d );

</script>

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

var a = Daneshjoo["Name"];

var b = Daneshjoo["Family"];

var c = Daneshjoo["Age"];

var d = Daneshjoo["Code"];

document.write( a + b + c + d );

</script>

امتحان کنید

Free-Learn

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

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

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

var Name = "Sadegh";

1	var Name = "Sadegh";

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

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

Free-Learn

حلقه for در اشیاء

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

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

ولی خب شاید ما بخوایم تمامی آیتم ها ( یا منظور همون ویژگی ها ) رو در خروجی به نمایش درآوریم، پس اینجاست که میتونیم با استفاده از دستور ( یا حلقه بهش میگن ) for .. in تمامی ویژگی ها + مقادیر یک شئ رو در خروجی به نمایش درآوریم.

<script>

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

var MyVar ;
var Result = "";

for( MyVar in Daneshjoo ){
 Result = Result + Daneshjoo[MyVar];
}

document.write( Result );

</script>

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

var MyVar ;

var Result = "";

for( MyVar in Daneshjoo ){

Result = Result + Daneshjoo[MyVar];

}

document.write( Result );

</script>

امتحان کنید

Free-Learn

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

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

<script>

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

// اضافه کردن ویژگی جدید
Daneshjoo.PhoneNumber = "09121234567";

// نمایش شماره موبایل در خروجی
document.write( Daneshjoo.PhoneNumber );

</script>

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

// اضافه کردن ویژگی جدید

Daneshjoo.PhoneNumber = "09121234567";

// نمایش شماره موبایل در خروجی

document.write( Daneshjoo.PhoneNumber );

</script>

امتحان کنید

Free-Learn

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

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

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

// حذف کردن خصوصیت های نام و فامیلی
delete Daneshjoo.Name;
delete Daneshjoo.Family;

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

// حذف کردن خصوصیت های نام و فامیلی

delete Daneshjoo.Name;

delete Daneshjoo.Family;

امتحان کنید

Free-Learn

متد یا Method در شئ

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

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

<script>

var Daneshjoo = {
 Name:"Ali",
 Family:"Akbari",
 Age:25 ,
 Code:4455 ,
 FullName : function(){
  return this.Name + " " + this.Family;
 }
};

var a = Daneshjoo.FullName();
document.write( a );

</script>

var Daneshjoo = {

Name:"Ali",

Family:"Akbari",

Age:25 ,

Code:4455 ,

FullName : function(){

return this.Name + " " + this.Family;

}

};

var a = Daneshjoo.FullName();

document.write( a );

</script>

امتحان کنید

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

<script>

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

Daneshjoo.FullName = function(){
 return this.Name + " " + this.Family;
};

var a = Daneshjoo.FullName();
document.write( a );

</script>

var Daneshjoo = { Name:"Ali", Family:"Akbari", Age:25 , Code:4455 };

Daneshjoo.FullName = function(){

return this.Name + " " + this.Family;

};

var a = Daneshjoo.FullName();

document.write( a );

</script>

امتحان کنید

Free-Learn

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

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

Free-Learn

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

Free-Learn

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

Free-Learn

نحوه نمایش یا فراخوانی آیتم های یک شئ

Free-Learn

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

Free-Learn

حلقه for در اشیاء

Free-Learn

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

Free-Learn

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

Free-Learn

متد یا Method در شئ

Free-Learn

آموزش پیشرفته جاوااسکریپت

کار با توابع یا Functions در جاوا اسکریپت

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

آموزش مدیریت خطاها در جاوا اسکریپت

کار با آرایه ها یا Arrays در جاوااسکریپت

کار با متدهای آرایه ها در جاوااسکریپت

کار با تاریخ و ساعت در جاوااسکریپت

کار با متدهای گرفتنی یا Get در تاریخ و ساعت

کار با متدهای ست کردنی یا Set در تاریخ و ساعت

آموزش رویداد عمومی OnInvalid در HTML