آبجکت یا object در جاوااسکریپت (قسمت هفدهم)

مفهوم آبجکت ها،متدها و خصوصیات در زندگی واقعی ما وجود دارد و در اصل زبان های برنامه نویسی این مفاهیم را از زندگی انسان ها برگرفته اند.

در زندگی واقعی یک ماشین یک آبجکت است. یک ماشین دارای خصوصیت هایی مانند وزن،رنگ و متدهایی مانند حرکت کردن و ترمز کردن است.

همه ماشین ها دارای خصوصیات یکسانی هستند اما مقدار این خصوصیت ها با هم تفاوت دارد.در واقع مقادیر خصوصیات یک ماشین نسبت به ماشین دیگر متفاوت است. همچنین ماشین ها دارای متدهای (روش ها) یکسانی هستند اما تفاوت آنها در زمان اجرای آنها می‌باشد.

در جلسات گذشته درباره متغیرها نکاتی را یاد گرفتید و متوجه شدید متغیرها در حالت عادی تنها می‌تواند دارای یک مقدار باشد.

مثال:

let car = "Fiat"

1	let car = "Fiat"

آبجکت ها

آبجکت ها هم نوعی متغیر هستند اما با این تفاوت که در خود چندین مقدار را ذخیره میکنند.

مقادیر آبجکت در قالب کلید و مقدار تعریف می‌شود و بین آنها از دو نقطه (:) استفاده میشود. هر آیتم در آبجکت با , از یکدیگر جدا میشوند. به هر آیتم property گفته میشود.

آبجکت زیر دارای ۳ خصوصیت می باشد. که با کلمه کلیدی const تعریف شده است.

مثال:

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

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

نام خصوصیات عبارتند از: type, model, color

استفاده از کلمه کلیدی cost روشی مناسب در تعریف آبجکت است. در این حالت نمیتوان آبجکت جدید با نام ساخته شده قبلی ایجاد کرد اما می‌توان خصوصیات آبجکت را تغییر داد.

نحوه تعریف آبجکت

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

هر خصوصیت شامل دو بخش می‌شود: نام خصوصیت و مقدار خصوصیت.

مثال:

const person = {firstName:"amir", lastName:"javanmir", age:30, eyeColor:"blue"};

1	const person = {firstName:"amir", lastName:"javanmir", age:30, eyeColor:"blue"};

فاصله میان دستورات و نوشتن خصوصیات در چند خط اهمیتی ندارد تنها برای خوانایی خطوط است.

مثال:

const person = {
firstName: "amir",
lastName: "javanmir",
age: 30,
eyeColor: "blue"
};

const person = {

firstName: "amir",

lastName: "javanmir",

age: 30,

eyeColor: "blue"

};

خصوصیات در آبجکت

خصوصیات در آبجکت ها بصورت name:values می باشد.

نام خصوصیات عبارتند از:

firstName
lastName
age
eyeColor

مقادیر خصوصیات عبارتند از:

amir
javanmir
۳۰
blue

دسترسی به خصوصیات

برای دسترسی به مقادیر یک خصوصیات باید نام آبجکت را نوشته یک نقطه قرار داده و نام خصوصیت را بعد از آن قرار دهیم.

نحوه نوشتن:

objectName.propertyName;

1	objectName.propertyName;

مثال:

person.lastName;
//javanmir

1 2	person.lastName; //javanmir

راه دیگر صدا زدن نام خصوصیت استفاده از روش آرایه است باید نام خصوصیت را درون براکت بنویسیم.

نحوه نوشتن:

objectName["propertyName"];

1	objectName["propertyName"];

مثال:

person["lastName"];
//javanmir

1 2	person["lastName"]; //javanmir

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

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

نحوه نوشتن:

const person = {
firstName: "amir",
lastName: "javanmir",
age: 30,
eyeColor: "blue",
run : function (){
return 50;
}
};

const person = {

firstName: "amir",

lastName: "javanmir",

age: 30,

eyeColor: "blue",

run : function (){

return 50;

}

};

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

مثال:

const person = {
firstName: "amir",
lastName: "javanmir",
age: 30,
eyeColor: "blue",
run : function (num){
return num + 50;
}
};
person.run(10);
//60

const person = {

firstName: "amir",

lastName: "javanmir",

age: 30,

eyeColor: "blue",

run : function (num){

return num + 50;

}

};

person.run(10);

//60

نمونه فراخوانی متد در آبجکت ها

برای دسترسی به متد مورد نظر نام آبجکت را نوشته و بعد نام تابع را نوشته و یک پرانتز قرار می دهیم.در صورت داشتن پارامتر آنها را نیز ارسال می کنیم.

نحوه نوشتن:

objectName.methodName();

1	objectName.methodName();

مثال:

person.run(10);
//60

1 2	person.run(10); //60

کلمه کلیدی this در آبجکت

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

مثال:

const person = {
firstName: "amir",
lastName: "javanmir",
age: 30,
eyeColor: "blue",
run : function (num){
return this.firstName + " " +this.num + 50;
}
};

const person = {

firstName: "amir",

lastName: "javanmir",

age: 30,

eyeColor: "blue",

run : function (num){

return this.firstName + " " +this.num + 50;

}

};

در مثال بالا دستور this به آبجکت person اشاره دارد.بنابراین this.firstName و this.num به خصوصیت firstName و num که مربوط به this است اشاره دارد.

واژه this بسته به بخش فراخوان دهنده، ممکن است دارای نقش های متفاوت باشند:

درون یک آبجکت this به آبجکت خودش اشاره می کند.
واژه this به تنهایی به آبجکت سراسری یعنی window اشاره می کند.
درون تابع this به آبجکت سراسری یعنی window اشاره می کند.
در حالت strict mode واژه this مقدارش برابر با undefined است.
در یک رویداد this به المنتی اشاره می کند که رویداد توسط آن فراخوانی شده است.
در متدهایی مانند call, bind و apply واژه this ممکن است به هر آبجکتی که بعنوان پارامتر به این سه متد ارسال شده باشد اشاره کند.

نکته ای که وجود دارد این است this کلمه کلیدی است و از آن نمی توان بعنوان نام متغیر استفاده کرد.

واژه this درون تابع

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

در مثال زیر تابع fullName به آبجکت person اشاره می کند.

مثال:

const person = {
firstName: "Amir",
lastName : "Javanmir",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

const person = {

firstName: "Amir",

lastName : "Javanmir",

id : 5566,

fullName : function() {

return this.firstName + " " + this.lastName;

}

};

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

اخطار

برای ایجاد آبجکت یکی دیگر از روش ها قرار دادن کلمه کلیدی new قبل از متغیر است. سعی نکنید رشته، اعداد و بولین را بصورت آبجکت و با استفاده از دستور new بسازید چون هیچ دلیلی برای پیچیده کردن کد وجود ندارد.

زمانی که مقدار یک property را دریافت می‌کنیم یا نمایش میدهیم get کردن و زمانی که مقداری را تنظیم میکنیم چه از داخل آبجکت چه از بیرون آبجکت set کردن گفته میشود.

در صورتی که نام کلید property شما دو حرفی است و بینشان – وجود دارد،برای استفاده از این روش باید آنها را درون کوتیشن بنویسیم.

مثال:

var obj = {
name : "amir",
family : "javanmir",
"full-Name" : "amir javanmir"
}

var obj = {

name : "amir",

family : "javanmir",

"full-Name" : "amir javanmir"

}

همانطور که در بالا مشاهده می کنید واژه full-Name درون کوتیشن نوشته شده است.

هنگام فراخوانی نیز نمیتوان آنها را بصورت عادی فراخوانی کرد.برای فراخوانی باید نام کلید را درون براکت قرار دهیم.

مثال حالت اشتباه:

console.log(obj.full-Name);

1	console.log(obj.full-Name);

مثال حالت درست:

console.log(obj.["full-Name"]);

1	console.log(obj.["full-Name"]);

روش دیگر تعریف آبجکت

یکی دیگر از روش های تعریف آبجکت در جاوااسکریپت استفاده از تابع اصلی Object و دستور new است.

برای ساخت باید از روی تابع سازنده آبجکت با دستور new آبجکت بسازیم.

مثال:

var obj = new Object();
console.log(obj);
//{}

var obj = new Object();

console.log(obj);

//{}

برای تخصیص خصوصیت و متد به آبجکت هم می توانید بصورت جداگانه مقادیر خود را اضافه کنید.

مثال:

var obj = new Object();
obj.name = "amir javanmir";
console.log(obj);
//{name: 'amir javanmir'}

var obj = new Object();

obj.name = "amir javanmir";

console.log(obj);

//{name: 'amir javanmir'}

راه دیگر اضافه کردن خصوصیت ارسال آبجکت به تابع Object است.

مثال:

var obj = new Object({
name : "amir javanmir"
});
console.log(obj);
//{name: 'amir javanmir'}

var obj = new Object({

name : "amir javanmir"

});

console.log(obj);

//{name: 'amir javanmir'}

همچنین این کار در سرعت اجرای دستورات تاثیرگذار است.

کلمات کلیدی را وارد نمایید

آبجکت یا object در جاوااسکریپت (قسمت هفدهم)

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

آبجکت ها

نحوه تعریف آبجکت

خصوصیات در آبجکت

دسترسی به خصوصیات

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

نمونه فراخوانی متد در آبجکت ها

کلمه کلیدی this در آبجکت

واژه this درون تابع

اخطار

روش دیگر تعریف آبجکت

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

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

دسترسی سریع

کلمات کلیدی را وارد نمایید

آبجکت یا object در جاوااسکریپت (قسمت هفدهم)

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

آبجکت ها

نحوه تعریف آبجکت

خصوصیات در آبجکت

دسترسی به خصوصیات

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

نمونه فراخوانی متد در آبجکت ها

کلمه کلیدی this در آبجکت

واژه this درون تابع

اخطار

روش دیگر تعریف آبجکت

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میرطراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

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

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب