Tracks
/
JavaScript
JavaScript
/
Lehrplan
/
Typüberprüfung
Ty

Typüberprüfung in JavaScript

1 Übung

Über Typüberprüfung

Zu wissen, welchen Typ ein Datenelement hat, ist oft sehr wichtig, damit Code reibungslos und ohne Fehler läuft.

JavaScript bietet mehrere Möglichkeiten, den Typ eines Werts oder Objekts zu überprüfen.

Note

Die Mechanismen von JavaScript zur Typprüfung sind mitunter etwas unzuverlässig.

Für bessere Typsicherheit und stärkere Typen solltest du wahrscheinlich TypeScript verwenden, eine Sprache, die auf JavaScript aufbaut, aber die Typsyntax einer statisch typisierten Sprache verwendet.

Der typeof-Operator

Der typeof-Operator gibt den Typ seines Operanden zurück. Die Ausgabe ist ein String, der dem Namen eines der primitiven Datentypen entspricht, außer bei "null". Er kann auch "function" oder "object" sein.

typeof undefined;
// => "undefined"

typeof true;
// => "boolean"

typeof 42;
// => "number"

typeof 'Hello, World!';
// => "string"

typeof function () {
  return 'Hello, World';
};
// => "function"

typeof [1, 2, 3, 4];
// => "object"

typeof { city: 'Stockholm', country: 'Sweden' };
// => "object"

Aus [historischen Gründen][typeof null is "object"].

Der instanceof-Operator

Um den Typ eines Objekts zu überprüfen, kannst du den instanceof-Operator verwenden. Er wird zu einem boolean ausgewertet, je nachdem, ob der zweite Operand in der Prototypkette des ersten Operanden enthalten ist. Genauer gesagt gibt instanceof zurück, ob der erste Operand eine Instanz des zweiten Operanden oder einer seiner Unterklassen ist. instanceof funktioniert nur mit Objekten.

class Beverage {
  // ...
}

// The Coffee class is a child of the Beverage class.
class Coffee extends Beverage {
  // ...
}

const java = new Coffee();

java instanceof Coffee;
// => true

java instanceof Beverage;
// => true
Advanced

Die Klasse Array hat eine Methode namens Array.isArray(), die prüft, ob ihr Argument ein Array ist.

Während instanceof Array bei einem Array, das in einer anderen Umgebung erzeugt wurde, etwa in einem iframe auf einer Webseite, nicht funktioniert, funktioniert Array.isArray().

Das liegt daran, dass die Klasse Array in jeder Umgebung einen anderen Konstruktor hat und jeder iframe seine eigene Umgebung besitzt. Die Funktion in der Prototypkette ist dann eine andere, wodurch instanceof Array fehlschlägt. Array.isArray() kann das ignorieren und sollte, wenn möglich, immer verwendet werden.

Es funktioniert auch trotz falsch positiver Ergebnisse, wenn ein Objekt in Wahrheit kein Array ist und Array nur in seiner Prototypkette hat.

({ __proto__: Array.prototype }) instanceof Array
// => true

Array.isArray({ __proto__: Array.prototype })
// => false

Der in-Operator

Der in-Operator gibt zurück, ob der erste Operand eine Eigenschaft des zweiten Operanden ist. Er prüft nicht, ob die Eigenschaft einen definierten Wert hat. Eine Eigenschaft, die auf undefined gesetzt ist, wird von in trotzdem erkannt.

class Coffee {
  constructor() {
    this.temperature = 'hot';
    this.isDarkMatter = undefined;
  }

  coolDown() {
    this.temperature = 'warm';
  }
}

const espresso = new Coffee();

'temperature' in espresso;
// => true

'color' in espresso;
// => false

'isDarkMatter' in espresso;
// => true
Note

in gibt für geerbte Eigenschaften und Methoden true zurück.

"coolDown" in espresso
// => true

"constructor" in espresso
// => true

Um das zu vermeiden, verwende stattdessen Object.hasOwn().

Die Funktion Object.hasOwn()

Die Methode Object.hasOwn() gibt zurück, ob das angegebene Objekt die angegebene Eigenschaft selbst besitzt (sie also nicht geerbt ist und keine Methode ist).

class Coffee {
  constructor() {
    this.temperature = 'hot';
  }

  coolDown() {
    this.temperature = 'warm';
  }
}
const cappuccino = new Coffee();

Object.hasOwn(cappucino, 'temperature');
// => true

Object.hasOwn(cappucino, 'constructor');
// => false

Object.hasOwn(cappucino, 'coolDown');
// => false
Über GitHub bearbeiten Der Link öffnet sich in einem neuen Fenster oder Tab

Lerne Typüberprüfung