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

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

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

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

قبل از اینکه بدانید شی گرایی در جاوا اسکریپت چیست؛ لازم است راجب مفهوم شی گرایی یا OPP  که مخفف کلمه Object-Oriented Programming اطلاعات اولیه داشته باشید.

شی گرایی یک پارادایم در جاوا اسکریپت است که کد را سازماندهی می‌کند و به شیوه مخصوص نوشته می‌شود.

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

• سازماندهی پروژه
• جلوگیری از تکرار کد
• بالا بردن امکان توسعه پذیری پروژه (انعطاف پذیری)
• خطایابی آسان‌تر
• و…

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

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

• ساخت شی با استفاده از رشته Literal
• ساخت شی با استفاده از new یا تابع سازنده
• ساخت و تغییر شی در جاوا اسکریپت

ساخت شی با استفاده از رشته Literal

ساخت Object با استفاده از لیترال به این معنی است که: لیستی شامل  name : valueمی‌سازیم که با علامت , از هم جدا می‌شوند و تمام لیست درون {} قرار میگیرد. همچنین value ها می‌توانند ویژگی(properties) یا توابع (functions) باشند.

در ادامه نمونه کد Litral Object را خواهیم دید:

var person = {firstName:"Parsa", lastName:"Tafkori", age:17, eyeColor:"blue"};

ساخت شی با رشته لیترال نمونه چند خطی:

var person = {
  firstName: "Parsa",
  lastName: "Tafkori",
  age: 17,
  eyeColor: "blue"
};

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

زمانی که ما تابع سازنده خود را تعریف کردیم، با استفاده از new می‌توانیم نمونه‌های جدید بسازیم؛ سینتکس استفاده از new به‌صورت زیر است:

new constructorFunction(arguments)

مولفه‌ها(Parameters) این سینتکس:

• ConstructorFunction : کلاس یا تابعی که قرار است از آن ارث بری کند.
• Arguments : لیستی از مقادیر که توسط تابع سازنده فراخوانی می‌شوند.

در ادامه با نمونه‌ای روش کار new را خواهیم دید:

function Fruit(color, taste, seeds) {
            this.color = color;
            this.taste = taste;
            this.seeds = seeds;
}

// Create an object
const fruit1 = new Fruit('Yellow', 'Sweet', 1);

// Display the result
console.log(fruit1.color);

خروجی:

Yellow

در مثال بالا کلمه new یک شی خالی ایجاد می‌کند؛ با توجه به اینکه تابع Fruit نیاز به دریافت 3 ویژگی (رنگ، طعم، تعداد هسته) است، که با کلمه this مشخص شدند؛ در شی جدید که نام آن fruit1 است نیاز داریم 3 ویژگی را به ترتیب قرار دهیم تا مقدار دهی انجام شود. در اصل ما پس از نوشتن این کد:

const fruit1 = new Fruit('Yellow', 'Sweet', 1);

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

function Fruit1(color, taste, seeds) {
            this.color = 'Yellow';
            this.taste = 'Sweet;
            this.seeds =1;
}

همانطور که دیدید تابع new به این صورت ارث بری را انجام می‌دهد.

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

اشیا در جاوا اسکریپت قابلیت تغییر را دارند. یک شی از طریق مرجع آدرس دهی می‌شود نه از طریق مقدار؛ در ادامه نمونه‌ای را باهم خواهیم دید:

var s = person;

اگر person را یک شی در نظر بگیریم؛ دستور بالا از person یک کپی نمی‌سازد بلکه s خود person است و هر تغییری در person اعمال شود در s نیز همان تغییر اعمال می‌شود.

کد زیر رو در نظر بگیرید:

var person = {firstName:" Parsa", lastName:"Tafkori", age:17, eyeColor:"blue"}
var s = person;
s.age = 10;

با توجه به اینکه s به person متصل شد؛ پس هر تغییری در s بدیم، روی داده‌های person اثر میگذارد.

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

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

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

class User{
    //class body
}

در مثال بالا با فراخوانی class و قرار دادن نام آن که User است یک کلاس ساختیم در ادامه یک {} قرار دادیم تا سینتکس نوشتاری کلاس تکمیل شود؛ ما می‌توانیم تمام اطلاعات لازم را درون کلاس قرار دهیم.

در ادامه یک مثال کامل از کلاس رو میبینیم:

class User {
  constructor(UserName) {
    this.UserName = name;
    }
}

همانطور که مشاهده کردید، پس از ساخت کلاس User اولین کار ساخت متد constructor است؛ این متد یکی از متدهای خاص است که برای مقدار دهی به نمونه‌ها استفاده می‌شود؛ در مثال بالا مقدار UserName را دریافت می‌کند و آن را مقدار دهی می‌کند.

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

class User {
    constructor(name) {
        name; // => 'Jon Snow'
        this.name = name;
    }
}
const user01 = new User('Parsa Tafakori');

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

مفاهیم اصلی شی گرایی در جاوا اسکریپت

• کپسوله سازی یا Encapsulation
• ارث بری یا Inheritance
• انتزاع یا Abstraction
• چندشکلی یا Polymorphism

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

کپسوله سازی(Encapsulation) چیست؟ کپسوله سازی در جاوا اسکریپت فرایندی است که تمام متغیرها و متدهای یک بخش را درون یک object قرار می‌دهیم تا امکان دسترسی به آن توسط کاربران را قطع کنیم.

مثال زیر یک نمونه کد عادی است:

let enterName = () => “enter name”;
let enterFullname = () => “enter fullname”;

حالا اگر بخواهیم آن را بصورت کپسوله سازی دربیاوریم به این شکل می‌شود:

let Employee = {
    enterName: () => 'enter name',
    enterFullname: () => "enter fullname"
}

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

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

ارث بری(Inheritance) چیست؟ ارث بری در برنامه نویسی، به ساخت یک الگو ثابت برای جلوگیری از تکرار کد است. فرض کنید یک شرکت خودرو سازی دارید و هر بار برای ساخت یک ماشین، به کارگران خود بگویید: این ماشین نیاز به 4 چرخ دارد، این ماشین نیاز به 4 در دارد، این ماشین نیاز به 3 پدال دارد و… واقعا خسته کننده هست مگه نه؟! ما با ایجاد یک الگو که نام آن را ارث بری گذاشتیم به کارگران می‌گوییم هربار که خواستید ماشینی بسازید به از آن الگو تبعیت کنید.

ارث بری در واقع همانگونه که از اسم آن پیداست از به ارث بردن ویژگی‌های والد یا به اصلاح برنامه نویسی به ارث بردن ویژگی‌های مرجع است. در مثالی می‌خواهیم الگویی بسازیم تا وقتی نام ماشین و برند ماشین را به آن بدهیم به ما بگوید که نام ماشین شما (نام ماشین مدنظر)  و مدل آن (مدل مدنظر) است.

در ادامه مثالی از ارث بری ماشین را خواهیم دید:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
let myCar = new Model("Pride", " SAIPA");

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

انتزاع (Abstraction) چیست؟ انتزاع به فرایند حذف بخش‌های غیرضروری به منظور بهینه کردن کد است. به بیان واضح‌تر جهت کاهش پیچیدگی و افزایش کارایی، بخشی از کد را مخفی می‌کنیم.

نمونه کد زیر رو در نظر بگیرید:

abstract class Person {
    constructor(public name: string) {
    abstract sayHi(): void
    }
}

class Man extends Person {
    constructor(name: string) {
        super(name)
        this.name = name
    }
    sayHi() {
        return `Hi, my name is ${this.name}.`
    }
}
const joel = new Man('Ali')
Ali.sayHi()
  // Hi, my name is Ali.

اگر دقت کنید در مثال بالا یک کلاس انتزاعی با نام person ساختیم و داخل آن یک متد انتزاعی با نام sayHi تعریف کردیم. در ادامه آن کلاس Man را ساختیم و گفتیم که از person ارث بری کند؛ در ادامه متد sayHi را درون آن تعریف کردیم.

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

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

چند شکلی(Polymorphism) چیست؟ بخوام خلاصه بگم Polymorphism یا چند شکلی متعدد به ما اجازه میدهد کارهایی که شکل هم هستند را به روش‌های متفاوت پیاده سازی کنیم. واژه Polymorphism  یک واژه یونانی که معنی «دارا بودن چند شکل و حالت» است؛ این واژه از کلمه Polymorph الهام گرفته شده که از دو بخش poly که معنی زیاد دارد و همینطور واژه morph به معنی شکل است تشکیل شده.

Polymorphism (چند شکلی) شامل 2 بخش زیر است:

• Method overriding
• Method overloading

متد overriding در Polymorphism

با مثالی عملکرد متد overriding را خواهیم دید:

class Animal {
    speak() {
        console.log("Animals have different sounds");
    }
}

class Cat extends Animal {
    speak() {
        console.log("Cat says Meow Meow");
    }
}

class Dog extends Animal {
    speak() {
        console.log("Dog say Woof Woof");
    }
}

let s = [new Cat(), new Dog()]
s.forEach(function (info) {
    info.speak();
});

در قطعه کد بالا، کلاس مرجع Animal را ساختیم و تابع Speak را درون آن قرار دادیم؛ در ادامه از آن دو فرزند با نام‌های Cat و Dog از کلاس مرجع Animal ارث بری کردند.

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

! نکته: تابع کلاس فرزند باید دقیقا همان تابع کلاس مرجع را داشته باشد.

متد overloading در Polymorphism

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

• تعدیل تعداد پارامترها (حذف پارامتر یا اضافه کردن پارامتر)
• تغییر نوع پارامتر (مثلا تبدیل عدد به رشته)

نمونه کد زیر استفاده از متد overloading را نمایش می‌دهد:

class Person {
    sayAge(age) {
      return `The age is ${age}.`
    }
}

class Boy extends Person {
    sayAge(ageOne, ageTwo) {
      return `The age is ${ageOne} and ${ageTwo}.`
    }
}

const Ali = new Person()
Ali.sayAge(17)
  // The age is 17.

const Behnam = new Boy()
Behnam.sayAge(21, 26)
  // The age is 21 and 26.

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

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

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