Object Constructors ใน JavaScript
บ่อยครั้งที่คุณจำเป็นต้องสร้างออบเจกต์ (object) หลาย ๆ ชิ้นที่มีประเภทเดียวกัน JavaScript จึงมีหลายวิธีในการทำเช่นนี้
Constructor Functions
Constructor คือฟังก์ชันพิเศษที่ใช้สำหรับสร้างและตั้งค่าออบเจกต์ ให้ใช้คีย์เวิร์ด new ในการเรียกใช้งาน และควรเริ่มต้นชื่อฟังก์ชันด้วยตัวอักษรพิมพ์ใหญ่เสมอ เพื่อช่วยให้คุณแยกแยะมันออกจากฟังก์ชันทั่วไปได้
หากคุณลืมใช้คีย์เวิร์ด new ฟังก์ชันจะทำงานเหมือนฟังก์ชันมาตรฐานทั่วไป และไม่สามารถสร้างออบเจกต์ที่ถูกต้องได้
Default Values
คุณสามารถกำหนดค่าเริ่มต้นใน constructor ได้ ซึ่งจะช่วยให้มั่นใจว่าออบเจกต์ของคุณจะมีข้อมูลที่ถูกต้องเสมอ แม้ว่าคุณจะไม่ได้ส่งอาร์กิวเมนต์ (argument) มาก็ตาม
Example:
function Person(name = "Unknown", age = 0) {
this.name = name;
this.age = age;
}
Prototypes และ Memory
การเพิ่มเมธอด (method) ลงใน prototype นั้นชาญฉลาดกว่าการเพิ่มลงใน constructor โดยตรง เมื่อคุณใช้ prototype ทุกอินสแตนซ์ (instance) จะใช้เมธอดเดียวกันเพียงหนึ่งเดียว ซึ่งช่วยประหยัดหน่วยความจำเพราะคอมพิวเตอร์ไม่จำเป็นต้องสร้างเมธอดขึ้นมาใหม่สำหรับทุกออบเจกต์ที่สร้างขึ้น
Object.create()
เมธอดนี้จะสร้างออบเจกต์ใหม่โดยใช้ออบเจกต์ที่มีอยู่แล้วเป็น prototype ซึ่งเป็นการสร้างการสืบทอด (inheritance) โดยไม่จำเป็นต้องใช้ constructor และออบเจกต์ใหม่จะสามารถเข้าถึงคุณสมบัติ (properties) จากออบเจกต์ต้นฉบับได้
Class Inheritance
JavaScript สมัยใหม่ใช้ class ในการจัดการเรื่องการสืบทอด คุณสามารถสร้างคลาสลูก (child class) ที่ขยายความสามารถจากคลาสแม่ (parent class) ได้ โดยใช้คีย์เวิร์ด super() เพื่อส่งข้อมูลจากคลาสลูกไปยังคลาสแม่ วิธีนี้ช่วยให้คลาสลูกสามารถใช้คุณสมบัติจากคลาสแม่ได้ในขณะที่ยังสามารถเพิ่มคุณสมบัติเฉพาะตัวของตัวเองลงไปได้ด้วย
ทำไมต้องใช้ constructor?
- Reusable code: สร้างออบเจกต์ที่คล้ายคลึงกันจำนวนมากได้อย่างรวดเร็ว
- Encapsulation: เก็บตรรกะการตั้งค่าออบเจกต์ไว้ในที่เดียว
- Easy initialization: กำหนดค่าเฉพาะเจาะจงได้ในระหว่างการสร้าง
- Inheritance: สร้างออบเจกต์ที่ซับซ้อนจากออบเจกต์ที่เรียบง่ายกว่า
- Clean code: ช่วยให้ตรรกะของคุณเป็นระเบียบและอ่านง่าย
Source: https://www.geeksforgeeks.org/javascript/js-constructor-method/ Source: https://www.w3schools.com/js/js_object_constructors.asp Full post: https://dev.to/kamalesh_ar_6252544786997/object-constructors-in-javascript-2e96
Optional learning community: https://t.me/GyaanSetuAi