0Pricing
JavaScript Academy · Lektion

Bekannte Symbols

Passen Sie Verhalten mit Symbol.iterator und anderen an.

Bekannte Symbols ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Well-Known Symbols

Well-Known Symbols sind integrierte Symbole, die im Symbol-Objekt gespeichert sind. Sie ermöglichen es Ihnen, das Verhalten von Objekten bei Sprachfunktionen wie Iteration und Umwandlung anzupassen.

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

Symbol.iterator

Symbol.iterator legt fest, wie ein Objekt von einer for-of-Schleife und dem Spread-Operator iteriert wird. Integrierte Arrays und Strings stellen diese Funktion bereits bereit.

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

Ein Objekt iterierbar machen

Fügen Sie eine Symbol.iterator-Methode hinzu, die einen Iterator mit einer next-Methode zurückgibt, damit ein beliebiges Objekt in einer for-of-Schleife verwendet werden kann.

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)
}

Mit Spread iterieren

Da Symbol.iterator auch die Verwendung des Spread-Operators steuert, kann ein benutzerdefiniertes iterierbares Objekt in ein Array aufgefächert werden.

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

Mit Symbol.toPrimitive kann ein Objekt steuern, wie es in numerischen, String- oder Standardkontexten in einen primitiven Wert umgewandelt wird.

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

Das Hint-Argument

Der Handler für die Umwandlung erhält einen Hinweiswert (hint) – number, string oder default – und kann so für jede Situation einen passenden Wert zurückgeben.

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

Symbol.toStringTag

Symbol.toStringTag passt den Text an, den das standardmäßige toString für ein Objekt meldet. Das ist nützlich für eigene Typbezeichnungen.

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

Symbol.hasInstance

Mit Symbol.hasInstance können Sie das Verhalten des instanceof-Operators für eine Klasse oder ein Objekt anpassen.

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

Auch integrierte Typen verwenden sie

Arrays, Maps, Sets und Strings implementieren alle Symbol.iterator. Deshalb funktionieren sie nahtlos mit for-of und dem Spread-Operator.

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

Warum sie wichtig sind

Well-Known Symbols sind Erweiterungspunkte: Sie ermöglichen es Ihren Objekten, sich natürlich in integrierte Sprachoperationen einzufügen, anstatt dafür Sonderbehandlungen zu benötigen.

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

Sie entdecken

Das Symbol-Objekt stellt diese Symbole als statische Eigenschaften bereit. Sie können sie überall dort referenzieren, wo sie benötigt werden, etwa als Symbol.iterator und Symbol.toPrimitive.

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

Kurze Überprüfung

Testen Sie Ihr Wissen über Well-Known Symbols.

Zusammenfassung

Zusammenfassung: Well-Known Symbols passen das Sprachverhalten an.

  • Symbol.iterator steuert for-of und den Spread-Operator
  • Symbol.toPrimitive steuert Umwandlungen mithilfe eines Hinweiswerts
  • Symbol.toStringTag versieht Objekte mit Bezeichnungen
  • Symbol.hasInstance passt instanceof an
const r = { [Symbol.iterator]() { let i = 0; return { next() { return i < 2 ? { value: i++, done: false } : { value: 0, done: true } } } } }
console.log([...r])

Häufig gestellte Fragen

Ist die Lektion „Bekannte Symbols“ kostenlos?

Ja — der vollständige Text von „Bekannte Symbols“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Bekannte Symbols“?

Passen Sie Verhalten mit Symbol.iterator und anderen an. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Bekannte Symbols“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Eindeutige Symbols erstellen
  2. Symbols als Objektschlüssel
  3. Die globale Symbol-Registry
  4. Bekannte Symbols
← Zurück zu JavaScript Academy