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

 

دانلود ویدیو

 

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

ایجاد Object در جاوااسکریپت

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

Object Literals

 

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

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

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 تکمیل نخواهد شد. کلاس‌های 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
    }
}

 

اکنون، ممکن است تصمیم داشته باشید که شروع به کار کنید و برنامه‌نویسی شی‌گرا را آغاز کنید. اما به یاد داشته باشید که استفاده از روش ارث‌بری در پروژه‌های کوچک می‌تواند کد شما را پیچیده‌تر و فهم آن را برای سایرین سخت‌تر کند. 

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

 

منبع

4 پاسخ به “ویدیوی آموزشی: برنامه نویسی شی‌گرا در جاوااسکریپت”

  1. فاطمه گفت:

    خیلی خوب بود. ممنونم. جمع بندی شد توی ذهنم. ته لهجه ی ترکی تونم خیلی باحاله 🙂

  2. حسین گفت:

    خیلی ممنون. با دیدن این ویدیو خیلی چیزهای react برام جا افتاد. :))

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *