Constructor در جاوا اسکریپت – توضیح توابع سازنده به زبان ساده

توابع سازنده یا Constructor در جاوا اسکریپت یکی از مفاهیم کلیدی در جاوا اسکریپت و برنامه‌نویسی شیءگرا هستند. در این مطلب از مجله فرادرس قصد داریم تا به طور کامل با این مفهوم و کاربرد آن آشنا شویم. ابتدا تعریف Constructor را مرور می‌کنیم و می‌بینیم چگونه یک تابع Constructor ساخته می‌شود. سپس نحوه فراخوانی توابع Constructor و انواع آن‌ها را مثال‌های عملی بررسی می‌کنیم. در ادامه با تفاوت Constructor و کلاس در جاوا اسکریپت آشنا می‌شویم. در نهایت نیز نکات کلیدی را جمع‌بندی خواهیم کرد. پس همراه ما باشید تا دانش خود را در زمینه توابع Constructor در جاوا اسکریپت ارتقا دهید.

توابع سازنده یا Constructor در جاوا اسکریپت راه‌کارهایی برای ایجاد و مقداردهی اولیه «شی» (Object) هستند که امکان تعریف ویژگی‌ها و متدها را فراهم کرده و قابلیت استفاده مجدد کدهای برنامه را تقویت می‌کنند. همچنین «نمونه‌ها» (Instances) با استفاده از سازنده ساخته می‌شوند و به برنامه نویسی شی‌گرا کمک می‌کنند. در مطلب پیش رو از «مجله فرادرس» مفهوم توابع سازنده در جاوا اسکریپت با زبانی ساده و به همراه‌ مثال‌های عینی پوشش داده شده است. درک Constructor در جاوا اسکریپت به برنامه‌نویس‌ها کمک می‌کند که با چالش‌های کدنویسی به‌خصوص در رویکرد برنامه نویسی شی‌گرا بهتر و مجهزتر مواجه شوند.

تابع Constructor در جاوا اسکریپت چیست؟

تابع Constructor در جاوا اسکریپت به عنوان نوعی تابع معمولی، پایه‌ای برای ساخت اشیا است. به عنوان مثال، یک مهندس عمران اگر بخواهد مجموعه آپارتمانی شامل چندین ساختمان را بسازد، برای ساخت این مجموعه اول نقشه‌ای دقیق از پروژه ارائه کرده و سپس کار را به سایر افراد درگیر در پروژه مانند پیمانکار، کارگر و غیره می‌سپارد. در این پروژه اگر همه واحدهای آپارتمانی ‌یک شکل باشند، فقط از این نقشه استفاده می‌شود و در این صورت هر آپارتمان (شی) بر اساس نقشه ارائه شده (تابع سازنده) ساخته خواهد شد. در نهایت، مجموعه‌ای از چندین آپارتمان پدیدار می‌شود که همگی از طرح و نقشه اولیه واحدی استفاده کرده‌اند.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

مزیت کلیدی این روش در توانایی تکرار طرح و ایجاد آرایه‌ای از ۲۰، ۵۰۰، ۱۰۰ یا بیشتر اشیای مشابه با ویژگی‌های متمایز است. تابع سازنده در جاوا اسکریپت به کاربر این امکان را می‌دهد که فقط یک بار چارچوب شی را ایجاد کند و سپس از این چارچوب برای ایجاد اشیای مشابهی می‌تواند بهره ببرد. توابع سازنده نقش مهمی در ایجاد اشیا در جاوا اسکریپت ایفا کرده و به عنوان الگوهایی برای ایجاد موجودیت‌های متعددی عمل می‌کنند که ویژگی‌ها و متدهای یکسانی را با حفظ مقادیر متنوع به اشتراک می‌گذارند.

نمونه ای از Constructor در دنیای واقعی

فرض بر این است که فردی توسعه‌دهنده در حال ساخت نوعی وب‌سایت رسانه اجتماعی است. این توسعه‌دهنده باید بداند که قصد جمع‌آوری چه اطلاعاتی را دارد. برای انجام این کار، توسعه‌دهنده برای هر کاربر چیزی شبیه به فرم ایجاد می‌کند تا از کاربران اطلاعات لازم را بگیرد. برای نشان دادن این روند، سناریوهای زیر را در نظر بگیرید:

• اطلاعات یکسان کاربر: در ثبت‌نام هر کاربر گرفتن مجموعه‌ای از اطلاعت کاربر مانند نام، نام‌خانوادی، سن و غیره الزامی است. در نتیجه، اشیایی که برای جمع‌آوری داده‌های کاربراهای متنوع طراحی شده‌اند، ویژگی‌های مشابهی را به اشتراک می‌گذارند.
• در نظر گرفتن مقیاس: فرض می‌شود روزانه مثلا هزاران نفر با این پلتفرم شبکه اجتماعی در تعامل هستند. برای مقیاس‌بندی کردن با این حجم از کاربران، اشیای متعددی باید برای مدیریت و پردازش مؤثر داده‌های متمایز هر کاربر ایجاد شوند.

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

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

ایجاد توابع Constructor در جاوا اسکریپت

ساخت توابع سازنده شبیه به ایجاد توابع معمولی جاوا اسکریپت است. در زیر مثالی برای نشان دادن این موضوع آورده شده است. تصور کنید مانند بالا فردی توسعه‌دهنده در حال ساخت نوعی سایت رسانه اجتماعی بوده و می‌خواهد اطلاعاتی را از کاربران جمع‌آوری کند. برای این هدف فرد توسعه‌دهنده نوعی تابع ویژه به نام Userایجاد می‌کند که شامل سه چیز است: نام، نام‌خانوادگی و سن کاربر. این تابع به او کمک می‌کند تا پروفایل‌های کاربری متفاوتی ایجاد کند. قطعه کد زیر این موضوع را نشان می‌دهد:

1function User(firstName, lastName, age) {
2    this.firstName = firstName;
3    this.lastName = lastName;
4    this.age = age;
5}

در کد بالا تابعی با نامUserمانند طرحی اولیه عمل می‌کند. این تابع به فرد برنامه‌نویس اجازه می‌دهد تا تعداد زیادی پروفایل کاربری جدید برای سایت رسانه اجتماعی خود ایجاد کند. در رابطه با Constructor در جاوا اسکریپت توجه به دو نکته زیر مهم است:

1. بهتر است نام تابع سازنده با حرف بزرگ شروع شود. انجام این کار اجباری نیست اما به کاربر کمک می‌کند توابع سازنده را از توابع معمولی جدا کند.
2. هنگام کار با توابع سازنده در جاوا اسکریپت از کلمه کلیدی This در جاوا اسکریپت زیاد استفاده می‌شود. این کلمه کلیدی برای اشاره به شیئی که کاربر ایجاد کرده مورد استفاده قرار می‌گیرد.

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

کلمه کلیدی This در جاوا اسکریپت به نوعی شی اشاره می‌کند اما اینکه به کدام شی اشاره خواهد کرد بستگی به محل استفاده دارد. برای درک بهتر این موضوع توجه به ٣ نکته زیر مهم است:

• در داخل شی: هنگامی‌که کلمه کلیدی نام برده در داخل شیئی استفاده می‌شود، thisبه آن شی خاص اشاره دارد.
• در محدوده سراسری: اگر خارج از هر شی خاصی استفاده شود، مانند قسمت اصلی کد، thisبه زمینه بزرگ‌تر اشاره دارد که معمولاً کل صفحه‌وب یا محیط سراسری را شامل می‌شود.
• در توابع یا کلاس‌های سازنده: وقتی این کلمه کلیدی در داخل تابعی خاص قرار می‌گیرد که اشیا ایجاد می‌کند (تابع سازنده یا کلاس)، thisنشان‌دهنده شی خاصی است که در آن لحظه ایجاد می‌شود.

به عبارت ساده‌تر، کلمه کلیدی thisبه کاربر کمک می‌کند جزئیات یا اقداماتی را به اشیای مختلف اضافه کند. به عنوان مثال، هنگام ساخت بسیاری از اشیای مشابه، مانند پروفایل کاربر در مثال بالا، برنامه‌نویس نمی‌خواهد به هر کدام از اشیا نام منحصربه‌فردی بدهد. در عوض، از thisبرای سفارشی‌سازی و ساخت هر شی به طور جداگانه استفاده می‌کند. بنابراین، thisمانند ابزاری است که به کاربر امکان می‌دهد ویژگی‌های خاصی را به اشیا اضافه کند، به خصوص اگر این اشیا همگی از یک طرح اولیه ساخته شده باشند.

فراخوانی تابع سازنده در جاوا اسکریپت

برای استفاده از تابع Constructor در جاوا اسکریپت، از کلمه کلیدی Newبه همراه داده‌های واقعی ارائه شده استفاده می‌شود که مثال زیر این موضوع را نشان می‌دهد:

1let user1 = new User("John", "Doe", 23);

در کد بالا، شی (نمونه) خاصی از سازنده Userتولید می‌شود که شامل سه مؤلفه زیر است:

Firstname as ‘John’
Lastname as ‘Doe’
Age as 23.

کلمه کلیدی Newعملگری برای ایجاد اشیای جدید از توابع سازنده است. هنگامی‌که از کلمه کلیدی Newبا یک تابع سازنده استفاده شود، کارهای زیر را انجام می‌دهد:

فیلم آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان) در فرادرس

کلیک کنید

1.  شی تازه و خالی ایجاد می‌کند.
2. نمونه اولیه این شی جدید را تنظیم کرده و آن را به ویژگی نمونه اولیه تابع سازنده متصل می‌کند.
3. کلمه کلیدی thisتابع سازنده را طوری تنظیم می‌کند که به شی جدید ایجاد شده اشاره کند.
4. کلمه کلیدیNewتابع سازنده را وادار می‌کند که شی جدید را بازگرداند.

در مثال زیر، تابعی به نام newCloneرفتار عملگر Newرا تقلید می‌کند:

1
2//This function mimics the new operator
3function newClone(ConstFunction, ...theArgs) {
4  
5    //1. Creates a new empty object
6  let obj = {};
7 
8  //2. Sets prototype of newly created object and links to it to prototype  property of constructor function.
9  Object.setPrototypeOf(obj, ConstFunction.prototype)
10 
11  //3. calls the ConstFunction using `call` and sets the new object (obj) as its 'this' keyword.
12  let ret = ConstFunction.call(obj, ...theArgs)
13  
14  //4. if it returns Object then returns it as it is
15  if (ret == Object) return ret
16 
17  //else return obj
18  return obj;
19}
20 
21//Person created using the NewClone
22const userClone  = newClone(User, 'John', 'Doe', 23)
23console.log(userClone );
24 
25//Person created using the new operator
26const user1 = new User('John', 'Doe', 23)
27console.log(user1);

هر دو شی newCloneو user1نتیجه یکسانی دارند:

1{
2"firstName": "John",
3"lastName": "Doe"
4 age: 23
5}

 اضافه کردن متدها به سازنده ها

هنگامی استفاده از توابع Constructor در جاوا اسکریپت، علاوه بر اضافه کردن جزئیات اولیه به اشیا، می‌توان کارهای بیشتری نیز انجام داد و متدها را به توابع سازنده اضافه کرد. دو روش برای قرار دادن متدها در توابع سازنده وجود دارد که در ادامه این دو روش مورد بررسی قرار گرفته‌اند.

١. در داخل سازنده

می‌توان متد را مستقیماً در تابع سازنده ایجاد کرد. به عنوان مثال، در سازنده User، می‌توان متدی به نام speakمانند مثال زیر اضافه کرد:

1function User(firstName, lastName, age){
2    
3    // defined properties
4    
5    //Adding method
6    this.speak = function() {
7        console.log("Hello! My name is " + this.firstName + " " + this.lastName + " and I'm " + this.age)+" years old.";
8    }
9}

۲. استفاده از نمونه‌های اولیه

راه دیگر افزودن متدها به توابع سازنده در جاوا اسکریپت، استفاده از نمونه‌های اولیه است. این رویکرد روشی خاص برای به اشتراک گذاشتن متدها در بین تمام اشیا ایجاد شده از سازنده است. برای مثال، می‌توان متدی به نام getFullNameبا استفاده از نمونه‌های اولیه به سازنده User مانند مثال زیر اضافه کرد:

1function User(firstName, lastName, age){
2    
3    // defined properties  
4}
5
6User.prototype.getFullName = function() {
7    console.log(this.firstName + " " + this.lastName);
8}
9 
10user1 = new User("John", "Doe", 23);
11user1.getFullName() // John Doe

با افزودن متدها از طریق نمونه‌های اولیه، تمام اشیای ساخته شده از سازنده Userمی‌توانند از متد جدید استفاده کنند که راهی برای در دسترس قرار دادن عملی مشابه برای همه اشیای مشابه است.

انواع توابع Constructor در جاوا اسکریپت چه هستند؟

دو نوع اصلی توابع Constructor در جاوا اسکریپت وجود دارد که شامل توابع سازنده تعریف شده به وسیله کاربر و توابع سازنده داخلی هستند. هرکدام از این توابع کاربردهای خاص خودشان را دارند و در سناریوهای مختلفی می‌توان از آن‌ها استفاده کرد. در ادامه توضیحاتی در رابطه با هرکدام از انواع توابع سازنده در جاوا اسکریپت آورده شده است.