Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

Object Literals vs Constructors ใน JavaScript: ความแตกต่างและการใช้งาน

ทั้ง new Object() และ Object Literal {} ทำหน้าที่เดียวกันคือ สร้างอ็อบเจกต์ใหม่ แต่มีความแตกต่างเล็กน้อยในการเพิ่มคุณสมบัติ (properties)

การสร้างอ็อบเจกต์พื้นฐาน

1. Object Literal (แนะนำ)

// สร้างพร้อม properties
let a = {
  name: 'Ayush'
};

2. Constructor new Object()

// สร้างก่อน แล้วค่อยเพิ่ม properties
let a = new Object();
a.name = 'Ayush';

3. Object Literal แล้วเพิ่มทีหลัง

let a = {};
a.name = 'Ayush';

ทั้งสามวิธีให้ผลลัพธ์เหมือนกันสำหรับอ็อบเจกต์ธรรมดา

ความแตกต่างสำคัญ: Inheritance และ Custom Constructors

ความแตกต่างจะชัดเจนเมื่อเกี่ยวข้องกับ คลาสที่สืบทอด (inherited classes) หรือ Custom Constructors ที่โปรแกรมเมอร์เขียนเอง

// Custom Constructor
function User(name) {
  this.name = name;
  this.createdAt = new Date();
  // อาจมี logic อื่นๆ เช่น validation, logging, etc.
}

const user1 = new User("Somchai"); // เรียก constructor logic
const user2 = { name: "Somchai" }; // แค่สร้างอ็อบเจกต์ธรรมดา

แนวทางปฏิบัติที่แนะนำ (Modern Best Practice)

  • ใช้ Object Literal {} สำหรับอ็อบเจกต์ธรรมดา (Plain Objects) - อ่านง่าย กระชับ ประสิทธิ์ดี
  • ใช้ Class / Constructor Function เมื่อต้องการสร้างอ็อบเจกต์หลายตัวที่มีโครงสร้างและพฤติกรรมเหมือนกัน (shared behavior/prototype)
  • หลีกเลี่ยง new Object() - ไม่มีข้อได้เปรียบ และ verbose กว่า

สรุป

ด้านObject Literal {}new Object()
ความกระชับ✅ ดี❌ ยาว
ประสิทธิภาพ✅ เร็วกว่าเล็กน้อยปกติ
เพิ่ม Property ทันที✅ ได้ในบรรทัดเดียวต้องแยกบรรทัด
Custom Constructor Logic❌ ไม่ได้✅ ได้ (ถ้าเป็น custom class)
แนะนำสำหรับPlain Objects, Config, DTOCustom Classes เท่านั้น