Note For JavaScript “Classes” Part I

Ye Min Naing
4 min readSep 1, 2021
Photo Credit: www.tutorialrepublic.com

ဆရာသက်ခိုင်ဆီမှ သင်ကြားခဲ့ရသောအရာများ ထဲက Class အကြောင်း

Class က ဘာလုပ်လဲဆိုရင် Object Literal တွေ ဆောက်လို့ရတယ်။ Object တခုချင်းဆီကို Literal အနေနဲ့ရေးနေရတယ်ဆီကနေ ECMA 6 မှာ Javaတို့ C++ တို့ style OOP ကိုထည့်လိုက်တယ်

Class က ဘာနဲ့တူလဲဆိုရင် စက်ရုံနဲ့တူတယ် စက်ရုံသည် ကုန်ပစ္စည်းတွေထုတ်တယ် VeVe ဗူးထုတ်တယ်ဆိုပါဆို့ VeVe အချိုရေဗူးတိုင်းသည် အားလုံးသော characteristics (ပစ္စည်း လကၡဏာမ်ား) အတူတူပဲဖြစ်တယ်။

Class သည် Object တခုမှာ ဘာပါရမလဲဆိုတဲ့ Blueprint (အခြေခံများ)ကိုပြောထားတာ။

Class က စက်ရုံနဲ့တူတယ် Object က စက်ရုံကထွက်တဲ့ ကုန်ပစ္စည်းနဲ့တူတယ်။

Class က ဘာကို define လုပ်လဲဆိုရင် ဒီ Object ထဲမှာ ဘာတွေပါမလဲဆိုတာကိုပြောတယ် Properties and Methods တွေ ဘာတွေပါမလဲဆိုတာကို ပြောထားတာ Class သည် ဘုံထုတ်ထားတဲ့အရာလို့ပြောချင်ပါတယ်။

Class ကို ဘုံအရာလိုပြောလို့ရတယ် Object က specific instance ဖြစ်တယ်လို့ဆိုနိုင်တယ်။

specific instance ဆိုတာဘာလဲဆိုရင် (Mg Mg could be an instance of the Employee class မောင်မောင်ဟာ အလုပ်သမား Class ရဲ့ Instance object )

Object ကိုစစဆောက်ပေးတဲ့ method ကို Constructor လို့ခေါ်တယ်

constructor ရေးတဲ့အခါမှာ စာလုံးအကြီး နဲ့ စရေးစေလိုတယ် တခြား function တွေနဲ့ မတူအောင်

Example: function Human(name,age){}

ခေါ်သုံးမယ်ဆိုရင် new ဆိုတဲ့ operator နဲ့ခေါ်သုံးမှ Object အဖြစ်ရမှာဖြစ်တယ်

Example: let h = new Human(“TG”,37);

new keyword မပါရင် ရိုးရိုး function ခေါ်သုံးသလိုဖြစ်သွားမယ်

ရိုးရိုး Object literal ရေးတာနဲ့ Function Constructor လိုရေးတာဘာကွာလဲဆိုရင် Object literal က function တွေဘာတွေထပ်လိုရင် literal ထဲမှာ ပြန်ပြန်ပြီးရေးနေရတယ် Object literal က သူ့ကို ပြန်ပြန်ပြီး reuse လုပ်လို့မရဘူး Constructor သုံးလိုက်တော့ ဘုံသဘောဖြစ်သွားပြီး သက်ဆိုရာ Object လေးတွေ အခါခါ reuse ပြီးဆောက်လို့ရသွားတယ်။

ရိုးရိုး Object Literal ကို ဘယ်နေရာမှာသုံးသင့်လဲဆိုရင် ပေါ့ပေါ့ပါးပါးဖြစ်တဲ့ object တွေ ဘုံခဏခဏပြန်မသုံးဖြစ်တဲ့ ဉပမာ data modeling လုပ်တဲ့ကောင်တွေ parameter pass လုပ်တယ် data storage လုပ်တဲ့ ကောင်မျိုးတွေ တခုခုပဲ လုပ်တယ်ဆိုရင်တော့သုံးသင့်တယ်။

မဟုတ်ရင်တော့ data structure တခုလို ခဏခဏပြန်သုံးနေရရင်တဲ့ method တွေဘာတွေရှိရင် function constructor ကိုသုံးသင့်တယ်။

Classes with the class Keyword

class Human

{

}

Syntactic Sugar ဖြစ်တယ် Java က class နဲ့ သွားတူတယ်လို့ပြောလို့မရဘူး Java က class သည် class base ဖြစ်တယ် JavaScript က class သည် prototype base ဖြစ်တယ်။ prototype ဆိုတာကလည်းသူက သူဟာသူ object တခုဖြစ်နေပြီးသား parent ကလည်း object အမျိုးအစား။ Java class က runtime မှာ သက်မှတ်ပေးလိုက်တဲ့ type ဖြစ်နေတာ။

အဓိကအားဖြင့် prototype base မှာ parent instant သည် တခုတည်းဖြစ်တယ် အဲ့ဒီကနေပြီး child တွေက share လုပ်ပြီးသုံးရတယ်

Class base မှာတော့ သုံးစရာမလိုဘူး children တိုင်းသည် parent ရဲ့ properties တိုင်းကို အမွေလက်ခံရရှိတယ်။

Prototype base က တကယ့်လက်တွေ့ဘဝနဲ့သွားတူနေတယ် ကိုယ့်မှာ အဖေတယောက်ပဲရှိတယ် အဖေက တခုခုဖြစ်သွားရင် ကိုယ့်မောင်နှမတွေရဲ့ အဖေလည်း တခုခုဖြစ်တာပဲ အဖေတူတာကို ဒါမျိုးပါ။

Syntactic Sugar ဆိုတာ class base ပုံစံနဲ့ရေးလိုက်တဲ့ code ပုံစံကို plain old JavaScript code ပုံစံအဖြစ် နောက်ဘက်ကနေပြောင်းပေးလိုက်တာပါပဲ။

class ClassicalGreeting {

constructor(greeting = “Hello”, name = “World”) {

this.greeting = greeting

this.name = name

}

greet() {

return `${this.greeting}, ${this.name}!`

}

}

const classyGreeting = new ClassicalGreeting(“Hey”, “folks”)

console.log(classyGreeting.greet())

Class style နဲ့ရေးထားတာကို နောက်မှာ အောက်က ပုံစံဖြစ်အောင်ပြောင်း ပေးလိုက်တာပါ။

function PrototypicalGreeting(greeting = “Hello”, name = “World”) {

this.greeting = greeting

this.name = name

}

PrototypicalGreeting.prototype.greet = function() {

return `${this.greeting}, ${this.name}!`

}

const greetProto = new PrototypicalGreeting(“Hey”, “folks”)

console.log(greetProto.greet())

Class syntax က C family က ဆင်းသက်လာတဲ့ programming language အတော်များများမှာ သုံးလို့ JavaScript ရဲ့ ဆောင်ပုဒ် “everything for everyone”အရ ES6 မှာပါလာတာက တခြား language တွေက ပြောင်းလာတဲ့သူတွေ အဆင်ပြေအောင်ထပ်ထည့်ပေးထားတဲ့ သဘောဖြစ်တယ်။

Class constructor ထ အလုပ်လုပ်သွားတဲ့အချိန်က ပထမ code မှာ ပြထားတဲ့ new keyword ထည့်မှ အလုပ်လုပ်ပါတယ်။

ဘာကြောင့် class တွေဆောက်လည်း

အဓိကအားဖြင့် class ရဲ့သဘောက data ရှိတယ် method ရှိတယ် problems solve လုပ်တဲ့အခါ လူတွေ တွေးခေါ်နေကြပုံစုံဖြစ်တဲ့ hierarchy of composite အရာရာအားလုံးက အသေးလေးတွေလုပ်ပြီး ဖွဲ့စည်းလိုက်တဲ့သဘော Car မှာဆိုရင် Engine , Gear Box, Break , Wheels စတာတွေနဲ့ ပေါင်းစပ်ဖွဲ့စည်းလိုက်သလို properties composition လုပ်တယ် OOP မှာကြတော့ သူ့ Data နဲ့ သူ့ method တွေနဲ့ တွဲပြီးတော့ အလုပ်လုပ်တယ် အဲ့ဒါကို Encapsulation လို့ခေါ်တယ်။ state ကိုထိန်းထားတယ် state ကို encapsulate လုပ်ထားတယ်လို့မြင်နိုင်တယ်။

Encapsulation လို့ပြောရင် သူ့ data နဲ့သူ့ code တွဲအလုပ်လုပ်တာနောက်တခုက သူ့ data ကိုပြင်ပကပြင်လို့မရအောင်ထိန်းတာဆိုတဲ့သဘောပဲ။

ပြင်ပက သူ့ internal data ကိုလာသုံးလို့မရအောင် ကာကွယ်ဖို့ Java,C++,C# လိုကောင်တွေမှာ private လိုကောင်တွေပေးထားတယ်။

ဒါသည် data hiding ပဲ။ Data hiding ရဲ့သဘောသည် ပြင်ပကနေ သူ့ data ကို လာသုံးလို့ မရအောင်ကာ ထားပေးတဲ့ သဘောပဲ။

Getter , Setter ရေးကြတယ် ဘာလို့ရေးလဲဆိုတာ နားသိပ်မလည်ကြဘူး Get, Set ကြီးပဲက data ကိုလာပြီး get လုပ်တယ် set လာပြောင်းသွားတယ်ပုံစံက အသုံးမဝင်ဘူး ဘာလို့လဲဆိုတော့ data ကို validation လုပ်ပြီးမှ တခုခု check လုပ်ပြီးမှာ request ပေးသုံးသင့်တာလား set ပေးလုပ်သင့်လား စစ်ဆေးပြီးမှ data ကို ပြောင်းသင့်တယ်။ ဉပမာ အသက်ကို age ကို set လုပ်ရာမှာ အသက် 200 ကျော်မျိုးကို ပေးလုပ်တာမျိုးကိုထိန်းသင့်တယ် ဒါမှသာ Well Defined Encapsulation မှန်မယ်။ ကိုယ့် data ရဲ့ state ကို မှားမသွားအောင် cover လုပ်ထားနိုင်တယ်။ တခြားတယောက်ယောက်က ကိုယ့် data ကို accidental modification မလုပ်နိုင်တော့ဘူးပေါ့။

