JavaScript OOP (ต้นแบบ) #2
Nov 27 2022
สวัสดีเพื่อนๆ ฉันชื่อ Bennison ในบล็อกนี้ ฉันจะอธิบายว่า OOP ทำงานอย่างไรใน Javascript และอธิบายว่ามันแตกต่างจาก OOP แบบคลาสสิกอย่างไร ก่อนอ่านบทความนี้ โปรดอ่านบล็อกที่แล้วซึ่งเกี่ยวกับพื้นฐานของ OOP

สวัสดีเพื่อนๆ ฉันชื่อ Bennison ในบล็อกนี้ ฉันจะอธิบายว่า OOP ทำงานอย่างไรใน Javascript และอธิบายว่ามันแตกต่างจาก OOP แบบคลาสสิกอย่างไร ก่อนอ่านบทความนี้ โปรดอ่านบล็อกที่แล้วซึ่งเกี่ยวกับ พื้นฐาน ของOOP
ต้นแบบคืออะไร?
- ใน Javascript เรามีสิ่งที่เรียกว่าต้นแบบ ใน JavaScript ทุกวัตถุจะเชื่อมโยงกับต้นแบบบางอย่าง ดังนั้นแต่ละวัตถุจึงมีต้นแบบ ต้นแบบยังมีคุณสมบัติและวิธีการ
- สิ่งสำคัญคือวิธีการต้นแบบและคุณสมบัติสามารถเข้าถึงได้โดยวัตถุ
- ใน OOP แบบคลาสสิก วัตถุจะถูกสร้างอินสแตนซ์จากคลาส ซึ่งเรียกว่าการสร้างอินสแตนซ์ คลาสนี้เป็นเพียงพิมพ์เขียวสำหรับสร้างอ็อบเจกต์
- แต่ใน Javascript คำศัพท์นี้แตกต่างออกไป แต่ละออบเจ็กต์จะเชื่อมโยงกับออบเจ็กต์อื่นๆและออบเจ็กต์เหล่านั้นเรียกว่าต้นแบบ

- การสืบทอดต้นแบบหมายถึงต้นแบบที่มีวิธีการและต้นแบบที่สามารถเข้าถึงวัตถุทั้งหมดที่เชื่อมโยงกับต้นแบบนั้น
- ดังนั้นวัตถุจะสืบทอดเมธอดและคุณสมบัติจากต้นแบบ นี่จึงเรียกว่าการสืบทอดต้นแบบ การสืบทอดนี้แตกต่างจากการสืบทอดคลาสซึ่งเป็นคลาสหนึ่งที่สืบทอดมาจากคลาสอื่น แต่ในกรณีนี้ อินสแตนซ์ที่สืบทอดมาจากคลาสพื้นฐาน
- ในภาพด้านบน ในลูกศร OOP ของจาวาสคริปต์ชี้ขึ้น หมายความว่าวัตถุมอบหมายพฤติกรรมให้กับต้นแบบ
- ใน OOP แบบคลาสสิก เมธอดจะถูกคัดลอกจากคลาสไปยังอินสแตนซ์ (วัตถุ)
const numbers = [1, 2, 3, 4,5];
numbers.map((num) => num * 2)


- ฟังก์ชันคอนสตรัคเตอร์ใช้เพื่อสร้างวัตถุจากฟังก์ชัน นี่คือวิธีการใช้วัตถุในตัวเช่น Array และ map method
- นี่เป็นทางเลือกที่ทันสมัยสำหรับฟังก์ชันตัวสร้าง คลาส ES6 ทำงานเหมือนกับฟังก์ชันตัวสร้าง คลาส ES6 ไม่ทำงานเหมือน OOP แบบคลาสสิก เบื้องหลัง คลาส ES6 ถูกนำไปใช้กับฟังก์ชันตัวสร้าง
class User {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getFullName() {
console.log(this.firstName + ' ' + this.lastName);
}
}
const user = new User('Bennison', 'J');
console.log(user); // { firstName: 'Bennison', lastName: 'J' }
console.log(user.hasOwnProperty('firstName')); // true
console.log(user.hasOwnProperty('getFullName')); // false
- เมธอด “ object.create()”เป็นวิธีที่ง่ายที่สุดในการเชื่อมโยงออบเจกต์กับออบเจกต์ต้นแบบ
const objOne = {
firstName: 'Bennison',
lastName: 'J',
getFullName: function () {
console.log(this.firstName + ' ' + this.lastName);
}
};
const objTwo = Object.create(objOne);
console.log(objTwo); // {}
objTwo.getFullName(); // Bennison J
- ฉันหวังว่าในบล็อกนี้ เราได้เรียนรู้พื้นฐานของการสืบทอดต้นแบบใน Javascript หากคุณไม่เข้าใจตัวอย่างข้างต้น ไม่ต้องกังวล ฉันจะอธิบายเพิ่มเติมเกี่ยวกับแนวคิดเหล่านี้ในบล็อกถัดไปของฉัน ขอบคุณที่อ่านบล็อกนี้ แล้วพบกันใหม่