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

سلام به شما همراهان روکسو، امروز می خواهیم در رابطه با constructor در جاوا اسکریپت و نحوه کارشان صحبت کنیم. این مبحث یکی از مباحث اصلی در مورد اشیاء در هر زبان برنامه نویسی است بنابراین این مقاله را از دست ندهید.

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

constructor در لغت به معنی «سازنده» است اما چه چیزی را می سازد؟ تمام مثال هایی که در قسمت های قبل از اشیاء جاوا اسکریپت آوردیم محدود بودند، چرا که تنها یک شیء را می ساختند و اگر می خواستیم چند شیء را بسازیم باید تک تک و به صورت دستی این کار را انجام می دادیم. این روش، روش بهینه ای نیست و گاهی نیاز داریم که طرحی کلی داشته باشیم تا بتوانیم از روی آن چندین شیء را همزمان بسازیم (مانند یک قالب صنعتی که در کارخانه ها استفاده می شود). برای انجام این کار به constructor ها نیاز داریم که در واقع یک تابع هستند.

constructor ها توابعی هستند که طرح کلی و ساختار اشیاء را تعیین می کنند (می‌سازند) بنابراین اشیاء ای که با یک constructor ساخته شوند از یک نوع خواهند بود.

به مثال زیر نگاهی بیندازید:

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

تابع بالا یک constructor است.

نکته: از روش های توصیه شده برای نامگذاری constructor ها، بزرگ کردن حرف اولشان است.

برای ساختن اشیاء هم نوع باید تابع constructor را با کلیدواژه new صدا بزنید:

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

می بینید که از constructor ای که بالاتر تعریف کرده بودیم استفاده کردیم تا اشیاء جدیدی به نام myFather و myFather بسازیم.

کلیدواژه this در constructor ها

همانطور که در جلسه قبل گفتیم، کلیدواژه this به شیء ای برمی گردد که صاحب کد است. به طور مثال اگر this را درون یک شیء استفاده کنیم، به خودِ آن شیء اشاره می کند.

اما این کلیدواژه در constructor ها مقداری ندارد و تنها جایگزینی موقت برای شیء جدید است. به عبارت دیگر زمانی که شیء جدیدی از روی constructor ساخته شود مقدار this همان شیء جدید می شود اما قبل از آن هیچ مقداری ندارد.

نکته: یادتان باشد که this متغیر نیست بلکه یک کلیدواژه است، بنابراین نمی توانید خودتان مقدارش را عوض کنید.

اضافه کردن متدها و خصوصیات به constructor

اگر از قسمت قبل به خاطر داشته باشید، اضافه کردن property (خصوصیت) به یک شیء خاص کار بسیار راحتی بود:

myFather.nationality = "English";

اما اگر این کار را بکنید، این property تنها به myFather اضافه می شود و هیچ اتفاقی برای myMother نمی افتد.

همچنین یادتان هست که اضافه کردن متدها نیز کار چندان سختی نیست، بلکه دقیقا مانند اضافه کردن property ها بود:

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

باز هم می دانیم که این متد تنها به myFather اضافه می شود و هیچ اتفاقی برای myMother نمی افتد.

اگر بخواهیم این خصوصیت و متد به هر شیء ای که ساخته می شود اضافه شود چطور؟ آنگاه باید از constructor ها استفاده کنیم. روش اضافه کردن مقادیر خاص به constructor مانند روش های قبل نیست و کد زیر صحیح نیست:

Person.nationality = "English";

با این کار هیچ چیزی به constructor شما اضافه نمی شود، بلکه برای اضافه کردن مقداری خاص به یک constructor باید آن را مستقیما به خود آن constructor اضافه کنید:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

بدین صورت هر شیء ای که با این constructor ساخته شود دارای مقداری پیش فرض (یعنی "English") خواهد بود.

اضافه کردن متدها نیز به همین شکل است:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor ساخت
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.name = function() {
    return this.firstName + " " + this.lastName
  };
}

// Person ساخت شیء از
var myFather = new Person("John", "Doe", 50, "blue");

// نمایش نام کامل
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 

</script>

</body>
</html>

خروجی این کد عبارت "My father is John Doe" خواهد بود.

مثال دیگری می زنیم. فرض کنید بخواهیم نام فردی را تغییر دهیم، در این صورت می توانیم متدی را به constructor اضافه کنیم که این کار را برایمان انجام دهد:

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName;  
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  };
}

در این کد، تابع ()changeName، مقداری را که به عنوان name به آن بدهید به خصوصیت lastName اضافه می کند. به طور مثال اگر شیء ای برای مادر خود بسازیم:

var myMother = new Person("Sally","Rally",48,"green");

می توانیم نامش را (نام خانوادگی فعلی اش Rally است) به این شکل تغییر دهیم:

myMother.changeName("Doe");

constructor های پیش فرض در زبان جاوا اسکریپت

جاوا اسکریپت به صورت پیش فرض دارای constructor های زیادی است. به مثال های زیر نگاه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
var x1 = new Object();   // A new Object object
var x2 = new String();   // A new String object
var x3 = new Number();   // A new Number object
var x4 = new Boolean();  // A new Boolean object
var x5 = new Array();  // A new Array object
var x6 = new RegExp();   // A new RegExp object
var x7 = new Function(); // A new Function object
var x8 = new Date();   // A new Date object

// Display the type of all objects
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>

<p>There is no need to use String(), Number(), Boolean(), Array(), and RegExp()</p>

<p>Read the JavaScript tutorials.</p>

</body>
</html>

مشاهده خروجی این کد در JSBin

البته شیء Math در مثال بالا وجود ندارد چرا که یک شیء سراسری (global object) است و نمی توانید new را روی آن استفاده کنید. همچنین هیچگاه برای داده های ابتدایی از شیء استفاده نکنید، ما مثال بالا را تنها جهت آموزش آورده ایم و در غیر این صورت کاربردی ندارد. بنابراین: