آموزش شی گرایی در جاوا اسکریپت

آموزش شی گرایی در جاوا اسکریپت از آن دسته آموزش‌هایی است که اغلب علاقمندان به این زبان به دنبال آن هستند. منظور از شی گرایی تفکیک یک برنامه به بخش‌های کوچک‌تر است که باعث می‌شود درک آن راحت‌تر شده و عملیات در برنامه نیز منظم و دقیق‌تر انجام شود. قبل از هر چیز دوره اموزش جاوا اسکریپت را میتوانید به صورت رایگان در سایت مشاهده بفرمایید . در واقع هدف از شی گرایی تجزیه یک کد بزرگ به قسمت‌های کوچک‌تر تحت عنوان آبجکت یا شی است که باعث می‌شود برنامه راحت‌تر نوشته شود. در این مقاله قصد داریم به آموزش برنامه نویسی شی گرا در جاوا اسکریپت به زبانی ساده و با مثال‌های کاربردی بپردازیم؛ اما، قبل از آن، لازم است به این سوال پاسخ دهیم که منظور از شی گرایی در جاوا اسکریپت چیست؟

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

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

ساخت شی در جاوا اسکریپت

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

1. ساخت شی با استفاده از رشته‌های لیترال

var student = {

name: "Chris",

age: 21,

studies: "Computer Science",

};

document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

• ساخت اشیا با استفاده از new:

var student = new Object();

student.name = "Chris",

student.age=21,

student.studies = "Computer Science";

document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

3. ساخت اشیا با استفاده از constructor:

function stud(name, age, studies){

this.name = name;

this.age = age;

this.studies = studies;

}

var student = stud("Chris", 21, "Computer Science");

document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

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

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

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

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

class Cars {

constructor(name, maker, price) {

this.name = name;

this.maker =  maker;

this.price = price;

}

getDetails(){

return (`The name of the car is ${this.name}.`)

}

}

let car1 = new Cars('Rolls Royce Ghost', 'Rolls Royce', '$315K');

let car2 = new Cars('Mercedes AMG One', 'Mercedes', '$2700K');

console.log(car1.name);

console.log(car2.maker);

console.log(car1.getDetails());

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

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

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

class Emp_details{

constructor(name,id){

this.name = name;

this.id = id;

}

add_Address(add){

this.add = add;

}

getDetails(){

console.log(`Employee Name: ${this.name}, Address: ${this.add}`);

}

}

let person1 = new Emp_details('Anand',27);

person1.add_Address('Bangalore');

person1.getDetails();

در این قطعه کد، کلاس شامل متغیرهای name و  id و همین‌طور توابع add_Address  و  GetDetails است که همگی در کلاس EMP_DETAILS کپسوله شده‌اند. خروجی این کد به صورت زیر است:

پیاده‌سازی وراثت در جاوا اسکریپت

وراثت را می‌توان مهم‌ترین مبحث در مقوله‌ی آموزش شی گرایی در جاوا اسکریپت دانست؛ چون این زبان برنامه‌نویسی رویکردی متفاوت از c و c++ برای وراثت دارد. همان‌طور که گفته شد جاوا اسکریپت یک زبان مبتنی بر نمونه‌ی اولیه یا اصطلاحا prototype-based است. منظور از پروتوتایپ، شی‌ای است که یک شی دیگر در جاوا اسکریپت رفتار خود را براساس آن شبیه‌سازی می‌کند. هر شی در جاوا اسکریپت از یک نمونه‌ی اولیه استفاده می‌کند که مجموعه‌ای از توابع و مولفه‌ها را در خود گنجانده است. این پروتوتایپ می‌تواند مقدار null نیز باشد. این نکته را در نظر داشته باشید که در بحث وراثت در جاوا اسکریپت از نوع پروتوتایپ، ما از کلاس استفاده نخواهیم کرد؛ بلکه اشیا هستند که از شی دیگر ارث‌بری می‌کنند. برای اینکه یک شی را به عنوان پروتوتایپ یک شی دیگر تعریف کنید، می‌توانید عبارت __proto__ را به کار ببرید. برای درک راحت موضوع به یک مثال ساده توجه کنید:

let animal = {

eats: true

};

let rabbit = {

jumps: true

};

rabbit.__proto__ = animal;

در اینجا شی animal نمونه‌ی اولیه برای rabbit تعریف شده است.

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

let animal = {

eats: true

};

let rabbit = {

jumps: true

};

rabbit.__proto__ = animal;

alert( rabbit.eats ); // true

alert( rabbit.jumps ); // true

در این مثال ساده از وراثت در جاوا اسکریپت مقدار jumps برای شی rabbit از روی پروتوتایپ animal  خوانده شده است؛ اگرچه در rabbit ما چنین مقداری نداریم. در واقع rabbit به نوعی از نمونه اولیه‌ی animal ارث‌بری می‌کند و می‌توانیم بگوییم که هر ویژگی و متدی که در animal وجود دارد، در rabbit نیز دسترس‌پذیر است. کد زیر مثالی دیگر برای ارث‌بری متد در پروتوتایپ را نشان می‌دهد:

let animal = {

eats: true,

walk() {

alert("Animal walk");

}

};

let rabbit = {

jumps: true,

__proto__: animal

};

rabbit.walk(); // Animal walk

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

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

function Student()

{

this.Name="Name";

throw new Error("You cannot create an instance of Abstract Class");

}

Student.prototype.print=function()

{

return "Student is: "+this.Name;

}

function KG(Name)

{

this.Name=Name;

}

KG.prototype=Object.create(Student.prototype);

var kg=new KG("Vivek");

document.writeln(kg.print());

خروجی این تابع Vivek خواهد بود.

سوالات متداول

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

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

استفاده از پروتوتایپ در جاوا اسکریپت چه مزیتی دارد؟

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