جاوااسکریپت یک زبان برنامه‌نویسی شئ‌گرا مدرن است. این زبان براساس یک دسته از اشیاء ساخته شد که با همدیگر تعامل داشتند. اما روش کاری جاوااسکریپت از نظر شئ‌گرایی با زبان‌های دیگر کمی تفاوت دارد. در جاوااسکریپت راه‌های متعددی برای تعریف اشیاء وجود دارد که ما قصد داریم در این مطلب از وبسایت راکت در ارتباط با آن‌ها صحبت کنیم و آن‌ها را پیاده‌سازی نماییم.
منظور از شئ جاوااسکریپتی چیست؟
یک شئ جاوااسکریپتی در واقع یک متغیر است که می‌تواند مقادیر داده‌ای متفاوتی را نگه‌داری بکند. هر شئ در واقع یک جعبه است که در آن مقادیر مرتبطی را در خود نگه‌داری می‌کند. برای مثال یک حساب بانکی می‌تواند یک شئ باشد که اطلاعات صاحب حساب در آن قرار گرفته است.
در جاوااسکریپت اشیاء می‌توانند دو نوع مقدار را در خود ذخیره بکنند:
۱- خصوصیات که برای مقادیر ایستا استفاده می‌شود.
۲- متدها که برای مقادیر پویا استفاده می‌شود.
وقتی که شما یک شئ جاوااسکریپتی را ایجاد می‌کنید مجبور خواهید بود که نام، مشخصات و متدهای آن را تعریف نمایید.
ایجاد یک شئ جاوااسکریپتی
شما می‌توانید یک شئ جاوااسکریپتی را در چهار روش مختلف ایجاد کنید:
۱- با استفاده از عبارت object
۲- با استفاده از تابع سازنده
۳- با استفاده از کلاس‌های اکمااسکریپت ۶
۴- با استفاده از متد object.create()
۱. عبارت object
استفاده از روش معمول جاوااسکریپت برای ایجاد اشیاء یکی از ساده‌ترین راه‌هاست. از آنجایی که این شئ‌ها از نوع متغیر تعریف می‌شوند بنابراین شما نیز می‌توانید مانند یکسری متغیر با آن‌ها تعامل داشته باشید. برای مثال در کد زیر ما یک شئ را با نام user001 ساخته‌ایم که سه خصوصیت یا properties دارند: firstname, lastname و dateofBirth.
اگر کنسول را در محیط مرورگرتان باز کنید و با استفاده از تابع console.log() از شئ ساخته شده خروجی بگیرید متوجه می‌شوید که شئ به خوبی ساخته شده است:
console.log(user001);
// {firstName: "John", lastName: "Smith", dateOfBirth: 1985}
همچنین می‌توانید هر کدام از خصوصیات ایجاد شده را با ارجاع دادن از طریق شئ به نمایش در بیاورید:
console.log(user001.dateOfBirth);
// 1985
در شئ ساخته شده شما می‌توانید تابع یا همان متد را نیز اضافه نمایید. برای مثال ما می‌خواهیم با استفاده از یک متد getName() نام و نام خانوادگی user001 را دریافت نماییم. با استفاده از کلمه کلیدی this ما می‌توانیم خروجی متد را به خصوصیات شئ ساخته شده ارجاع دهیم:
var user001 = {
firstName: "John",
lastName: "Smith",
dateOfBirth: 1985,
getName: function(){
return "User's name: " + this.firstName + " " + this.lastName;
}
};
درست مانند حالت قبل شما می‌توانید این موجودیت از شئ user001 را در یک تابع console.log امتحان کنید اما فراموش نکنید که بعد از نام متد باید از پرانتز باز و بسته استفاده کنید به این دلیل که این موجودیت یک متد است نه یک خصوصیت!
console.log(user001.getName());
// User's name: John Smith
جدای از خصوصیات و متدها، شما می‌توانید شئ دیگری را در داخل یک شئ دیگر به عنوان یک خصوصیت ایجاد کنید. زمانی که بخواهید داده‌های مختلف منتسب به یک شئ را دسته‌بندی و مرتب‌سازی کنید، این ویژگی بسیار کارآمد خواهد بود. در زیر ما شئ user001 را با یک شئ دیگر با نام spokenLanguages توسعه داده‌ایم. در این حالت نیز برای تعریف یک شئ از همان قاعده‌های قبلی استفاده کرده‌ایم:
var user001 = {
firstName: "John",
lastName: "Smith",
dateOfBirth: 1985,
spokenLanguages: {
native: "English",
fluent: "Spanish",
intermediate: "Chinese"
}
};
حال که شما شئ جدیدی اضافه کرده‌اید، می‌توانید از طریق دستور زیر به آن نیز دسترسی داشته باشید:
console.log(user001.spokenLanguages);
// {native: "English", fluent: "Spanish", intermediate: "Chinese"}
اگر بعد از user001.spokenLanguages نام خصوصیات شئ داخلی را وارد کنید، می‌توانید به یک مورد منحصر به فرد از آن‌ها نیز دسترسی داشته باشید:
console.log(user001.spokenLanguages.intermediate);
// Chinese
در کنار اشیاء شما می‌توانید از یک آرایه نیز در شئ‌های‌تان استفاده کنید. زمانی که بخواهید تنها یک مجموعه داده را بدون نیاز به حالت key-value داشته باشید این حالت بسیار کاربردی خواهد بود:
var user001 = {
firstName: "John",
lastName: "Smith",
dateOfBirth: 1985,
spokenLanguages: ["English", "Spanish", "Chinese"]
};
حال وقتی که این مقدار را در console.log به نمایش بگذارید، داده شما به صورت آٰرایه نمایش داده خواهد شد. می‌توانید با استفاده از مشخصات مربوط به آرایه مانند length و یا حالت اندیس گذاری، به مشخصات آرایه spokenLanguages دسترسی داشته باشید.
console.log(user001.spokenLanguages);
// (3) ["English", "Spanish", "Chinese"]
console.log(user001.spokenLanguages.length);
// 3
عبارت Object که ما از آن استفاده می‌کنیم خود نمونه‌ای از حالت کلی Object() است. هر کدام از این موارد نیز فارغ از اعضای خودشان، یکسری اعضا را به ارث می‌برند. برای مثال زمانی که شما یک آٰرایه را تعریف می‌کنید با خاصیت lenght سر و کار خواهید داشت که این مورد نمونه‌ای از Array() عمومی است.
۲. تابع سازنده
دومین روش برای ایجاد شئ در جاوااسکریپت استفاده از متد سازنده است. در خلاف با حالت قبل شما در تابع سازنده شئ‌ها را بدون تعریف مقدار آن‌ها تعیین می‌کنید. بعد از آن شما یک نمونه از شئ را ایجاد کرده و سپس مقدار دهی را برای نمونه‌های مختلف انجام میدهید.
در زیر شما می‌توانید شئ User را مشاهده کنید که با استفاده از تابع سازنده ایجاد شده است. بعد از آن ما با استفاده از متغیر user001 یک نمونه جدید از شئ را ایجاد کرده‌ایم. کلمه کلیدی new به ما این قابلیت را می‌دهد تا نمونه جدید را به خوبی ایجاد نماییم.
function User(firstName, lastName, dateOfBirth) {
this.firstName = firstName;
this.lastName = lastName;
this.dateOfBirth = dateOfBirth;
}
var user001 = new User("John", "Smith", 1985);
حال درست مانند حالت‌های قبلی می‌توانید با استفاده از دستور console.log نمونه ایجاد شده را به خروجی بفرسید.
console.log(user001);
// User {firstName: "John", lastName: "Smith", dateOfBirth: 1985}
در کنار خصوصیات شما در اینجا نیز قابلیت ساخت متدها را با استفاده از تابع سازنده دارید. تنها نیاز است که از کلمه کلیدی this در اینجا استفاده کنید:
function User(firstName, lastName, dateOfBirth) {
this.firstName = firstName;
this.lastName = lastName;
this.dateOfBirth = dateOfBirth;
this.getName = function(){
return "User's name: " + this.firstName + " " + this.lastName;
}
}
var user001 = new User("John", "Smith", 1985);
حال می‌توانید متد مورد نظرتان را در console.log امتحان نمایید.
console.log(user001.getName());
// User's name: John Smith
از آنجایی که در جاوااسکریپت شئ‌های بسیار زیادی وجود دارد که به روش تابع سازنده ایجاد شده‌اند، می‌توانید نمونه‌های آن‌ها را نیز دریافت کنید.
برای مثال Date() یک شئ کلی است که می‌شود از آن نمونه برداری کرد و مشخصات منحصر به فرد آن را دریافت نمود:
var today = new Date();
console.log(today);
// Wed Nov 14 2018 08:52:43 GMT+0100
۳. کلاس‌های اکمااسکریپت ۶
اکمااسکریپت ۶ یک روش جدید را برای ایجاد شئ‌ها در جاوااسکریپت پیاده‌سازی کرده است. این راه‌حل از طریق دستور class انجام می‌شود. اگرچه جاوااسکریپت یک زبان برنامه‌نویسی شئ‌گرا است اما قبل از ES6 ما آنچنان با مفاهیم شئ‌گرایی که در زبانی مانند جاوا وجود دارد سر و کار نداشتیم. سینتکس class در ES6 عملا هیچ منطق جدیدی را به جاوااسکریپت اضافه نکرد به این دلیل که چنین موضوعی قبلا وجود داشت اما راهکاری برای استفاده از آن نبود که ES6 حال به ما آن قابلیت را نیز داده است.
با استفاده از سینتکس جدید ما در زیر می‌خواهیم یک شئ user001 با مشخصات مثال‌های قبلی ایجاد کنیم:
class User {
constructor(firstName, lastName, dateOfBirth) {
this.firstName = firstName;
this.lastName = lastName;
this.dateOfBirth = dateOfBirth;
this.getName = function(){
return "User's name: " + this.firstName + " " + this.lastName;
}
}
}
var user001 = new User("John", "Smith", 1985);
شئ user001 که در آخر تعریف شده است یک نمونه از کلاس User است. درست مانند تابع سازنده در اینجا ما نیز از سینتکس new استفاده کرده‌ایم.
۴. متد object.create()
آخرین راهکاری که ما در این مقاله مورد بررسی قرار می‌دهیم استفاده کردن از متد object.create() است. این مورد یک متد استاندارد در جاوااسکریپت است که به مدت زیادی است وجود دارد. متد Object.create() به شما اجازه می‌دهد تا از یک عبارت شئ موجود برای ایجاد یک شئ جدید استفاده کنید.
تصور کنید که بخواهید شئ user002 را با همان خصوصیات و متدهای user001 ایجاد کنید. برای اینکار به سادگی می‌توانید از متد object.create بهره بگیرید. به مثال زیر دقت کنید:
var user001 = {
firstName: "John",
lastName: "Smith",
dateOfBirth: 1985,
getName: function(){
return "User's name: " + this.firstName + " " + this.lastName;
}
};
var user002 = Object.create(user001);
user002.firstName = "Jane";
user002.lastName = "King";
user002.dateOfBirth = 1989;
زمانی که شما شئ جدید user002 را در کنسول تست کنید متوجه می‌شوید که همه چیز به درستی کار می‌کند:
console.log(user002);
// {firstName: "Jane", lastName: "King", dateOfBirth: 1989}
console.log(user002.dateOfBirth);
// 1989
console.log(user002.getName());
// User's name: Jane Kin
در پایان
در جاوااسکریپت شما می‌توانید از تکنیک‌های مختلفی برای ایجاد یک شئ جدید استفاده کنید.
شما می‌توانید یک عبارت شئ جدید را با استفاده از خود قابلیت شئ در جاوااسکریپت پیاده‌سازی نمایید، در کنار این مورد می‌توانید از توابع سازنده، کلاس‌ها و Object.create نیز بهره بگیرید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید