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

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

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

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

<span class="token comment">// constructor function</span>
<span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'John'</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">23</span>
<span class="token punctuation">}</span>
<span class="token comment">// create an object</span>
<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

در مثال بالا، تابع Person یک javascript constructor function است که یک شیء می‌سازد. برای ایجاد یک شیء از یک تابع سازنده، از کلمه کلیدی new استفاده می‌کنیم.

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

اپراتور جدید: عملگر جدید به ما اجازه می‌دهد یک شیء جدید را از یک تابع سازنده ایجاد و مقداردهی اولیه کنیم.

نحوه ایجاد یک تابع سازنده

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

<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>firstName <span class="token operator">=</span> firstName<span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>lastName <span class="token operator">=</span> lastName<span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">fullName</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastName<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

در داخل تابع، ویژگی‌هایی ایجاد می‌کنیم و آن‌ها را به شیء ای که با این اشاره می‌شود نسبت می‌دهیم.

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

<span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span>kamel<span class="token punctuation">,</span> bahrami<span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span><span class="token function">fullName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

خروجی به شکل زیر است:

ایجاد چندین شیء با javascript constructor function

در جاوا اسکریپت می‌توانید چندین شیء از یک تابع سازنده ایجاد کنید. به مثال زیر توجه کنید:

<span class="hljs-comment">// constructor function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span> () </span>{
    <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'kamel'</span>,
    <span class="hljs-keyword">this</span>.age = <span class="hljs-number">28</span>,

     <span class="hljs-keyword">this</span>.greet = <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hello'</span>);
    }
}
<span class="hljs-comment">// create objects</span>
<span class="hljs-keyword">const</span> person1 = <span class="hljs-keyword">new</span> Person();
<span class="hljs-keyword">const</span> person2 = <span class="hljs-keyword">new</span> Person();

<span class="hljs-comment">// access properties</span>
<span class="hljs-built_in">console</span>.log(person1.name);  <span class="hljs-comment">// kamel</span>
<span class="hljs-built_in">console</span>.log(person2.name);  <span class="hljs-comment">// kamel</span>

برنامه فوق دو شیء با استفاده از تابع سازنده یکسان ایجاد می‌شود. kamel نام شخص است.

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

در جاوا اسکریپت، زمانی که کلمه کلیدی this در یک تابع سازنده استفاده می‌شود، هنگام ایجاد شیء به شیء اشاره می‌کند. مثلاً،

<span class="hljs-comment">// constructor function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span> () </span>{
    <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'kamel'</span>,
}
<span class="hljs-comment">// create object</span>
<span class="hljs-keyword">const</span> person1 = <span class="hljs-keyword">new</span> Person();

<span class="hljs-comment">// access properties</span>
<span class="hljs-built_in">console</span>.log(person1.name);  <span class="hljs-comment">// kamel</span>

هنگامی‌که یک شیء به ویژگی‌ها دسترسی پیدا می‌کند، می‌تواند مستقیماً به‌عنوان person1.name به ویژگی دسترسی پیدا کند.

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

در جاوا اسکریپت می‌توانید یک تابع سازنده با پارامترها ایجاد کنید. به مثال زیر توجه کنید:

<span class="hljs-comment">// constructor function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span> (<span class="hljs-params">person_name, person_age, person_gender</span>) </span>{
   <span class="hljs-comment">// assigning  parameter values to the calling object</span>
    <span class="hljs-keyword">this</span>.name = person_name,
    <span class="hljs-keyword">this</span>.age = person_age,
    <span class="hljs-keyword">this</span>.gender = person_gender,
    <span class="hljs-keyword">this</span>.greet = <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
        <span class="hljs-keyword">return</span> (<span class="hljs-string">'Hi'</span> + <span class="hljs-string">' '</span> + <span class="hljs-keyword">this</span>.name);
    }
}
<span class="hljs-comment">// creating objects</span>
<span class="hljs-keyword">const</span> person1 = <span class="hljs-keyword">new</span> Person(<span class="hljs-string">'kamel'</span>, <span class="hljs-number">28</span>, <span class="hljs-string">'male'</span>);
<span class="hljs-keyword">const</span> person2 = <span class="hljs-keyword">new</span> Person(<span class="hljs-string">'zahra'</span>, <span class="hljs-number">29</span>, <span class="hljs-string">'female'</span>);

<span class="hljs-comment">// accessing properties</span>
<span class="hljs-built_in">console</span>.log(person1.name); <span class="hljs-comment">// "kamel"</span>
<span class="hljs-built_in">console</span>.log(person2.name); <span class="hljs-comment">// "zahra"</span>

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

<span class="hljs-keyword">const</span> person1 = <span class="hljs-keyword">new</span> Person(<span class="hljs-string">'kamel'</span>, <span class="hljs-number">28</span>, <span class="hljs-string">'male'</span>);
<span class="hljs-keyword">const</span> person2 = <span class="hljs-keyword">new</span> Person(<span class="hljs-string">'zahra'</span>, <span class="hljs-number">29</span>, <span class="hljs-string">'fmale'</span>);

این به هر شیء اجازه می‌دهد تا ویژگی‌های متفاوتی داشته باشد. همان‌طور که در بالا نشان داده‌شده،

console.log(person1.name); gives kamel

console.log(person2.name); gives zahra

خروجی به شکل زیر خواهد بود:

ایجاد اشیاء: تابع سازنده در مقابل Object Literal

Object Literal به‌طورکلی برای ایجاد یک شیء واحد استفاده می‌شود. اگر بخواهید چندین شیء بسازید، تابع سازنده مفیدتر  است. مثلاً،

<span class="hljs-comment">// using object literal</span>
<span class="hljs-keyword">let</span> person = {
    <span class="hljs-attr">name</span>: <span class="hljs-string">'kamel'</span>
}

و

<span class="hljs-comment">// using constructor function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span> () </span>{
    <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'kamel'</span>
}

<span class="hljs-keyword">let</span> person1 = <span class="hljs-keyword">new</span> Person();
<span class="hljs-keyword">let</span> person2 = <span class="hljs-keyword">new</span> Person();

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

<span class="hljs-comment">// using constructor function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span> () </span>{
    <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'kamel'</span>
}

<span class="hljs-keyword">let</span> person1 = <span class="hljs-keyword">new</span> Person();
<span class="hljs-keyword">let</span> person2 = <span class="hljs-keyword">new</span> Person();

<span class="hljs-comment">// adding new property to person1</span>
person1.age = <span class="hljs-number">28</span>;

اکنون این ویژگی سن یا age برای شیء person1 منحصربه‌فرد است و برای شیء person2 در دسترس نیست.

بااین‌حال، اگر یک شیء با object literal به معنای واقعی کلمه ایجاد شود و اگر متغیری با آن مقدار شیء تعریف شود، هر تغییری در مقدار متغیر، شیء اصلی را تغییر خواهد داد. مثلاً:

<span class="hljs-comment">// using object lateral</span>
<span class="hljs-keyword">let</span> person = {
    <span class="hljs-attr">name</span>: <span class="hljs-string">'kamel'</span>
}

<span class="hljs-built_in">console</span>.log(person.name); <span class="hljs-comment">// kamel</span>

<span class="hljs-keyword">let</span> student = person;

<span class="hljs-comment">// changes the property of an object</span>
student.name = <span class="hljs-string">'zahra'</span>;

<span class="hljs-comment">// changes the origins object property</span>
<span class="hljs-built_in">console</span>.log(person.name); <span class="hljs-comment">// zahra</span>

خروجی به شکل زیر است:

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

افزودن ویژگی‌ها و متدها در یک شیء

شما می‌توانید ویژگی‌ها یا متدهایی را در یک شیء مانند این اضافه کنید:

<span class="hljs-comment">// constructor function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span> () </span>{
    <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'kamel'</span>,
    <span class="hljs-keyword">this</span>.age = <span class="hljs-number">28</span>
}

<span class="hljs-comment">// creating objects</span>
<span class="hljs-keyword">let</span> person1 = <span class="hljs-keyword">new</span> Person();
<span class="hljs-keyword">let</span> person2 = <span class="hljs-keyword">new</span> Person();

<span class="hljs-comment">// adding property to person1 object</span>
person1.gender = <span class="hljs-string">'male'</span>;

<span class="hljs-comment">// adding method to person1 object</span>
person1.greet = <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hello'</span>);
}

person1.greet();   <span class="hljs-comment">// hello</span>

<span class="hljs-comment">// Error code</span>
<span class="hljs-comment">// person2 doesn't have greet() method</span>
person2.greet();

در مثال بالا، یک ویژگی جدید gender و یک متد جدید greet() به شیء person1 اضافه‌شده است.

اما این ویژگی و متد جدید فقط به person1 اضافه می‌شود. شما نمی‌توانید به جنسیت یا greet() از person2 دسترسی داشته باشید. ازاین‌رو برنامه هنگام تلاش برای دسترسی به person2.greet(); با خطا مواجه می‌شود. به خروجی آن در تصویر زیر دقت کنید.

نمونه اولیه شیء (prototype) جاوا اسکریپت

همچنین می‌توانید با استفاده از یک نمونه اولیه، ویژگی‌ها و متدها را به یک تابع سازنده در جاوا اسکریپت اضافه کنید. مثلاً،

<span class="hljs-comment">// constructor function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span> () </span>{
    <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'kamel'</span>,
    <span class="hljs-keyword">this</span>.age = <span class="hljs-number">28</span>
}

<span class="hljs-comment">// creating objects</span>
<span class="hljs-keyword">let</span> person1 = <span class="hljs-keyword">new</span> Person();
<span class="hljs-keyword">let</span> person2 = <span class="hljs-keyword">new</span> Person();

<span class="hljs-comment">// adding new property to constructor function</span>
Person.prototype.gender = <span class="hljs-string">'Male'</span>;

<span class="hljs-built_in">console</span>.log(person1.gender); <span class="hljs-comment">// Male</span>
<span class="hljs-built_in">console</span>.log(person2.gender); <span class="hljs-comment">// Male</span>

خروجی به شکل زیر خواهد بود:

سازنده‌های داخلی در جاوا اسکریپت:

جاوا اسکریپت همچنین دارای سازنده‌های داخلی است. بعضی از آن‌ها در زیر آمده‌اند:

<span class="hljs-keyword">let</span> a = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Object</span>();    <span class="hljs-comment">// A new Object object</span>
<span class="hljs-keyword">let</span> b = <span class="hljs-keyword">new</span> <span class="hljs-built_in">String</span>();    <span class="hljs-comment">// A new String object</span>
<span class="hljs-keyword">let</span> c = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Number</span>();    <span class="hljs-comment">// A new Number object</span>
<span class="hljs-keyword">let</span> d = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Boolean</span>();   <span class="hljs-comment">// A new Boolean object</span>

در جاوا اسکریپت، رشته‌ها را می‌توان به‌عنوان آبجکت قطعه کد زیر ایجاد کرد:

<span class="hljs-keyword">const</span> name = <span class="hljs-keyword">new</span> <span class="hljs-built_in">String</span> (<span class="hljs-string">'kamel'</span>);
<span class="hljs-built_in">console</span>.log(name); <span class="hljs-comment">// kamel</span>

در جاوا اسکریپت، اعداد را می‌توان به‌عنوان آبجکت به‌وسیله  قطعه کد زیر ایجاد کرد:

<span class="hljs-keyword">const</span> number = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Number</span> (<span class="hljs-number">57</span>);
<span class="hljs-built_in">console</span>.log(number); <span class="hljs-comment">// 57</span>

در جاوا اسکریپت، بولین ها را می‌توان به‌عنوان آبجکت قطعه کد زیر ایجاد کرد:

<span class="hljs-keyword">const</span> count = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Boolean</span>(<span class="hljs-literal">true</span>);
<span class="hljs-built_in">console</span>.log(count); <span class="hljs-comment">// true</span>

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

<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'kamel'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> number <span class="token operator">=</span> <span class="token number">57</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>

شما نباید رشته‌ها، اعداد و مقادیر بولی را به‌عنوان آبجکت اعلام کنید زیرا باعث کاهش سرعت برنامه می‌شوند.

نتیجه‌گیری

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

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

منابع مورد استفاده برای این آموزش:

https://www.programiz.com/javascript/constructor-function

Constructor Function & New Operator in JavaScript