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

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

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

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

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

// Define a constructor function
function Person() {
    this.name = 'John';
    this.age = 23;
}

// Create an object using the constructor function
const person = new Person();

در کد بالا، function Person تابع سازنده ما است و برای ساخت اشیایی با ویژگی‌های خاص طراحی شده است. در زیر تشریح خط به خط کد بالا آمده است.

خط اول کد بالا نوعی تابع سازنده در جاوا اسکریپت به نام Person را اعلام می‌کند.

// Define a constructor function
function Person() {

در ادامه و در داخل تابع سازنده، از کلمه کلیدی this برای اشاره به شی در حال ایجاد استفاده می‌کنیم. در اینجا، ویژگی name را روی John و ویژگی age را روی 23 قرار می‌دهیم.

this.name = 'John';
    this.age = 23;

در خط بعدی با استفاده از کلمه کلیدی new و تابع سازنده خود شیئی به نام person ایجاد می‌کنیم. این شی اکنون دارای ویژگی‌های تعریف شده در سازنده است.

const person = new Person();

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

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

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

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23,

     this.greet = function () {
        console.log('hello');
    }
}

// create objects
const person1 = new Person();
const person2 = new Person();

// access properties
console.log(person1.name);  // John
console.log(person2.name);  // John

اولین خط از کد بالا نوعی تابع سازنده به نام Person را با ویژگی‌هایی مانند name و age اعلام می‌کند. به‌علاوه، حاوی متد greet است که پیغام hello را ثبت خواهد کرد.

function Person() {
    this.name = 'John';
    this.age = 23;

    this.greet = function () {
        console.log('hello');
    };
}

در خط بعدی با استفاده از کلمه کلیدی new و تابع سازنده ما، دو شیء متمایز person1 و person2 ایجاد می‌شوند. هر دو شی اکنون مجموعه‌ای از ویژگی‌ها و متد greet خود را دارند.

const person1 = new Person();
const person2 = new Person();

حال خطوط بعدی نحوه دسترسی و نمایش ویژگی name هر شی را نشان می‌دهد. در این مورد، هر دو person1 و person2 دارای ویژگی name هستند که روی John تنظیم شده است که در هنگام استفاده از یک تابع سازنده یکسانی در ویژگی‌ها را نشان می‌دهد.

console.log(person1.name);  // John
console.log(person2.name);  // John

این رویکرد به شما اجازه می‌دهد تا به طور کارآمد چندین اشیاء را با ویژگی‌ها و متدهای مشترک ایجاد کنید و روشی مناسب برای سازمان‌دهی و مدیریت موجودیت‌های مشابه در کد جاوا اسکریپت شما ارائه می‌دهد.

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

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

// Define a constructor function
function Person() {
    this.name = 'John';
}

// Create an object using the constructor function
const person1 = new Person();

// Access properties using the object
console.log(person1.name);  // Output: John

خط اول از کد بالا نوعی تابع Constructor در جاوا اسکریپت به نام Person را اعلام می‌کند که ویژگی name را در هنگام ایجاد یک شی به John تنظیم می‌کند.

function Person() {
    this.name = 'John';
}

در خط بعدی با استفاده از کلمه کلیدی new، یک شی به نام person1 بر اساس سازنده Person ایجاد می‌کنیم. کلمه کلیدی this در سازنده به شی جدید ایجاد شده، اشاره دارد.

const person1 = new Person();

در نهایت ما از console.log برای نمایش مقدار ویژگی name برای شی person1 استفاده می‌کنیم. در این مورد، John را در خروجی می‌دهد.

console.log(person1.name);  // Output: John

در اصل کلمه کلیدی this در تابع سازنده به شی خاصی که ایجاد می‌شود اشاره می‌کند. در نتیجه، هنگامی‌که شیء به ویژگی‌های خود، مانند person1.name دسترسی پیدا می‌کند، مستقیماً به ویژگی اختصاص داده شده در طول ایجاد شی اشاره خواهد داشت. این مکانیسم امکان تخصیص خصوصیات پویا به اشیا را بر اساس تابع سازنده فراهم می‌کند.

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

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

// Define a constructor function with parameters
function Person(person_name, person_age, person_gender) {
    // Assigning parameter values to the calling object
    this.name = person_name;
    this.age = person_age;
    this.gender = person_gender;

    // Define a method inside the constructor
    this.greet = function () {
        return 'Hi ' + this.name;
    };
}

// Create objects with specific values
const person1 = new Person('John', 23, 'male');
const person2 = new Person('Sam', 25, 'female');

// Access and display object properties
console.log(person1.name); // Output: "John"
console.log(person2.name); // Output: "Sam"

خط اول نوعی تابع سازنده به نام Person را با پارامترهای person_name، person_age و person_gender اعلام می‌کند. این پارامترها اجازه سفارشی‌سازی خصوصیات شی را در طول ایجاد می‌دهند.

function Person(person_name, person_age, person_gender) {

در ادامه در داخل سازنده، از this برای اختصاص مقادیر پارامتر به خصوصیات مربوطه فراخوانی استفاده می‌کنیم.

    this.name = person_name;
    this.age = person_age;
    this.gender = person_gender;

خطوط بعدی از کد بالا دو شی person1 و person2 را ایجاد می‌کند و با فراخوانی سازنده Person با آرگومان‌های خاص، این امکان را به هر شی می‌دهد تا ویژگی‌های متفاوتی داشته باشد.

const person1 = new Person('John', 23, 'male');
const person2 = new Person('Sam', 25, 'female');

در نهایت خطوط بعدی نحوه دسترسی و نمایش ویژگی name هر شی را نشان می‌دهد. خروجی مقادیر تخصیص داده شده در طول ایجاد شی را منعکس می‌کند.

console.log(person1.name); // Output: "John"
console.log(person2.name); // Output: "Sam"

ایجاد اشیاء: Constructor در جاوا اسکریپت در مقابل شیء Literal

در جاوا اسکریپت، دو راه متداول برای ایجاد اشیا وجود دارد: استفاده از حروف الفبای شی یا Object Literal و توابع سازنده. بیایید آن‌ها را با هم مقایسه کنیم:

با شی Literal:

// Creating a single object using object literal
let person = {
    name: 'Sam'
}

با شی Literal، شما مستقیماً ویژگی‌های شی را در {} تعریف می‌کنید.

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

// Using a constructor function to create multiple objects
function Person() {
    this.name = 'Sam';
}

let person1 = new Person();
let person2 = new Person();

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

حال باید برای افزودن ویژگی‌های منحصر به فرد به شی باید به مثال زیر دقت کنیم:

// Adding a new property to one object created from the constructor function
person1.age = 20;

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

// Using object literal
let person = {
    name: 'Sam'
};

let student = person;

// Changing a property in the derived object also changes the original object
student.name = 'John';

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

درک این مفاهیم به انتخاب رویکرد مناسب برای ایجاد و مدیریت اشیا در جاوا اسکریپت کمک می‌کند. اشیاء object literal برای اشیاء منفرد ساده مناسب هستند در حالی که Constructor در جاوا اسکریپت برای ایجاد چندین شی با ویژگی‌ها و متدهای مشترک مفید هستند.

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

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

// Define a constructor function
function Person() {
    this.name = 'John';
    this.age = 23;
}

// Create two objects using the constructor function
let person1 = new Person();
let person2 = new Person();

// Add a new property to person1 object
person1.gender = 'male';

// Add a new method to person1 object
person1.greet = function () {
    console.log('hello');
}

// Call the greet() method for person1
person1.greet();   // Output: hello

// Error code
// person2 doesn't have the greet() method
person2.greet();   // Results in an error

در خط اول، نوعی تابع سازنده به نام Person با ویژگی‌های name و age اعلام شده است:

function Person() {
    this.name = 'John';
    this.age = 23;
}

حال در ادامه با استفاده از سازنده Person دو شی person1 و person2 ایجاد می‌شود.

let person1 = new Person();
let person2 = new Person();

بعداً نوعی ویژگی جدید به نام gender به شی person1 اضافه می‌شود. این ویژگی مختص person1 است و در person2 در دسترس نخواهد بود.

person1.gender = 'male';

در ادامه متدی جدید به نام greet به شی person1 اضافه می‌شود و به آن اجازه می‌دهد در هنگام فراخوانی hello را نمایش دهد. این خط کد متد greet را برای person1 فراخوانی می‌کند که در نتیجه خروجی hello ایجاد می‌شود.

person1.greet = function () {
    console.log('hello');
}

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

person2.greet();   // Results in an error

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

می‌توان توابع Constructor در جاوا اسکریپت را با افزودن ویژگی‌ها یا متدها به تمام اشیاء ایجاد شده از آن با استفاده از ویژگی به نام پروتوتایپ یا نمونه اولیه (properties) تقویت کنید. در زیر مثالی برای درک بهتر آورده شده است:

// Define a constructor function
function Person() {
    this.name = 'John';
    this.age = 23;
}

// Create two objects using the constructor function
let person1 = new Person();
let person2 = new Person();

// Add a new property to the constructor function using prototype
Person.prototype.gender = 'Male';

// Access the new property for both objects
console.log(person1.gender); // Output: Male
console.log(person2.gender); // Output: Male

خط اول از کد بالا نوعی Constructor در جاوا اسکریپت به نام Person را با ویژگی‌های name و age اعلام می‌کند.

function Person() {
    this.name = 'John';
    this.age = 23;
}

در ادامه با استفاده از سازنده Person دو شی person1 و person2 ایجاد می‌شوند.

let person1 = new Person();
let person2 = new Person();

خط کد بعدی از ویژگی prototype برای افزودن ویژگی جدیدی به نام gender به تابع سازنده استفاده می‌کند. این بدان معنی است که تمام اشیاء ایجاد شده از سازنده Person به این ویژگی جدید دسترسی خواهند داشت.

Person.prototype.gender = 'Male';

در نهایت خطوط بعدی نشان می‌دهند که چگونه person1 و person2 می‌توانند به ویژگی gender اضافه شده از طریق نمونه اولیه دسترسی داشته باشند و خروجی هر دو Male است.

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

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

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

// Creating objects using built-in constructors

let a = new Object();    // A new Object object
let b = new String();    // A new String object
let c = new Number();    // A new Number object
let d = new Boolean();   // A new Boolean object

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

let a = new Object();    // A new Object object

در ادامه به طور مشابه، یک شی رشته جدید با استفاده از سازنده String ایجاد خواهد شد.

let b = new String();    // A new String object

همچنین خط سوم با استفاده از سازنده Number نوعی شی عدد جدید ایجاد می‌کند.

let c = new Number();    // A new Number object

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

let d = new Boolean();   // A new Boolean object

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

علاوه بر این، توجه داشته باشید که در جاوا اسکریپت مدرن (جاوا اسکریپت ES6 و فراتر از آن)، کلمه کلیدی class معرفی شد که راه‌حلی جایگزین برای ایجاد اشیا از طریق کلاس‌ها ارائه می‌کند. برای مطالعه این موضوع، می‌توانید مقاله ما را در رابطه با Class در جاوا اسکریپت مطالعه کنید.

چگونه در جاوا اسکریپت حرفه ای شویم؟

Constructor در جاوا اسکریپت به عنوان ابزار ضروری برای ایجاد و سازمان‌دهی اشیا با ویژگی‌ها و رفتارهای از پیش تعریف شده عمل می‌کنند. آن‌ها امکان ایجاد کارآمد نمونه‌های متعدد را فراهم کرده و پایه‌ای برای برنامه نویسی شی گرا امکان‌پذیر می‌کنند. همچنین توابع سازنده قابلیت استفاده مجدد کد را افزایش می‌دهند و به یک رویکرد کدگذاری ساختاریافته و مدولار کمک می‌کنند و توسعه‌دهندگان را برای ساخت برنامه‌های مقیاس‌پذیر توانمند می‌سازند.

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