การตั้งค่า Object Members ใน JavaScript

ตัวอย่างโค้ด

ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่า object members แบบ dynamic:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; color: blueviolet; }
  </style> 
</head> 
<body> 
  <h1>Setting object members</h1> 
  <div class="result"></div> 
  <button class="Btn">CLICK HERE</button> 
  <h3>คลิกที่ปุ่มด้านบนเพื่อตั้งค่า student object members และแสดงผล</h3> 
  <script> 
    let resEle = document.querySelector(".result"); 
    let BtnEle = document.querySelector(".Btn"); 
    let student = {}; 
    BtnEle.addEventListener("click", () => { 
      student.name = "Rohan"; 
      student.age = 22; 
      student.displayInfo = function () { 
        resEle.innerHTML = "Name = " + this.name + " : Age = " + this.age; 
      }; 
      student.displayInfo(); 
    }); 
  </script> 
</body> 
</html>

ผลลัพธ์

เมื่อคลิกปุ่ม 'CLICK HERE':

คำอธิบาย

ใน JavaScript สามารถเพิ่ม properties และ methods ให้ object ได้ทุกเมื่อ แบบ dynamic โดยใช้ dot notation (student.name) หรือ bracket notation (student['name']) ตัวอย่างนี้สร้าง object ว่าง แล้วเพิ่ม properties และ method เมื่อคลิกปุ่ม