การป้องกันการแก้ไข Object ใน JavaScript: preventExtensions, seal, freeze

3 ระดับการป้องกัน Object (ES5)

1. Prevent Extensions - ป้องกันเพิ่ม Property ใหม่

<script>
  var obj = {prop1: 1};
  Object.preventExtensions(obj);
  
  delete obj.prop1;        // OK - ลบได้
  obj.prop1 = 2;           // OK - แก้ได้
  obj.newProp = 3;         // Fail (Strict: TypeError)
  
  Object.defineProperty(obj, 'prop2', {value: 2}); // TypeError
</script>

2. Seal - ป้องกันเพิ่ม/ลบ Property (แต่แก้ค่าได้)

<script>
  var obj = {prop1: 1};
  Object.seal(obj);
  
  obj.prop1 = 2;           // OK - แก้ค่าได้
  delete obj.prop1;        // Fail (Strict: TypeError)
  obj.newProp = 3;         // Fail
  
  Object.defineProperty(obj, 'prop2', {value: 2}); // TypeError
</script>

3. Freeze - Immutable สุดขั้ว (ป้องกันทุกอย่าง)

<script>
  var obj = {prop1: 1};
  Object.freeze(obj);
  
  obj.prop1 = 2;           // Fail (Strict: TypeError)
  delete obj.prop1;        // Fail
  obj.newProp = 3;         // Fail
  
  Object.defineProperty(obj, 'prop2', {value: 2}); // TypeError
</script>

ผลลัพธ์ตัวอย่าง Freeze

TypeError: Cannot define property prop2, object is not extensible
1 // ค่าเดิมคงอยู่

ตารางเปรียบเทียบ

Shallow Only!

ทั้ง 3 ตัวทำงาน Shallow Nested Object ยังแก้ได้ ต้อง Deep Freeze เอง

const obj = {nested: {a: 1}};
Object.freeze(obj);
obj.nested.a = 2; // Works! Nested not frozen

การตรวจสอบ

Object.isExtensible(obj); // false if prevented
Object.isSealed(obj);     // true if sealed
Object.isFrozen(obj);     // true if frozen