JavaScript Academy · บทเรียน

Object.freeze และ seal

ป้องกันการเปลี่ยนแปลงออบเจ็กต์

Object.freeze และ seal เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงตรึงออบเจ็กต์

ความไม่เปลี่ยนแปลง หมายถึงข้อมูลไม่สามารถเปลี่ยนแปลงได้หลังจากสร้างขึ้น วิธีนี้ป้องกันการเปลี่ยนแปลงโดยไม่ตั้งใจ ทำให้ทำความเข้าใจโค้ดได้ง่ายขึ้น และหลีกเลี่ยงข้อผิดพลาดทั้งกลุ่ม

JavaScript มี Object.freeze และ Object.seal สำหรับจำกัดการแก้ไขออบเจ็กต์

พื้นฐาน Object.freeze

Object.freeze ทำให้ออบเจ็กต์อ่านได้อย่างเดียวโดยสมบูรณ์ คุณไม่สามารถเพิ่ม ลบ หรือเปลี่ยนพร็อพเพอร์ตีได้ เมธอดนี้ส่งคืนออบเจ็กต์เดิมที่ตอนนี้ถูก freeze แล้ว

const user = Object.freeze({ name: 'Ada', age: 36 });
user.age = 99;
console.log(user.age);

ตรวจสอบด้วย isFrozen

Object.isFrozen บอกว่าออบเจ็กต์ถูก freeze อยู่หรือไม่ ซึ่งมีประโยชน์ก่อนพยายามอัปเดต

const config = Object.freeze({ debug: false });
const settings = { theme: 'dark' };

console.log(Object.isFrozen(config));
console.log(Object.isFrozen(settings));

ความล้มเหลวแบบเงียบเทียบกับแบบเข้มงวด

ในโค้ดที่ไม่ใช้โหมดเข้มงวด การเขียนลงในออบเจ็กต์ที่ถูก freeze จะล้มเหลว โดยไม่แจ้ง แต่ในโหมดเข้มงวด การเขียนจะทำให้เกิด TypeError ไม่ว่าจะกรณีใด ค่าจะไม่เปลี่ยนแปลง

'use strict';
const frozen = Object.freeze({ x: 1 });
try {
  frozen.x = 2;
} catch (e) {
  console.log(e.name);
}
console.log(frozen.x);

Freeze ป้องกันพร็อพเพอร์ตีใหม่

การ freeze ยังป้องกัน การเพิ่มพร็อพเพอร์ตีด้วย ดังนั้น key ใหม่จะไม่ปรากฏขึ้น

const point = Object.freeze({ x: 0 });
point.y = 5;
console.log(point.y);
console.log(Object.keys(point));

Freeze ป้องกันการลบ

คุณไม่สามารถลบพร็อพเพอร์ตีจากออบเจ็กต์ที่ถูก freeze ได้เช่นกัน พร็อพเพอร์ตีนั้นจะยังคงอยู่

const obj = Object.freeze({ keep: 'me' });
delete obj.keep;
console.log(obj.keep);

Object.seal แตกต่างออกไป

Object.seal เข้มงวดน้อยกว่า freeze คุณ ไม่สามารถเพิ่มหรือลบพร็อพเพอร์ตีได้ แต่ยัง สามารถเปลี่ยนค่าที่มีอยู่ได้

const sealed = Object.seal({ count: 1 });
sealed.count = 2;
sealed.extra = 3;

console.log(sealed.count);
console.log(sealed.extra);

ตรวจสอบด้วย isSealed

Object.isSealed รายงานว่าออบเจ็กต์ถูก seal อยู่หรือไม่ โปรดทราบว่าออบเจ็กต์ที่ถูก freeze ทุกตัวจะถูก seal ด้วย แต่ในทางกลับกันไม่เป็นจริงเสมอไป

const sealed = Object.seal({ a: 1 });
const frozen = Object.freeze({ b: 2 });

console.log(Object.isSealed(sealed));
console.log(Object.isSealed(frozen));
console.log(Object.isFrozen(sealed));

สรุป freeze เทียบกับ seal

freeze: ห้ามเพิ่ม ห้ามลบ ห้ามเปลี่ยน seal: ห้ามเพิ่ม ห้ามลบ แต่เปลี่ยนได้ ควรเลือก seal เมื่อโครงสร้างตายตัว แต่ค่ายังเปลี่ยนแปลงได้

const f = Object.freeze({ v: 1 });
const s = Object.seal({ v: 1 });

f.v = 100;
s.v = 100;

console.log('frozen v:', f.v);
console.log('sealed v:', s.v);

preventExtensions

การจำกัดที่หลวมที่สุดคือ Object.preventExtensions ซึ่งไม่อนุญาตให้เพิ่มพร็อพเพอร์ตี แต่ยังสามารถเปลี่ยนและลบพร็อพเพอร์ตีเดิมได้ จึงเป็นการจำกัดที่อ่อนที่สุดในสามแบบ

const obj = Object.preventExtensions({ a: 1 });
obj.a = 2;
obj.b = 3;

console.log(obj.a);
console.log(obj.b);
console.log(Object.isExtensible(obj));

เหตุใดจึงสำคัญ

การ freeze การตั้งค่าและค่าคงที่ช่วยป้องกันการแก้ไขโดยไม่ตั้งใจทั่วทั้งฐานโค้ด แต่โปรดจำไว้ว่า Object.freeze เป็นการ freeze แบบ ตื้น ดังนั้นออบเจ็กต์ที่ซ้อนอยู่ยังเปลี่ยนแปลงได้ บทถัดไปจะแก้ปัญหานี้

const SETTINGS = Object.freeze({ maxRetries: 3 });
function tryUpdate() {
  SETTINGS.maxRetries = 10;
}
tryUpdate();
console.log(SETTINGS.maxRetries);

ตรวจสอบความเข้าใจอย่างรวดเร็ว

Object.freeze กับ Object.seal แตกต่างกันอย่างไร

ทบทวน: freeze และ seal

คุณได้เรียนรู้วิธีจำกัดออบเจ็กต์แล้ว

Object.freeze: ห้ามเพิ่ม ลบ หรือเปลี่ยน ตรวจสอบด้วย isFrozen
Object.seal: ห้ามเพิ่มหรือลบ แต่เปลี่ยนได้
preventExtensions: ป้องกันเฉพาะการเพิ่ม
ทั้งสามแบบเป็นการจำกัดแบบ ตื้น ซึ่งนำไปสู่เรื่องการ freeze แบบลึกในบทถัดไป

คำถามที่พบบ่อย

บทเรียน “Object.freeze และ seal” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Object.freeze และ seal” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Object.freeze และ seal”

ป้องกันการเปลี่ยนแปลงออบเจ็กต์ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “Object.freeze และ seal” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy