Decorator pattern คืออะไร?

Question

Accepted Answer

**Decorator** pattern เพิ่ม**พฤติกรรมหรือความรับผิดชอบ**ให้กับอ็อบเจ็กต์แบบไดนามิกด้วยการห่อหุ้มมัน โดยไม่ต้องแก้ไขคลาสต้นฉบับ มันเป็นทางเลือกที่ยืดหยุ่นแทนการ subclass สำหรับการขยายฟังก์ชันการทำงาน ช่วยให้คุณประกอบพฤติกรรมต่าง ๆ ได้

## Decorator pattern ทำอะไร

```text
DECORATOR → WRAP an object to add behavior, keeping the same interface:
  → the decorator wraps the original, adds its behavior, and delegates to the original
  → you can STACK decorators (wrap a wrapped object) → compose multiple behaviors
  → adds functionality WITHOUT modifying the original class or using subclassing
→ "wrap to extend" — flexible, composable behavior addition
```

## ตัวอย่าง

```js
// base object
let coffee = { cost: () => 5, description: () => 'coffee' };
// decorators wrap and add behavior
function withMilk(c) {
  return { cost: () => c.cost() + 1, description: () => c.description() + ' + milk' };
}
function withSugar(c) {
  return { cost: () => c.cost() + 0.5, description: () => c.description() + ' + sugar' };
}
coffee = withSugar(withMilk(coffee));   // stack decorators
coffee.cost();          // 6.5 — composed behavior
```

## ประโยชน์และการใช้งาน

```text
BENEFITS:
  ✓ Add behavior WITHOUT modifying the original (open/closed) or subclass explosion
  ✓ COMPOSE behaviors flexibly at runtime (stack different decorators in combinations)
  ✓ Single responsibility → each decorator adds one thing
USES → I/O streams (wrapping streams), middleware (wrap request handlers), UI components,
  adding features (logging, caching, validation) around a core object; HOC in React
```

## ทำไมจึงสำคัญ

การเข้าใจ Decorator pattern มีคุณค่า เพราะมันเป็น **structural pattern ที่มีประโยชน์** สำหรับการขยายพฤติกรรมอย่างยืดหยุ่น จึงเป็นความรู้การออกแบบที่เกี่ยวข้องในเชิงปฏิบัติ

Decorator pattern เพิ่มพฤติกรรมให้กับอ็อบเจ็กต์ด้วยการ**ห่อหุ้มมัน** (รักษา interface เดิม delegate ไปยังต้นฉบับขณะที่เพิ่มพฤติกรรม) โดยไม่ต้องแก้ไขคลาสต้นฉบับ ซึ่งเป็นทางเลือกที่ยืดหยุ่นแทนการ subclass

การเข้าใจว่ามันทำอะไร (การห่อหุ้มอ็อบเจ็กต์เพื่อเพิ่มพฤติกรรม โดยมีความสามารถในการ**ซ้อน decorator** เพื่อประกอบพฤติกรรมหลายอย่าง) เป็นความรู้แกนหลัก

การเข้าใจ**ประโยชน์**เป็นสิ่งสำคัญ มันเพิ่มพฤติกรรม**โดยไม่ต้องแก้ไขต้นฉบับ** (ตามหลัก open/closed) และหลีกเลี่ยง**การระเบิดของ subclass** ที่จะเกิดจากการสร้าง subclass สำหรับทุกการผสมผสานของฟีเจอร์ มันช่วยให้คุณ**ประกอบพฤติกรรมได้อย่างยืดหยุ่นขณะ runtime** (ซ้อน decorator ต่าง ๆ ในหลายการผสมผสาน) และสนับสนุน single responsibility (แต่ละ decorator เพิ่มหนึ่งสิ่ง)

ความสามารถในการประกอบนี้ คือการสร้างพฤติกรรมขึ้นด้วยการซ้อน decorator เล็ก ๆ ที่มุ่งเน้น เป็นจุดแข็งหลักของ pattern นี้ ยืดหยุ่นกว่าการ subclass ที่แข็งทื่อมาก

การเข้าใจ**การใช้งาน** ได้แก่ I/O stream (ตัวอย่างคลาสสิกของการห่อหุ้ม stream), middleware (การห่อหุ้ม request handler ที่พบบ่อยใน web framework), UI component, การเพิ่มฟีเจอร์แบบ cross-cutting (logging, caching, validation) รอบ ๆ อ็อบเจ็กต์หลัก และ higher-order component ของ React ทำให้ชัดเจนถึงการนำไปใช้ในโลกจริงได้อย่างกว้างขวาง

Decorator pattern ปรากฏทั่วทั้ง framework และ library จริง

เนื่องจาก Decorator pattern เป็น structural pattern ที่มีประโยชน์สำหรับการขยายพฤติกรรมอย่างยืดหยุ่น (ห่อหุ้มเพื่อเพิ่มพฤติกรรมโดยไม่ต้องแก้ไขต้นฉบับหรือการระเบิดของ subclass ประกอบพฤติกรรมขณะ runtime) และเนื่องจากการเข้าใจว่ามันทำอะไร ประโยชน์ของมัน และการใช้งานทั่วไป (stream, middleware, ฟีเจอร์) เกี่ยวข้องในเชิงปฏิบัติ การเข้าใจ Decorator pattern จึงเป็นความรู้การออกแบบที่มีคุณค่าและนำไปใช้ได้บ่อย เป็น pattern ที่มีประโยชน์สำหรับการขยายพฤติกรรมอย่างยืดหยุ่นและประกอบได้ ปรากฏทั่วทั้ง framework จริง (stream, middleware, HOC) และเป็นความรู้การออกแบบที่สำคัญสำหรับการขยายฟังก์ชันการทำงานอย่างสะอาดโดยไม่ต้องแก้ไขต้นฉบับหรือสร้างลำดับชั้น subclass ที่แข็งทื่อ