Object Constructors ใน JavaScript
เมื่อคุณต้องการสร้างออบเจกต์จำนวนมากที่มีประเภทเดียวกัน JavaScript มีหลายวิธีที่ช่วยให้คุณทำสิ่งนี้ได้อย่างมีประสิทธิภาพ
Constructor Functions
Constructor คือฟังก์ชันที่ใช้สำหรับสร้างออบเจกต์ใหม่ โปรดใช้กฎเหล่านี้เพื่อหลีกเลี่ยงข้อผิดพลาด:
- ใช้ตัวอักษรพิมพ์ใหญ่ที่ตัวแรกของชื่อฟังก์ชัน เพื่อช่วยให้คุณระบุได้ว่าเป็น constructor
- ใช้ keyword
newหากคุณลืมใช้ ฟังก์ชันจะทำงานเหมือนฟังก์ชันปกติและไม่สามารถสร้างออบเจกต์ได้
Default Values
คุณสามารถกำหนดค่าเริ่มต้นใน constructor ได้ วิธีนี้จะช่วยให้มั่นใจว่าออบเจกต์ของคุณยังคงใช้งานได้แม้ว่าคุณจะข้ามรายละเอียดบางอย่างไปก็ตาม
Example:
function Person(name = "Unknown", age = 0) {
this.name = name;
this.age = age;
}
หากคุณเรียกใช้ new Person() ชื่อจะเป็น "Unknown" และอายุจะเป็น 0
Object.create()
คุณสามารถใช้ Object.create() เพื่อสร้างออบเจกต์ใหม่โดยอ้างอิงจากออบเจกต์ที่มีอยู่แล้ว ซึ่งเป็นการใช้การสืบทอดแบบ prototype-based แทนที่จะเป็นการคัดลอกข้อมูล ออบเจกต์ใหม่จะเชื่อมโยงไปยัง prototype ต้นฉบับแทน
Memory Optimization
อย่าใส่ method ไว้ภายใน constructor โดยตรง เพราะหากทำเช่นนั้น ออบเจกต์ใหม่ทุกตัวจะมีสำเนาของ method นั้นเป็นของตัวเอง ซึ่งเป็นการสิ้นเปลืองหน่วยความจำ
ให้เพิ่ม method เข้าไปใน prototype แทน วิธีนี้จะทำให้ออบเจกต์ทั้งหมดใช้ method เวอร์ชันเดียวกันเพียงชุดเดียว
Example:
Person.prototype.greet = function() {
console.log("Hello " + this.name);
};
Inheritance
Classes ช่วยให้ class หนึ่งสามารถสืบทอดคุณสมบัติจากอีก class หนึ่งได้ ให้ใช้ keyword super() ใน child class เพื่อเรียกใช้งาน constructor ของ parent วิธีนี้จะช่วยให้ child class สามารถเข้าถึง property จาก parent ได้
ประโยชน์ของการใช้ constructor:
- โค้ดที่นำกลับมาใช้ใหม่ได้: สร้างออบเจกต์จำนวนมากด้วยรูปแบบเดียว
- ลอจิกที่สะอาด: รวมการตั้งค่าออบเจกต์ไว้ในที่เดียว
- การกำหนดค่าเริ่มต้นที่ง่าย: กำหนดค่าเฉพาะเจาะจงในระหว่างการสร้าง
- การสืบทอด: สร้างออบเจกต์ที่ซับซ้อนจากออบเจกต์ที่เรียบง่ายกว่า
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