0Pricing
JavaScript Academy · บทเรียน

พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง

พื้นฐานสายโซ่ต้นแบบ ตรวจสอบพร็อพเพอร์ตีของออบเจ็กต์เองเทียบกับที่สืบทอดมา ใช้ Object.create และกำหนดตัวบอกคุณสมบัติอย่างง่าย

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

รู้จักโพรโทไทป์

เป้าหมาย: ดูว่าวัตถุสืบทอดคุณสมบัติผ่านสายโพรโทไทป์อย่างไร และดูว่าอะไรเป็นคีย์ของวัตถุเองหรือสืบทอดมา

  • สายโพรโทไทป์
  • hasOwn เทียบกับ in
  • Object.create
  • ตัวบอกคุณสมบัติพื้นฐาน
พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง — ภาพประกอบ 1

การค้นหาในโพรโทไทป์

หากไม่พบคีย์ในวัตถุ JavaScript จะค้นหาต่อในโพรโทไทป์ของวัตถุนั้น เช่น Object.prototype

// A simple object
const user = { name: "Ayla" };

// The prototype is another object used for fallback lookups
const proto = Object.getPrototypeOf(user);

console.log("name:", user.name);
console.log("has toString?", typeof user.toString === "function");
console.log("proto same as Object.prototype?", proto === Object.prototype);
พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง — ภาพประกอบ 2

คีย์ของวัตถุเองกับคีย์ที่สืบทอดมา

Object.hasOwn(วัตถุ, คีย์) จะคืนค่า true เฉพาะคีย์ของวัตถุเอง ส่วน "คีย์" in วัตถุ จะรวมคีย์ที่สืบทอดมาด้วย

// Own vs inherited checks
const point = { x: 1 };

// "in" sees own or inherited
console.log("x in point:", "x" in point);
console.log("toString in point:", "toString" in point);

// Only own keys
console.log("hasOwn x:", Object.hasOwn(point, "x"));
console.log("hasOwn toString:", Object.hasOwn(point, "toString"));
พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง — ภาพประกอบ 3

พื้นฐานของ Object.create

Object.create(proto) จะสร้างวัตถุที่สืบทอดมาจาก proto

// Use Object.create to set a prototype
const animal = { kind: "animal" };

// pet inherits from animal
const pet = Object.create(animal);
pet.name = "Milo";

console.log("pet name:", pet.name);
console.log("pet kind (inherited):", pet.kind);
console.log("hasOwn kind?", Object.hasOwn(pet, "kind"));
พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง — ภาพประกอบ 4

ตัวบอกคุณสมบัติ (เบื้องต้น)

Object.defineProperty สามารถกำหนดแฟล็ก เช่น เขียนได้ และ แจกแจงได้ ให้กับคีย์ได้

// Define simple descriptors
const prefs = {};
Object.defineProperty(prefs, "theme", {
  value: "dark",
  writable: false,
  enumerable: true
});

// Try to change (silently fails in non-strict)
prefs.theme = "light";

console.log("theme:", prefs.theme);

// List keys: theme is enumerable
console.log("keys:", Object.keys(prefs));
พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง — ภาพประกอบ 5

เคล็ดลับและรายการตรวจสอบ

เคล็ดลับ:

  • ใช้ Object.hasOwn(obj, key) เพื่อตรวจสอบคีย์ของวัตถุเอง
  • เลือกใช้ Object.create(proto) เพื่อสร้างโพรโทไทป์ขนาดเล็ก
  • ในช่วงแรกควรใช้ตัวบอกคุณสมบัติเท่าที่จำเป็น ค่าเริ่มต้นก็เพียงพอ
พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง — ภาพประกอบ 6

แบบทดสอบคีย์ของวัตถุเองกับคีย์ที่สืบทอดมา

ตรวจสอบอย่างรวดเร็ว: การทดสอบคุณสมบัติของวัตถุเอง

พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง — ภาพประกอบ 7

ทบทวน

ทบทวน: เครื่องยนต์จะค้นหาคีย์ที่หายไปในโพรโทไทป์ ใช้ hasOwn สำหรับคีย์ของวัตถุเองเท่านั้น ใช้ Object.create เพื่อกำหนดโพรโทไทป์ และใช้ตัวบอกคุณสมบัติเพื่อควบคุมแฟล็กพื้นฐาน

พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง — ภาพประกอบ 8

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

บทเรียน “พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง”

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

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

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

บทเรียน “พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง” ใช้เวลานานแค่ไหน

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

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

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

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

  1. พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง
  2. ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends
← กลับไปที่ JavaScript Academy