คลาสและออบเจ็ค ในภาษา TypeScript
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคลาสและออบเจ็คในภาษา TypeScript คลาสนั้นเป็นองค์ประกอบพื้นฐานของการเขียนโปรแกรมเชิงวัตถุ (OOP) ที่เป็นแม่แบบสำหรับนำไปสร้างเป็นออบเจ็คเพื่อใช้งานในโปรแกรม นี่เป็นเนื้อหาในบทนี้
- คลาสคืออะไร
- การสร้างคลาส
- การสร้างออบเจ็ค
- คอนสตรัคเตอร์
คลาสคืออะไร
คลาส (Classes) คือแม่แบบที่ใช้สำหรับสร้างออบเจ็ค คลาสประกอบไปด้วยการกำหนดแอททริบิวต์และเมธอดที่ออบเจ็คจะมี โดยมันสามารถนำไปสร้างออบเจ็คได้เป็นจำนวนมาก และนี่เองเป็นแนวคิดของการนำโค้ดกลับมาใช้ซ้ำ (Code-reuse) นอกจากนี้ คลาสสามารถนำไปสืบทอดเพื่อเพิ่มเติมความสามารถที่เรียกว่าการสืบทอดคลาส (Inheritance)
เมื่อคลาสถูกนำไปสร้างออบเจ็ค เราเรียกออบเจ็คที่สร้างมาจากคลาสว่าเป็น Instance หรือตัวแปรของคลาส ออบเจ็คจะมีข้อมูลแอททริบิวต์และเมธอดการทำงานตามที่กำหนดโดยคลาส และแต่ละออบเจ็คจะมีสถานะของข้อมูลและการทำงานเป็นของมันเอง นี่ทำให้คลาสหนึ่งสามารถนำไปสร้างหลายออบเจ็คได้
นอกจากนี้ คลาสยังมีคุณสมบัติอื่นๆ ที่ช่วยให้การเขียนโปรแกรมง่ายและสะดวกมากขึ้น เช่น การสืบทอดคลาส หรือการกำหนดแอททริบิวส์และเมธอดเป็นแบบ Static เป็นต้น นี่เป็นคุณสมบัติพื้นฐานของการเขียนโปรแกรมเชิงวัตถุ แต่เราจะไม่ได้ครอบคลุมถึงมันในบทเรียนนี้
การสร้างคลาส
คลาสสามารถสร้างได้อย่างง่ายดายด้วยการใช้งานคำสั่ง class
นี่เป็นรูปแบบการสร้างคลาสในภาษา TypeScript
class NameOfClass {
// member declarations
}
ในการสร้างคลาสเราจะใช้คำสั่ง class
ตามด้วยชื่อของคลาส NameOfClass
โดยการตั้งชื่อของคลาสจะเหมือนกับตัวแปรและเมธอด แต่ตัวอักษรตัวแรกของคลาสมักจะเริ่มต้นด้วยตัวพิมพ์ใหม่แทนเพื่อทำให้มันแยกแยะจากออบเจ็คอื่นๆ ได้ง่ายขึ้น
จากนั้นภายในบล็อคของคลาสระหว่าง {}
จะเป็นการกำหนดสมาชิกของคลาสที่ประกอบไปด้วยแอททริบิวต์และเมธอดที่คลาสจะมี โดยคลาสสามารถมีสมาชิกเหล่านี้่เป็นจำนวนเท่าไรก็ได้ ต่อไปมาเริ่มสร้างคลาสแรกของเราในภาษา TypeScript นี่เป็นคลาสของรูปสี่เหลี่ยม
class Rectangle {
width: number;
height: number;
area(): number {
return this.width * this.height;
}
}
let rect: Rectangle = new Rectangle();
rect.width = 3;
rect.height = 4;
console.log(`Area of rect: ${rect.area()}`);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Area of rect: 12
ในตัวอย่างนี้ เราได้สร้างคลาส Rectangle
ซึ่งเป็นคลาสของรูปสี่เหลี่ยมผืนผ้า คลาสนี้ประกอบไปด้วยสมาชิกที่เป็นแอททริบิวต์สองตัวคือ width
และ height
สำหรับเก็บความยาวและความสูงของรูปสี่เหลี่ยม และหนึ่งสมาชิกที่เป็นเมธอด area
ที่ใช้สำหรับคำนวณหาพื้นที่ของรูปสี่เหลี่ยมจากความยาวและความสูงของสี่เหลี่ยม
let rect: Rectangle = new Rectangle();
หลังจากที่คลาสถูกสร้างแล้วเราสามารถนำมันไปสร้างออบเจ็ค เพื่อสร้างออบเจ็คจากคลาส Rectangle
เราเรียกใช้งานคลาสโดยใส่คำสั่ง new
ที่หน้าชื่อของคลาส นี่จะสร้างออบเจ็คหรือเรียกว่า Instance ของคลาส ในตอนนี้จะเห็นว่าประเภทข้่อมูลของตัวแปรจะเป็นชื่อของคลาส Rectangle
rect.width = 3;
rect.height = 4;
แอททริบิวต์ของออบเจ็คสามารถเข้าถึงได้ผ่านตัวแปรออบเจ็คตามด้วยเครื่องหมายจุด (.
) และตามด้วยชื่อของแอททริบิวต์ ในตัวอย่างนี้ เป็นการกำหนดค่าให้กับแอททริบิวต์บนออบเจ็ค rect
ซึ่งเป็นความยาวและความสูงตามลำดับ
console.log(`Area of rect: ${rect.area()}`);
จากนั้นเป็นการเรียกใช้งานเมธอด area
สำหรับหาพื้นที่ของออบเจ็ค rect
โดยเมธอดนี้จะส่งค่ากลับเป็นพื้นที่ที่คำนวณมาจากความยาวคูณกับความสูงที่เราได้กำหนดค่าไปก่อนหน้านี้
การสร้างออบเจ็ค
เมื่อคลาสถูกประกาศแล้วมันสามารถนำไปสร้างออบเจ็คได้ และอย่างที่กล่าวไปในตอนต้น หนึ่งคลาสสามารถนำไปสร้างออบเจ็คเป็นจำนวนมากได้ มาดูการใช้งานในตัวอย่างนี้ ที่เป็นการสร้างคลาสเพื่อไปสร้างหลายออบเจ็คของบุคคล
class Person {
firstName: string;
lastName: string;
occupation: string;
getName(): string {
return this.firstName + " " + this.lastName;
}
getInfo(): string {
return `${this.getName()} is a ${this.occupation}.`;
}
}
let p1: Person = new Person();
p1.firstName = "Mateo";
p1.lastName = "Cristo";
p1.occupation = "Music producer";
let p2: Person = new Person();
p2.firstName = "Robert";
p2.lastName = "Williams";
p2.occupation = "Teacher";
console.log(p1.getInfo());
console.log(p2.getInfo());
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Mateo Cristo is a Music producer.
Robert Williams is a Teacher.
ในตัวอย่างนี้ เราสร้างคลาส Person
ซึ่งเป็นคลาสของบุคคลที่ประกอบไปด้วยสามแอททริบิวต์สำหรับเก็บชื่อ นามสกุล และอาชีพของบุคคล นอกจากนี้คลาสยังประกอบไปด้วยสองเมธอด สำหรับรับเอาชื่อแบบเต็มและกล่าวคำแนะนำเกี่ยวกับข้อมูลของบุคคลออกทางหน้าจอ
let p1: Person = new Person();
p1.firstName = "Mateo";
p1.lastName = "Cristo";
p1.occupation = "Music producer";
let p2: Person = new Person();
p2.firstName = "Robert";
p2.lastName = "Williams";
p2.occupation = "Teacher"
สิ่งที่เราต้องการแสดงให้คุณเห็นในตัวอย่างนี้คือในตอนที่มันถูกนำไปสร้างเป็นออบเจ็็ค ในตัวอย่างเราได้สร้างสองออบเจ็คของบุคคลจากคลาส Person
แต่ละออบเจ็คเป็นการแสดงถึงคนสองคนที่มีชื่อและอาชีพที่แตกต่างกัน เราได้กำหนดค่าให้กับทั้งสามแอททริบิวต์สำหรับแต่ละออบเจ็ค
console.log(p1.getInfo());
console.log(p2.getInfo());
จากนั้นเรียกใช้เมธอด getInfo
บนออบเจ็คทั้งสอง นี่จะส่งค่ากลับเป็นคำกล่าวแนะนำของแต่ละบุคคลตามข้อมูลที่ถูกกำหนดให้กับแต่ละออบเจ็ค จะเห็นว่าแต่ละออบเจ็คนั้นมีสถานะของข้อมูลเป็นของมันเองและมีการทำงานเป็นอิสระจากกัน
getName(): string {
return this.firstName + " " + this.lastName;
}
getInfo(): string {
return `${this.getName()} is a ${this.occupation}.`;
}
ในเมธอด getName
และ getInfo
สังเกตว่าการเข้าถึงแอททริบิวต์และเมธอดภายในคลาสจะถูกนำหน้าด้วยคำสั่ง this
เสมอ นี่เป็นข้อบังคับโดยไวยากรณ์ของภาษาที่จะต้องทำสำหรับการอ้างถึงสมาชิกภายในคลาสเดียวกัน โดยคำสั่ง this
หมายถึงออบเจ็คปัจจุบันที่บริบทของโปรแกรมกำลังทำงานอยู่
คอนสตรัคเตอร์
คอนสตรัคเตอร์ (Constructor) เป็นเมธอดพิเศษที่จะถูกเรียกใช้งานตอนที่ออบเจ็คถูกสร้าง คอนสตรัคเตอร์จะไม่มีการส่งค่ากลับ มันมักจะถูกใช้สำหรับกำหนดค่าเริ่มต้นให้กับออบเจ็ค คอนสตรัคเตอร์จะต้องมีชื่อเป็น constructor
เสมอ และเนื่องจากมันเป็นเมธอดทำให้สามารถมีพารามิเตอร์ได้
จากตัวอย่างแรกสำหรับคลาส Rectangle นั้น เรามาสร้างคลาสนี้อีกครั้ง แต่ในครั้งนี้เราจะกำหนดคอนสตรัคเตอร์ให้กับคลาสด้วยเพื่อให้กำหนดค่าเริ่มต้นให้กับออบเจ็ค นี่เป็นตัวยอย่างของโปรแกรม
class Rectangle {
width: number;
height: number;
constructor(width: number, height: number) {
console.log("constructor has been called.");
this.width = width;
this.height = height;
}
area(): number {
return this.width * this.height;
}
}
let rect1: Rectangle = new Rectangle(3, 4);
let rect2: Rectangle = new Rectangle(6, 5);
console.log(`Area of rect1: ${rect1.area()}`);
console.log(`Area of rect2: ${rect2.area()}`);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Area of rect1: 12
Area of rect2: 30
ในตัวอย่างนี้ มันเป็นคลาสเดียวกันในตัวอย่างแรกนั้นคือคลาส Rectangle
แต่ในครั้งนี้เราประกาศมันพร้อมกับคอนสตรัคเตอร์ด้วยเพื่อใช้ในการกำหนดค่าเริ่มต้นในตอนที่ออบเจ็คถูกสร้าง
constructor(width: number, height: number) {
console.log("constructor has been called.");
this.width = width;
this.height = height;
}
นี่เป็นคอนสตรัคเตอร์ของคลาสที่จะต้องมีชื่อเป็น constructor
และมันจะถูกเรียกใช้งานในตอนที่ออบเจ็คถูกสร้างด้วยคำสั่ง new
คอนสตรัคเตอร์นี้มีสองพารามิเตอร์ที่เป็นความยาวและความสูงของรูปสี่เหลี่ยม และเราได้คัดลอกค่าของมันให้กับแอททริบิวต์ width
และ height
ของออบเจ็ค
let rect1: Rectangle = new Rectangle(3, 4);
let rect2: Rectangle = new Rectangle(6, 5);
นี่จะส่งผลกับการใช้งานในตอนสร้างออบเจ็ค เนื่องจากคลาสนี้ประกอบไปด้วยคอนสตรัคเตอร์ที่มีสองพารามิเตอร์ ดังนั้นค่าที่ถูกส่งในตอนสร้างออบเจ็คจะได้รับโดยคอนสตรัคเตอร์ และจะถูกใช้สำหรับกำหนดค่าเริ่มต้นให้กับออบเจ็ค
จะเห็นว่าการใช้งานคอนสตรัคเตอร์ทำให้เราสามารถกำหนดค่าเริ่มต้นให้กับออบเจ็คได้ทันทีในตอนที่มันถูกสร้าง โดยที่ไม่ต้องทำมันในภายหลังผ่านทางตัวแปรของออบเจ็คเหมือนกับตัวอย่างที่ผ่านมา
ในบทนี้ คุณได้เรียนรู้เกี่ยวคลาสในภาษา TypeScript เราได้พูดถึงวิธีการสร้างคลาสและการนำไปสร้างเป็นออบเจ็ค นี่เป็นแนวคิดพื้นฐานที่สุดของการเขียนโปรแกรมเชิงวัตถุ นอกจากนี้ เราได้พูดถึงคอนสตรัคเตอร์ซึ่งเป็นเมธอดพิเศษที่จะถูกเรียกใช้งานในตอนที่ออบเจ็คถูกสร้าง