နောက်တခုက data ရဲ့ state ကို သိမ်းထားတယ် ပြင်ပကနေ ဘာကိုပဲ သုံးသင့်လဲဆိုရင် public methods (API) တွေပဲ ပေးခေါ်သုံးသင့်တယ်။

program to interfaces not implementations နဲ့ ကိုက်ညီမှု့ရှိရမယ် ဘာပြောချင်တာလဲဆိုတော့ interfaces (the set of public methods )ဆိုတဲ့ သဘောက public ကနေ access လုပ်လို့ရတဲ့ ပြင်ပကနေခေါ်သုံးလို့ရတဲ့ methods တွေကို interfaces(API) လို့ခေါ်တယ် အပြင်ကိုတော့ပေးသုံးထားတယ် အထဲက data တွေကိုတော့လာမထိနဲ့ဆိုတဲ့သဘောပါ။

OOP မှာ အဓိက အသုံးဝင်တာတွေက Encapsulation, Inheritance, Polymorphism

Inheritance က ဘာအသုံဝင်လဲဆိုရင် code reuse လုပ်လို့ရတယ် ကိုယ်တိုင်ပြန်ရေးစရာမလိုဘူး development costs and time သက်သာစေတယ်။ Test လုပ်ပြီးသားတွေဖြစ်တဲ့အတွက် reliable ဖြစ်တာပေါ့။

Inheritance က code ရော functionalities ကော behavior ကိုရော Reuse လုပ်တယ်လို့ပြောလို့ရတယ်။

နောက်တခုက ရှိပြီးသား ကောင်တွေပေါ်မူတည်ပြီးတော့ abstractions တွေကို ဆင့်ဆင့်ပြီးတော့ တည်ဆောက်လို့ရသွားတယ် new abstraction ကို old abstraction ပေါ်တည်ပြီးဆောက်လို့ရတယ်။

class Person {

constructor(first, last, age, gender, interests) {

this.name = {

first,

last

};

this.age = age;

this.gender = gender;

this.interests = interests;

}

greeting() {

console.log(`Hi! I’m ${this.name.first}`);

};

farewell() {

console.log(`${this.name.first} has left the building. Bye for now!`);

};

}

class Teacher extends Person {

constructor(first, last, age, gender, interests, subject, grade) {

super(first, last, age, gender, interests);

// subject and grade are specific to Teacher

this.subject = subject;

this.grade = grade;

}

}

Person ကို base လုပ်ပြီးတော့ Teacher ဆောက်လို့ရသွားတယ်

Abstraction တွေကို decomposition လုပ်တဲ့နေရာမှာလဲသုံးလို့ရတယ် inheritance hierarchy မှာ structure တူရမယ် Teacher သည် Person အမျိုးအစားဖြစ်ရမယ် Airplane extends Person {} ဆိုပြီး မတူတာမျိုးကို inheritance မလုပ်သင့်ဘူးပေါ့။

Liskov Substitution Principle ဉပမာ Teacher သည် Person ဖြစ်တယ် သုံးလို့ရတယ် Person ရဲ့ behaviorတွေကို Teacher က အတက်နိုင်ဆုံးလိုက်နာရမယ် greeting() farewell() မှာ ထပ်ထည့်လို့ရတယ် အရမ်းကွဲထွက်နေလို့မရတဲ့ သဘော။

ဘယ်နေရာမှာ Inheritance သုံးသင့်လဲဆိုရင် General Class (Person) ကနေ Special Class (Teacher) ဆိုတဲ့ စာသင် အမှတ်ပေးတဲ့ဆိုတဲ့ specific behaviorတွေ ထည့်ပေါင်းလိုက်တဲ့နေရာမျိုးနှင့် behavior ကို slightly change အနည်းငယ်ပြောင်းလိုက်ရမျိုး(ဒါပေမယ့် သူ့ဂွင်ထဲမှာပဲရှိရမယ်နော်)

တစ်အချက် က Parent class နဲ့ Structure အရ Taxonomy အရတူသလား Child class က behavior အသစ်ထပ်ထည့်ဖို့ရှိသလား ရှိပြီးသား behavior ကို နဲနဲပြောင်းဖို့ရှိသလား ဆိုရင်တော့ subclass အနေနဲ့သုံးသင့်တယ်။

Part II ကိုလည်း ဆက်ရေးပါမယ်

--

--

Ye Min Naing

In Love with Flutter, Webmaster, Digital Account Manager