اغلب برنامه‌نویسان علاقه مند به برنامه‌نویسی شی‌گرا هستند. اما یادگیری این مورد برای کسانی که به تازگی شروع به برنامه‌نویسی کردند، ممکن است کمی پیچیده باشد. این مقاله را آماده کردیم تا از پیچ و خم مسیر یادگیری برنامه‌نویسی شی‌گرا در جاوااسکریپت برای تازه واردها کمتر کنیم.
ایجاد Object در جاوااسکریپت یکی از مواردی است که در ابتدا بسیاری را گیج و سردرگم می‌کند. این در حالی است که در جاوااسکریپت روش‌های شگفت‌آوری برای ایجاد Object وجود دارد. بنابراین، در ادامه، روش‌های اصلی ایجاد Object را بررسی خواهیم کرد.
var objectLiteralPerson = {
// setting property
name: "Bob Benson" ,
// declare function
greet () {
// 'this' refers to current object
console.log("Hello, I'm " + this.name);
}
}
از مزایای استفاده از Object Literals برای ایجاد Object می‌توان به راحتی، انعطاف‌پذیری در تعریف و تعداد خطوط کم کد اشاره کرد.
شما می‌توانید در هر جایی که خواستید از Object Literals در برنامه استفاده کنید. این موضوع نیز می‌تواند برای برنامه‌نویسان بسیار مفید واقع شود.
در مقابل، مسلم است که Object Literals معایب و نقص‌هایی نیز دارد. به عنوان مثال، اگر بخواهید دو شی مشابه ایجاد کنید که تفاوت‌هایی بسیار جزئی دارند، باید دقیقا دو شی ایجاد کنید و متدها و خصوصیات هر دو را بنویسید و تفاوت‌ها را مشخص کنید. این کار باعث می‌شود که حافظه بیشتری اشغال شود و حجم برنامه شما بالا رود که قطعاً شرایط ایده‌آلی نیست.
بهترین روش برای استفاده از Object Literals این است که یک گروه منحصربه‌فرد از عملکردها و خصوصیات مشابه ایجاد کنید. با این شرط که هیچ یک از آنها به هیچ وجه در جای دیگری از برنامه مورد استفاده قرار نگرفته باشند.
Factory Functions یک روش بسیار مناسب برای ایجاد گروهی موثرتر از خصوصیات و عملکردها در اشیاست. آنها در واقع، توابعی هستند که یک Object را بازگشت می‌دهند.
function createPerson(name){
return {
name: name,
greet: function() {console.log("Hello, I'm" + this.name);}
}
}
var person = createPerson("Jack Johnson");
در اینجا، createPerson یک Object Literals را برمی‌گرداند که اکنون می‌تواند به عنوان یک Object معمولی مورد استفاده قرار گیرد.
در این روش برای ایجاد Object از Object Literals خام استفاده می‌شود. چرا که دیگر لازم نیست که هر بار برای ایجاد یک شی جدید و مشابه تمامی توابع و خصوصیات را کپی و پیست کنیم. بنابراین، تنها کافی است از Object Literals بهره بگیرید و فقط خصوصیاتی که می‌خواهید تغییر کنند را عوض کنید.
در نتیجه، Factory Functions با انعطاف‌پذیری بالا قابلیت استفاده مجدد را برای شما فراهم می‌کند که این امر منجر به ذخیره‌سازی حجم زیادی از حافظه می‌شود.
Constructor Functions یا توابع سازنده مرسوم‌ترین روش برای ایجاد Object است که از طریق ارث‌بری از توابع و نمونه‌های اولیه کار می‌کند. ممکن است این سوال در ذهنتان ایجاد شود که prototype چیست؟ بگذارید با استفاده از توابع سازنده به شما توضیح دهیم.
function Person(name) {
// ۱
this.name = name;
this.greet = function() {
console.log("Hello, I'm " + this.name);
}
}
//۲
var person = new Person("Jack Johnson");
//۳
console.log(Object.getPrototypeOf(person)); // Person {}
از اینجاست که قضیه جالب‌تر می‌شود. در کد بالا عددهایی را مشاهده می‌کنید که نمایانگر مراحلی است که در این روش باید طی شود. در ادامه هر یک از این مراحل را با توجه به شماره مرحله توضیح می‌دهیم.
۱. this به شی‌ای اشاره دارد که هم‌اکنون در محدوده تابع Person است. این this به خصوصیت name خود، که به عنوان پارامتری که به تابع منتقل شده، ست شده است.
۲. یک Object جدید توسط تابع سازنده در Person ایجاد شده است. به این صورت که با استفاده از کلمه کلیدی new، شی جدید ساخته می‌شود و پس از ایجاد آن، this به همین Object جدید اشاره دارد. در واقع، اتصالی میان this و Object جدید به وجود می‌آید. این اتصال، به شی‌ای که در Person وجود دارد اجازه می‌دهد که به کلیه عملکرد‌هایی رفرنس دهد که درون تابع سازنده هستند.
۳. Objectی که ما آن را در مرحله ۲ ایجاد کردیم، دارای خاصیتی به نام prototype بود. همچنین مقدار آن دقیقا برابر با الگوی Person Object است. بنابراین، زمانی که شما تابعی را فراخوانی می‌کنید، مرورگر Person Object را برای این تابع چک می‌کند. اگر این تابع در Object مورد نظر نباشد، مرورگر بررسی می‌کند که آیا درون شی prototype (که خاصیتی از Person Object است) اعلام شده یا نه.
این روند میان Objectها و خصوصیات prototype آنها ادامه دارد تا زمانی که این تابع را پیدا کند و یا اعلام کند که این تابع پیدا نشد. این موضوع بدان معنی است که این تابع تعریف نشده است. این در حالی است که خاصیت prototype جایی است که وارث‌ها تعریف می‌شوند.
این توضیح مراحلی بود که در استفاده از تابع سازنده باید طی شود. اما سوال اساسی اینجاست که چرا باید از تابع سازنده استفاده کنیم؟ چرا نمی‌توانیم فقط با Factory Functions کار کنیم؟
یک مفهومی که در برنامه‌نویسی شی‌گرا وجود دارد این است که کدهایی بنویسیم که بتوان بارها از آنها استفاده کرد و همچنین به راحتی قابل گسترش باشند. تابع سازنده این امکان را به ما می‌دهد که این کار را به وسیله عملیات prototype انجام دهیم.
در این میان، اگر بخواهیم نسخه گسترده‌تری از Person ایجاد کنیم، چه کنیم؟ و یا نسخه‌ای در مورد ورزشکار ایجاد کنیم، چطور؟ در زیر نحوه انجام این کار آورده شده است:
function Athlete(name,sport) {
// ۱
Person.call(this,name);
this.sport = sport;
}
// Tip: declare your properties inside the constructor functions and methods on the prototype property, outside of the constructor.
Athlete.prototype.play = function() {
console.log(this.name + " is playing " + this.sport);
}
// ۲
Athlete.prototype = Object.create(Person.prototype);
// ۳
Athlete.prototype.constructor = Athlete;
var athlete = new Athlete("Serena Williams","Tennis");
athlete.greet(); // Hello, I'm Serena Williams
مراحل اجرای ارث‌بری prototype به شرح زیر است:
۱. در مرحله اول، با استفاده از تابع سازنده Person از Object کنونی گذر کرده و کاربردهای آن را به دست می‌آوریم. سپس، خاصیت sport را که تنها در شی Athlete موجود است، ست می‌کنیم.
۲. حال، prototype تابع سازنده را روی یک شی جدید که از prototype شی مورد نظر برای ارث‌بری ایجاده شده (در این مورد، Person) تنظیم می‌کنیم.
۳. در این مرحله، تابع سازنده را به طور واضح مشخص می‌کنیم که وظیفه ساخت Object را برعهده دارد.
این سه روش اساسی برای ساخت Object با استفاده از جاوااسکریپت است. هرچند که در این مطلب تنها این سه روش را مورد بررسی قرار دادیم، اما راه‌های بسیاری برای ایجاد Oobject در جاوااسکریپت وجود دارد.
مراحل یادگیری شی‌گرایی در جاوااسکریپت، بدون پرداختن به کلاس‌های ES6 تکمیل نخواهد شد. کلاس‌های ES6 قصد دارند که به شما یادآوری کنند که اعلام یک کلاس در زبان شی‌گرایی می‌تواند تا چه حد ساده و آسان باشد.
نحوه انجام این کار در قالب کد زیر آورده شده است:
class Person {
constructor(name){
this.name = name;
}
greet() {
console.log("Hello, I'm " + this.name);
}
}
// To implement inheritance
class Athlete extends Person {
// You have to call super() before you invoke "this"
constructor(name,sport) {
super(name)
this.sport = sport
}
}
اکنون، ممکن است تصمیم داشته باشید که شروع به کار کنید و برنامه‌نویسی شی‌گرا را آغاز کنید. اما به یاد داشته باشید که استفاده از روش ارث‌بری در پروژه‌های کوچک می‌تواند کد شما را پیچیده‌تر و فهم آن را برای سایرین سخت‌تر کند.
بهترین شرایط برای استفاده از ارث‌بری، کلاس‌ها و توابع سازنده در برنامه‌های بزرگ و پیچیده است. چرا که چنین برنامه‌هایی نیاز به سازمان یافتگی کد، پایداری و سادگی دارند که قابلیت وراثت چنین امکاناتی را برای شما فراهم می‌کند.
۵۰ درصد تخفیف ویژه زمستان فرانت کست تا ۱۴ دی
کد تخفیف: wnt
دیدگاه‌ها:
mary mary
دی 15, 1399 در 10:08 ق.ظ
امیدوارم اموزش انگولار و تایپ اسکریپت هم بزارین.
مسعود صدری
دی 15, 1399 در 2:16 ب.ظ
حتما براشون برنامه ریزی می‌کنم.
mary mary
دی 15, 1399 در 10:07 ق.ظ
آقای صدری دستتون درد نکنه خیلی عالی توضیح می دید. و ویدئو ها خیلی با کیفیت و با زمانبندی مختصر و مفید هستند.
مسعود صدری
دی 15, 1399 در 2:16 ب.ظ
سلام
خیلی ممنونم از لطفتون.
leila
فروردین 17, 1399 در 12:56 ق.ظ
ویدیو واقعا عالی بود.الان یک دید کامل تر نسبت به شی گرایی پیدا کردم.خیلی مفید و مختصر.
امیدوارم از این مدل اموزش ها در اینده باز م ببینیم از شما
حسین
آذر 6, 1398 در 7:07 ب.ظ
خیلی ممنون. با دیدن این ویدیو خیلی چیزهای react برام جا افتاد. :))
مسعود صدری
آذر 6, 1398 در 8:04 ب.ظ
برای درک بهتر کتابخانه‌ها و چهارچوب‌های مربوط به جاوااسکریپت باید خود جاوااسکریپت رو بهتر درک کنیم.
خوشحالم که براتون مفید بوده.
فاطمه
آذر 6, 1398 در 12:04 ب.ظ
خیلی خوب بود. ممنونم. جمع بندی شد توی ذهنم. ته لهجه ی ترکی تونم خیلی باحاله 🙂
مسعود صدری
آذر 6, 1398 در 4:43 ب.ظ
خوشحالم که براتون مفید بوده 🙂