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

Symbol ที่รู้จักกันดี

ปรับแต่งพฤติกรรมด้วย Symbol.iterator และ Symbol อื่น ๆ

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

สัญลักษณ์ที่เป็นที่รู้จัก

สัญลักษณ์ที่เป็นที่รู้จัก คือสัญลักษณ์ที่มีมาให้ในตัวและจัดเก็บอยู่บนออบเจ็กต์สัญลักษณ์ สัญลักษณ์เหล่านี้ช่วยปรับแต่งพฤติกรรมของออบเจ็กต์เมื่อใช้ความสามารถของภาษา เช่น การวนซ้ำและการแปลงค่า

console.log(typeof Symbol.iterator)
console.log(typeof Symbol.toPrimitive)

Symbol.iterator

Symbol.iterator กำหนดวิธีวนซ้ำออบเจ็กต์ด้วยลูปวนตามค่าและตัวดำเนินการกระจาย อาร์เรย์และข้อความที่มีมาให้ในตัวมีความสามารถนี้อยู่แล้ว

const arr = [10, 20]
const it = arr[Symbol.iterator]()
console.log(it.next().value)

การทำให้ออบเจ็กต์วนซ้ำได้

คุณสามารถเพิ่มเมธอด Symbol.iterator ที่ส่งคืนตัววนซ้ำซึ่งมีเมธอด next เพื่อทำให้ออบเจ็กต์ใด ๆ ใช้กับลูปวนตามค่าได้

const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let cur = this.from
    const last = this.to
    return {
      next() {
        return cur <= last ? { value: cur++, done: false } : { value: undefined, done: true }
      }
    }
  }
}
for (const n of range) {
  console.log(n)
}

การวนซ้ำด้วยการกระจาย

เนื่องจาก Symbol.iterator ควบคุมการกระจายด้วย ออบเจ็กต์ที่วนซ้ำได้แบบกำหนดเองจึงสามารถขยายเป็นอาร์เรย์ได้

const nums = {
  [Symbol.iterator]() {
    let i = 0
    return { next() { return i < 3 ? { value: i++, done: false } : { value: undefined, done: true } } }
  }
}
console.log([...nums])

Symbol.toPrimitive

Symbol.toPrimitive ช่วยให้ออบเจ็กต์ควบคุมวิธีแปลงตัวเองเป็นค่าพื้นฐานในบริบทตัวเลข ข้อความ หรือค่าเริ่มต้น

const money = {
  amount: 50,
  [Symbol.toPrimitive](hint) {
    if (hint === "number") return this.amount
    return "$" + this.amount
  }
}
console.log(+money)
console.log(money + "")

อาร์กิวเมนต์คำใบ้

ตัวจัดการการแปลงจะได้รับคำใบ้ว่าเป็นตัวเลข ข้อความ หรือค่าเริ่มต้น ทำให้สามารถส่งคืนค่าที่เหมาะสมกับแต่ละสถานการณ์

const obj = {
  [Symbol.toPrimitive](hint) {
    return hint
  }
}
console.log(+obj)
console.log(obj + "")
console.log(String(obj))

Symbol.toStringTag

Symbol.toStringTag ปรับแต่งข้อความที่ toString ตามค่าเริ่มต้นรายงานสำหรับออบเจ็กต์ ซึ่งมีประโยชน์สำหรับกำหนดป้ายกำกับชนิดข้อมูลเอง

const widget = {
  [Symbol.toStringTag]: "Widget"
}
console.log(Object.prototype.toString.call(widget))

Symbol.hasInstance

Symbol.hasInstance ช่วยให้คลาสหรือออบเจ็กต์ปรับแต่งพฤติกรรมของตัวดำเนินการตรวจสอบอินสแตนซ์ได้

class Even {
  static [Symbol.hasInstance](num) {
    return num % 2 === 0
  }
}
console.log(4 instanceof Even)
console.log(3 instanceof Even)

สิ่งที่มีมาให้ในตัวก็ใช้เช่นกัน

อาร์เรย์ แผนที่ เซต และข้อความต่างก็ใช้ Symbol.iterator จึงทำงานร่วมกับลูปวนตามค่าและการกระจายได้อย่างราบรื่น

const set = new Set([1, 2, 3])
console.log([...set])

เหตุผลที่สัญลักษณ์เหล่านี้สำคัญ

สัญลักษณ์ที่เป็นที่รู้จักคือจุดขยายความสามารถ ช่วยให้ออบเจ็กต์ของคุณทำงานร่วมกับการดำเนินการพื้นฐานของภาษาได้อย่างเป็นธรรมชาติ แทนที่จะต้องเขียนกรณีพิเศษแยกต่างหาก

const list = {
  items: ["a", "b"],
  [Symbol.iterator]() {
    return this.items[Symbol.iterator]()
  }
}
for (const x of list) {
  console.log(x)
}

การค้นหาสัญลักษณ์เหล่านี้

ออบเจ็กต์สัญลักษณ์เปิดเผยสัญลักษณ์เหล่านี้ในรูปแบบคุณสมบัติแบบสถิต คุณสามารถอ้างอิงได้ เช่น Symbol.iterator และ Symbol.toPrimitive เมื่อจำเป็น

console.log(typeof Symbol.iterator)
console.log(typeof Symbol.toStringTag)
console.log(typeof Symbol.hasInstance)

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับสัญลักษณ์ที่เป็นที่รู้จัก

สรุปทบทวน

สรุปทบทวน: สัญลักษณ์ที่เป็นที่รู้จักช่วยปรับแต่งพฤติกรรมของภาษา

  • Symbol.iterator ควบคุมลูปวนตามค่าและการกระจาย
  • Symbol.toPrimitive ควบคุมการแปลงค่าผ่านคำใบ้
  • Symbol.toStringTag ใช้กำหนดป้ายกำกับให้ออบเจ็กต์
  • Symbol.hasInstance ใช้ปรับแต่งการตรวจสอบอินสแตนซ์
const r = { [Symbol.iterator]() { let i = 0; return { next() { return i < 2 ? { value: i++, done: false } : { value: 0, done: true } } } } }
console.log([...r])

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

บทเรียน “Symbol ที่รู้จักกันดี” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Symbol ที่รู้จักกันดี”

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

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

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

บทเรียน “Symbol ที่รู้จักกันดี” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การสร้าง Symbol ที่ไม่ซ้ำกัน
  2. การใช้ Symbol เป็นคีย์ของออบเจ็กต์
  3. รีจิสทรี Symbol ส่วนกลาง
  4. Symbol ที่รู้จักกันดี
← กลับไปที่ JavaScript Academy