คลาสใน JavaScript
บทความนี้อธิบายเกี่ยวกับคลาสใน JavaScript
YouTube Video
คลาสใน JavaScript
ใน JavaScript, คลาส รวมแนวคิดของ การเขียนโปรแกรมเชิงวัตถุ และทำหน้าที่เป็นแม่แบบสำหรับอ็อบเจ็กต์ ด้วยคลาส คุณสามารถกำหนด คุณสมบัติ และ เมธอด ของอ็อบเจ็กต์ได้อย่างกระชับ ช่วยเพิ่มความสามารถในการนำกลับมาใช้ใหม่และการจัดระเบียบโค้ด ไวยากรณ์ของคลาสถูกนำมาใช้ใน JavaScript ตั้งแต่ ES6
การกำหนดคลาส
คลาสถูกกำหนดด้วยคำสำคัญ class และมักจะเริ่มต้นด้วยเมธอดที่เรียกว่า constructor
1class Person {
2 // Constructor method (called when the class is instantiated)
3 constructor(name, age) {
4 this.name = name; // Property definition
5 this.age = age;
6 }
7
8 // Method definition
9 greet() {
10 return `Hello, my name is ${this.name}`;
11 }
12}
13
14// Instantiation of the class
15const alice = new Person("Alice", 25);
16console.log(alice.greet()); // Hello, my name is Alice
- เรากำหนด คลาส ด้วย
class Person constructorเป็นเมธอดพิเศษที่จะถูกเรียกโดยอัตโนมัติเมื่ออ็อบเจ็กต์ถูกสร้างขึ้น- คำสำคัญ
thisหมายถึงอินสแตนซ์ (อ็อบเจ็กต์) ของคลาสภายในคลาส
คุณสมบัติและเมธอดของคลาส
คลาสสามารถกำหนด คุณสมบัติ และ เมธอด ได้ คุณสมบัติหมายถึงลักษณะของอ็อบเจ็กต์ และเมธอดหมายถึงฟังก์ชันที่มีอยู่ในอ็อบเจ็กต์
1class Car {
2 constructor(brand, model) {
3 this.brand = brand;
4 this.model = model;
5 }
6
7 // Method definition
8 drive() {
9 console.log(`Driving a ${this.brand} ${this.model}`);
10 }
11}
12
13const car1 = new Car("Toyota", "Corolla");
14car1.drive(); // Driving a Toyota Corolla
ในตัวอย่างนี้ มีการประกาศคลาส Car โดยมีคุณสมบัติ brand และ model และมีเมธอด drive
การสืบทอดคลาส
คลาสสามารถ สืบทอด มาจากคลาสอื่นได้ โดยการใช้การสืบทอด คุณสามารถสร้างคลาสใหม่ที่อิงจากคลาสที่มีอยู่แล้ว และเพิ่มฟังก์ชันการทำงานเพิ่มเติมได้
1class Animal {
2 constructor(name) {
3 this.name = name;
4 }
5
6 speak() {
7 console.log(`${this.name} makes a noise`);
8 }
9}
10
11// Inherit from the Animal class
12class Dog extends Animal {
13 constructor(name, breed) {
14 super(name); // Call the constructor of the parent class (Animal)
15 this.breed = breed;
16 }
17
18 // Override the method
19 speak() {
20 console.log(`${this.name} barks`);
21 }
22}
23
24const dog = new Dog("Rex", "German Shepherd");
25dog.speak(); // Rex barks
ในตัวอย่างนี้ คลาส Dog สืบทอดมาจากคลาส Animal
- คำสำคัญ
extendsถูกใช้เพื่อสืบทอดจากคลาสAnimal - ใน constructor ของคลาส
Dogใช้super()เพื่อเรียก constructor ของคลาสพาเรนต์ นี่ทำให้คุณสามารถสืบทอดกระบวนการเริ่มต้นของคลาสพาเรนต์ได้ - ภายในคลาสที่ได้รับการสืบทอด คุณสามารถเขียนทับเมธอดของคลาสพาเรนต์ได้ ในตัวอย่างนี้ แทนที่ "Rex makes a noise" จะมีการแสดงผล "Rex barks"
เมธอดแบบสแตติก
เมื่อคุณกำหนด เมธอดแบบสแตติก ภายในคลาส เมธอดนี้จะถูกเชื่อมโยงกับตัวคลาสเอง เมธอดแบบสแตติกสามารถเรียกใช้ได้โดยไม่ต้องสร้างอินสแตนซ์ก่อน
1class MathUtils {
2 // Static method
3 static add(a, b) {
4 return a + b;
5 }
6}
7
8console.log(MathUtils.add(5, 10)); // 15
ในตัวอย่างนี้ คลาส MathUtils กำหนดเมธอดแบบสแตติกชื่อ add
- คีย์เวิร์ด
staticถูกใช้สำหรับการกำหนดเมธอดแบบสแตติก - เมธอดแบบสแตติกไม่ได้เป็นของอินสแตนซ์ของคลาส และสามารถเรียกใช้ได้โดยตรงจากตัวคลาส
เก็ตเตอร์และเซ็ตเตอร์
โดยการกำหนด เก็ตเตอร์ และ เซ็ตเตอร์ ในคลาส คุณสามารถห่อหุ้มการดึงค่าและการตั้งค่าคุณสมบัติได้
1class Rectangle {
2 constructor(width, height) {
3 this.width = width;
4 this.height = height;
5 }
6
7 // Getter
8 get area() {
9 return this.width * this.height;
10 }
11
12 // Setter
13 set widthValue(newWidth) {
14 this.width = newWidth;
15 }
16}
17
18const rect = new Rectangle(10, 20);
19console.log(rect.area); // 200
20
21rect.widthValue = 15;
22console.log(rect.area); // 300
ในตัวอย่างนี้ คลาส Rectangle กำหนด area เก็ตเตอร์ และ widthValue เซ็ตเตอร์
- เก็ตเตอร์ (
get) จะถูกเรียกใช้เมื่อดึงค่าของคุณสมบัติ - เซ็ตเตอร์ (
set) จะถูกเรียกใช้เมื่อทำการตั้งค่าคุณสมบัติ
ไวยากรณ์แบบย่อนในคลาส
ในภาษา JavaScript ไวยากรณ์ของคลาสภายในถูกสร้างขึ้นโดยใช้ ฟังก์ชันตัวสร้าง และ โปรโตไทป์ ไวยากรณ์ของคลาสเป็น ไวยากรณ์แบบย่อ ที่ช่วยให้เขียนได้กระชับมากขึ้น
1// Example without using class syntax
2function Person(name, age) {
3 this.name = name;
4 this.age = age;
5}
6
7Person.prototype.greet = function() {
8 return `Hello, my name is ${this.name}`;
9};
10
11const person = new Person("Alice", 25);
12console.log(person.greet()); // Hello, my name is Alice
ในตัวอย่างนี้ มีการกำหนดฟังก์ชันตัวสร้างชื่อ Person และกำหนดเมธอด greet โดยใช้โปรโตไทป์
การจัดการกับ this
คีย์เวิร์ด this ภายในคลาสอ้างถึงอินสแตนซ์ของคลาสนั้น อย่างไรก็ตาม เมื่อใช้งาน this ในเมธอดของคลาส คุณต้องระวังว่าพฤติกรรมของมันอาจเปลี่ยนแปลงได้ขึ้นอยู่กับ ขอบเขต ปัญหาอาจเกิดขึ้นโดยเฉพาะเมื่อใช้เมธอดเป็นฟังก์ชัน callback
1class Counter {
2 constructor() {
3 this.count = 0;
4 }
5
6 increment() {
7 this.count++;
8 console.log(this.count);
9 }
10}
11
12const counter = new Counter();
13setTimeout(counter.increment, 1000); // NaN
14// NaN, since this.count is undefined, it becomes NaN after incrementing.
ในกรณีเช่นนี้ เมื่อเมธอดถูกส่งเป็น callback ให้กับ setTimeout การอ้างอิงของ this อาจเปลี่ยนแปลงได้ เพื่อหลีกเลี่ยงปัญหานี้ แนะนำให้แก้ไข this โดยใช้เมธอด bind หรือใช้ฟังก์ชันลูกศร (arrow functions)
1class Counter {
2 constructor() {
3 this.count = 0;
4 }
5
6 increment() {
7 this.count++;
8 console.log(this.count);
9 }
10}
11
12const counter = new Counter();
13
14// When using bind
15setTimeout(counter.increment.bind(counter), 1000);
16
17// When using an arrow function
18setTimeout(() => counter.increment(), 2000);สรุป
- คลาส ถูกใช้เป็นแม่แบบสำหรับสร้างวัตถุ กำหนดคุณสมบัติและเมธอดต่างๆ
- คุณสามารถใช้ การสืบทอด เพื่อขยายคลาส โดยใช้แนวคิดเชิงวัตถุ
- เมธอดแบบสแตติก เป็นของตัวคลาสเองและสามารถใช้ได้โดยไม่ต้องสร้างอินสแตนซ์
- คุณสามารถห่อหุ้มคุณสมบัติได้โดยใช้ เก็ตเตอร์ และ เซ็ตเตอร์
- ไวยากรณ์คลาสของ JavaScript คือ syntactic sugar และภายในใช้การสืบทอดแบบต้นแบบ (prototype-based inheritance)
โดยการใช้คลาส คุณสามารถจัดการการเขียนโปรแกรมเชิงวัตถุได้อย่างเป็นธรรมชาติ และปรับปรุงความสามารถในการนำโค้ดกลับมาใช้ใหม่และความสามารถในการดูแลรักษา
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย