การเขียนทับคุณสมบัติที่สืบทอดมา (Override Derived Properties) ใน JavaScript

ใน JavaScript สามารถ "เขียนทับ" (Override) คุณสมบัติที่สืบทอดมาจาก Prototype ได้โดยการกำหนดค่าใหม่ให้กับ Instance โดยตรง ซึ่งจะสร้าง "Own Property" บน Instance เอง ทำให้ Prototype Property ถูกบัง (Shadowing)

ตัวอย่าง: Override Properties ที่สืบทอดมาจาก Prototype

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Override Derived Properties</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result, .sample { font-size: 18px; font-weight: 500; }
        .sample { color: rebeccapurple; }
        .result { color: red; }
        button { padding: 8px 16px; margin: 10px 0; cursor: pointer; }
    </style>
</head>
<body>
    <h1>เขียนทับคุณสมบัติที่สืบทอดมา (Override Derived Properties)</h1>
    <div class="sample">ก่อนเขียนทับ (Overriding) <br></div>
    <br>
    <div class="result">หลังเขียนทับ (Overriding) <br></div>
    <br>
    <button class="Btn">คลิกเพื่อเขียนทับคุณสมบัติ</button>
    <h3>กดปุ่มด้านบนเพื่อเขียนทับคุณสมบัติข้างต้น</h3>

    <script>
        let sampleEle = document.querySelector(".sample");
        let resEle = document.querySelector(".result");
        let BtnEle = document.querySelector(".Btn");
        
        // Prototype Object
        let objPerson = {
            name: "Rahul",
            age: 12,
            class: 7
        };
        
        // สร้าง Object ใหม่ที่สืบทอดจาก objPerson
        let Person1 = Object.create(objPerson);
        
        // แสดงค่าที่สืบทอดมา (ก่อน Override)
        sampleEle.innerHTML += `Person1.name = ${Person1.name} <br>`;
        sampleEle.innerHTML += `Person1.age = ${Person1.age} <br>`;
        sampleEle.innerHTML += `Person1.class = ${Person1.class} <br>`;
        
        BtnEle.addEventListener("click", () => {
            // Override: สร้าง Own Properties ใหม่บน Person1
            Person1.name = "Shawn";
            Person1.age = 18;
            Person1.class = 12;
            
            resEle.innerHTML += `Person1.name = ${Person1.name} <br>`;
            resEle.innerHTML += `Person1.age = ${Person1.age} <br>`;
            resEle.innerHTML += `Person1.class = ${Person1.class} <br>`;
            
            // ตรวจสอบว่า Prototype ยังคงค่าเดิมอยู่
            resEle.innerHTML += `<br>🔍 objPerson.name (Prototype) = ${objPerson.name}`;
        });
    </script>
</body>
</html>

ผลลัพธ์

ก่อนกดปุ่ม (สืบทอดมาจาก Prototype):
Person1.name = Rahul
Person1.age = 12
Person1.class = 7

หลังกดปุ่ม (Override แล้ว):
Person1.name = Shawn ✅ (Own Property)
Person1.age = 18 ✅ (Own Property)
Person1.class = 12 ✅ (Own Property)
objPerson.name (Prototype) = Rahul 🔄 (ไม่เปลี่ยน)

กลไกการทำงาน (Property Lookup)

Person1.name
    │
    ├─ 1. หา Own Property "name" บน Person1 → พบ "Shawn" ✅ (Override)
    │
    └─ 2. ถ้าไม่พบ → เดินขึ้น Prototype Chain หา objPerson.name → "Rahul"

เมธอดตรวจสอบ Property

let Person1 = Object.create(objPerson);
Person1.name = "Shawn"; // Override

console.log(Person1.hasOwnProperty("name"));     // true (Own Property)
console.log("name" in Person1);                  // true (รวม Prototype)
console.log(objPerson.hasOwnProperty("name"));   // true (Prototype Property)
console.log(Person1.__proto__ === objPerson);    // true

การลบ Override (คืนค่า Prototype)

delete Person1.name; // ลบ Own Property
console.log(Person1.name); // "Rahul" - กลับมาใช้ค่า Prototype อีกครั้ง

แนวคิด Shadowing vs Overriding

• Shadowing (การบัง) - สร้าง Property ใหม่บน Instance บัง Property เดิมบน Prototype
• Overriding (การเขียนทับ) - คำเรียกทั่วไปสำหรับ Shadowing ในบริบท OOP
• Prototype Property ไม่ถูกลบหรือเปลี่ยนแปลง - เพียงถูกบังเท่านั้น