آموزش جاوا اسکریپت – آبجکت‌های جاوا اسکریپت

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

یک آبجکت Object چیست؟

جاوا اسکریپت یک زبان مبتنی بر شیء (Object-based) است و در جاوا اسکریپت همه چیز یک آبجکت است یا مانند آبجکت عمل می کند. بنابراین, برای کار موثر با جاوا اسکریپت نیاز است که نحوه کار با object ها را به خوبی یاد بگیریم.

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

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

یک آبجکت هم مشابه آرایه است, اما تفاوت این است که شما کلید ها را تعریف می کنید مثل نام, سن, جنسیت و غیره.

در بخش زیر با جزییات در مورد آبجکت‌های جاوا اسکریپت یاد می گیرید.

ساخت آبجکت ها

یک Object می تواند با براکت فرفری {} به همراه لیست اختیاری خصوصیات ایجاد شود.

یک خصوصیت همان جفت “key:value” است که key (یا نام خصوصیت) همیشه یک رشته است و value (یا مقدار خصوصیت) می تواند هر نوع داده ای مثل رشته, عدد, بولین انواع داده پیچیده مثل آرایه ها, توابع یا دیگر آبجکت ها باشد.

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

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

var person = {

age: 28,

gender: "Male",

displayName: function() {

alert(this.name);

}

};

مثال بالا یک آبجکت به نام person را می سازد که خصوصیات name, age, gender و یک متد به نام displayName() دارد.

متد displayName() مقدار this.name را که همان name از شی person است را نشان می دهد. آسان ترین راه برای ساخت یک آبجکت در جاوا اسکریپت, با سینتکس object literal شناخته می شود.

نام خصوصیت آبجکت ها معمولا نیاز به علامت نقل قول نیستند مگر اینکه جز کلمات رزرو شده خود جاوا اسکریپت باشد. یا اگر دارای فاصله یا کاراکتر خاص (هر چیزی غیر حروف, اعداد و کاراکترهای _ و $) باشد یا اگر با اعداد شروع شود.

var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};

var person = {

"first name": "Peter",

"current age": 28,

gender: "Male"

};

نکته: از آنجا که در ECMAScript 5 همچنان می توانید از کلمات رزرو شده به عنوان نام خصوصیات آبجکت بدون علامت نقل قول استفاده کنید. به هر حال برای سازگاری بهتر, از اینکار خودداری کنید.

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

برای دسترسی یا دریافت مقادیر خصوصیات, می توانید از نقطه . یا براکت مربعی [] به صورت مثال زیر استفاده کنید.

var book = {
    "name": "Harry Potter and the Goblet of Fire",
    "author": "J. K. Rowling",
    "year": 2000
};

// Dot notation
document.write(book.author);  // Prints: J. K. Rowling

// Bracket notation
document.write(book["year"]); // Prints: 2000

var book = {

"name": "Harry Potter and the Goblet of Fire",

"author": "J. K. Rowling",

"year": 2000

};

// Dot notation

document.write(book.author); // Prints: J. K. Rowling

// Bracket notation

document.write(book["year"]); // Prints: 2000

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

var book = {
    name: "Harry Potter and the Goblet of Fire",
    author: "J. K. Rowling",
    "publication date": "8 July 2000"
};

// Bracket notation
document.write(book["publication date"]); // Prints: 8 July 2000

var book = {

author: "J. K. Rowling",

"publication date": "8 July 2000"

};

// Bracket notation

document.write(book["publication date"]); // Prints: 8 July 2000

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

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var key = prompt("Enter any property name to get its value");
alert(person[key]); // Outputs: Peter (if enter "name")

var person = {

age: 28,

gender: "Male"

};

var key = prompt("Enter any property name to get its value");

alert(person[key]); // Outputs: Peter (if enter "name")

حلقه تکرار خصوصیات آبجکت

می توانید جفت کلید-مقدار یک آبجکت را با حلقه for-in تکرار کنید.

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

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Iterating over object properties
for(var i in person) {  
    document.write(person[i] + "<br>"); // Prints: name, age and gender
}

var person = {

age: 28,

gender: "Male"

};

// Iterating over object properties

for(var i in person) {

document.write(person[i] + "<br>"); // Prints: name, age and gender

}

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

می توانید یک خصوصیات جدید را ایجاد یا بروزرسانی کنید با استفاده از نقطه . یا براکت []

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Setting a new property
person.country = "United States";
document.write(person.country); // Prints: United States

person["email"] = "netparadis@mail.com";
document.write(person.email); // Prints: netparadis@mail.com

// Updating existing property
person.age = 30;
document.write(person.age); // Prints: 30

person["name"] = "Peter Parker";
document.write(person.name); // Prints: Peter Parker

var person = {

age: 28,

gender: "Male"

};

// Setting a new property

person.country = "United States";

document.write(person.country); // Prints: United States

person["email"] = "netparadis@mail.com";

document.write(person.email); // Prints: netparadis@mail.com

// Updating existing property

person.age = 30;

document.write(person.age); // Prints: 30

person["name"] = "Peter Parker";

document.write(person.name); // Prints: Peter Parker

حذف خصوصیت آبجکت

اپراتور delete برای حذف کامل یک property از آبجکت/شی استفاده می شود.

حذف کردن یکی از راه های حذف یک خصوصیت از object است. می توانید با ست کردن undefined یا null نیز مقادیر خصوصیت را تغییر بدید و نه حذف کنید

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

// Deleting property
delete person.age;
alert(person.age); // Outputs: undefined

var person = {

age: 28,

gender: "Male",

displayName: function() {

alert(this.name);

}

};

// Deleting property

delete person.age;

alert(person.age); // Outputs: undefined

نکته: اپراتور delete فقط یک خصوصیت آبجکت یا المان آرایه را حذف می کند. روی متغیرها یا توابع تعریف شده تاثیری ندارد. به هرحال, نباید از delete برای حذف المان آرایه استفاده کنید چرا که طول آرایه را تغییر نمی دهد, بلکه کل یک سوراخ در آرایه رها می کند!

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

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

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

person.displayName(); // Outputs: Peter
person["displayName"](); // Outputs: Peter

var person = {

age: 28,

gender: "Male",

displayName: function() {

alert(this.name);

}

};

person.displayName(); // Outputs: Peter

person["displayName"](); // Outputs: Peter

دستکاری مقادیر در مقابل رفرنس

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

در حالیکه مقادیر اولیه مثل رشته ها و اعداد کل مقدار آنها کپی می شود و نه خودشان.

برای درک بهتر مثال زیر را ببینید :

var message = "Hello World!";

var greet = message; // Assign message variable to a new variable
greet = "Hi, there!";

document.write(message);  // Prints: Hello World!
document.write(greet);  // Prints: Hi, there!

var message = "Hello World!";

var greet = message; // Assign message variable to a new variable

greet = "Hi, there!";

document.write(message); // Prints: Hello World!

document.write(greet); // Prints: Hi, there!

در مثال بالا, ما یکی کپی از متغیر message گرفتیم و مقدار کپی آن را تغییر دادیم (متغیر greet).

هر دو متغیر متمایز و جدا از هم هستند اما اگر این کار را با آبجکت ها انجام بدیم, نتیجه متفاوت خواهد بود :

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var user = person; // Assign person variable to a new variable
user.name = "Harry";

document.write(person.name);  // Prints: Harry
document.write(user.name);  // Prints: Harry

var person = {

age: 28,

gender: "Male"

};

var user = person; // Assign person variable to a new variable

user.name = "Harry";

document.write(person.name); // Prints: Harry

document.write(user.name); // Prints: Harry

همانطور که به وضوح می بینید, هر تغییری در متغیر user انجام شود, متغیر person نیز تغییر می کند چرا که هر دو یک رفرنس از آبجکت مشخص را دارند. بنابراین, به سادگی کپی کردن آبجکت یک کلون از آن را ایجاد نمی کند بلکه یک رفرنس از آبجکت را می سازد.

امیدوارم از آبجکت‌های جاوا اسکریپت نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش جاوا اسکریپت – آبجکت‌های جاوا اسکریپت

یک آبجکت Object چیست؟

ساخت آبجکت ها

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

حلقه تکرار خصوصیات آبجکت

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

حذف خصوصیت آبجکت

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

دستکاری مقادیر در مقابل رفرنس

لغو پاسخ

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

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه