Sogar ein Anfänger kann den Unterschied zwischen typeof und instanceof in js verstehen

1. Art von

Der Operator typeof gibt einen String zurück, der den Typ seines nicht ausgewerteten Operanden angibt. Er wird wie folgt verwendet:

Typ des Operanden
Typ von (Operand)

Operand ist ein Ausdruck, der ein Objekt oder einen primitiven Wert darstellt, dessen Typ zurückgegeben wird. Zum Beispiel

Typ von 1 // 'Zahl'
Typ von '1' // 'Zeichenfolge'
Typ von undefiniert // 'undefiniert'
Typ von true // 'Boolesch'
Typ von Symbol () // 'Symbol'
Typ von null // 'Objekt'
Typ von [] // 'Objekt'
Typ von {} // 'Objekt'
Typ der Konsole // 'Objekt'
Typ von console.log // 'Funktion'

Die ersten 6 im obigen Beispiel sind grundlegende Datentypen. Obwohl typeof null ein Objekt ist, handelt es sich dabei lediglich um einen seit langem bestehenden Fehler in JavaScript. Dies bedeutet nicht, dass null ein Referenzdatentyp ist, und null selbst ist kein Objekt.

Daher ist das von null nach typeof zurückgegebene Ergebnis problematisch und kann nicht als Methode zur Bestimmung von null verwendet werden. Wenn Sie in einer if-Anweisung prüfen müssen, ob es null ist, verwenden Sie zur Prüfung einfach ===null.

Gleichzeitig können Sie die Referenztypdaten finden. Wenn Sie typeof zur Beurteilung verwenden, wird mit Ausnahme der Funktion der Rest ein Objekt ausgeben
Wenn wir feststellen möchten, ob eine Variable existiert, können wir typeof verwenden: (if(a) kann nicht verwendet werden, da es zu einem Fehler führt, wenn a nicht deklariert ist)

wenn(Typ von a != 'undefiniert'){
    //Variable existiert}

2. Instanz von

Der Operator instanceof wird verwendet, um zu erkennen, ob die prototype-Eigenschaft einer Konstruktorfunktion in der Prototypenkette eines Instanzobjekts vorkommt. Er wird wie folgt verwendet:

Objektinstanz des Konstruktors

Objekt ist das Instanzobjekt, Konstruktor ist die Konstruktorfunktion. Die Konstruktorfunktion kann ein Objekt über new instanziieren und instanceof kann bestimmen, ob dieses Objekt das vom vorherigen Konstruktor generierte Objekt ist.

//Definieren Sie die Konstruktionsfunktion let Car = function() {}
sei benz = neues Auto()
benz instanceof Auto // true
let Auto = neuer String('xxx')
Autoinstanz von String // true
lass str = 'xxx'
str-Instanz von String // false

Informationen zum Implementierungsprinzip von instanceof finden Sie unter:

Funktion meineInstanzvon(links, rechts) {
    // Hier verwenden wir typeof, um den grundlegenden Datentyp zu bestimmen. Wenn dies der Fall ist, geben wir direkt false zurück.
    wenn (Typ von links !== 'Objekt' || links === null) false zurückgibt;
    // getProtypeOf ist die API des Object-Objekts, mit der das Prototypobjekt des Parameters let proto = Object.getPrototypeOf(left); abgerufen werden kann.
    während(wahr) {                  
        wenn (proto === null) false zurückgibt;
        if(proto === right.prototype) return true; //Suche dasselbe Prototypobjekt und gib true zurück
        proto = Objekt.getPrototypeof(proto);
    }
}

Das heißt, folgen Sie der Prototypenkette, bis das gleiche Prototypenobjekt gefunden wird, und geben Sie „true“ zurück, andernfalls „false“.

3. Unterschied

Sowohl typeof als auch instanceof sind Methoden zur Bestimmung von Datentypen. Die Unterschiede sind folgende:

• typeof gibt den Basistyp einer Variablen zurück, instanceof gibt einen Booleschen Wert zurück
• instanceof kann komplexe Referenzdatentypen genau bestimmen, grundlegende Datentypen jedoch nicht korrekt bestimmen
• Allerdings hat typeof auch seine Nachteile. Es kann zwar den grundlegenden Datentyp (außer null) bestimmen, kann aber den Referenzdatentyp außer dem Funktionstyp nicht bestimmen.

1. Für Objekte, Arrays und Null ist der zurückgegebene Wert das Objekt. Beispielsweise sind die von typeof(window), typeof(document) und typeof(null) zurückgegebenen Werte alle Objekte.
2. Bei Funktionstypen ist der zurückgegebene Wert die Funktion. Beispiel: Die von typeof(eval) und typeof(Date) zurückgegebenen Werte sind beides Funktionen.

Es ist ersichtlich, dass die beiden oben genannten Methoden Nachteile haben und nicht die Anforderungen aller Szenarien erfüllen können.

Wenn Sie Datentypen im Allgemeinen erkennen müssen, können Sie Object.prototype.toString verwenden und diese Methode aufrufen, um eine Zeichenfolge im Format „[Objekt Xxx]“ wie folgt zurückzugeben

Object.prototype.toString({}) // "[Objekt Objekt]"
Object.prototype.toString.call({}) // Gleiches Ergebnis wie oben, außerdem ist Aufruf auch OK
Object.prototype.toString.call(1) // "[Objektnummer]"
Object.prototype.toString.call('1') // "[Objekt String]"
Object.prototype.toString.call(true) // "[Objekt Boolean]"
Object.prototype.toString.call(function(){}) // "[Objektfunktion]"
Object.prototype.toString.call(null) //"[Objekt Null]"
Object.prototype.toString.call(undefined) //"[Objekt undefiniert]"
Object.prototype.toString.call(/123/g) //"[Objekt RegExp]"
Object.prototype.toString.call(neues Datum()) //"[Objekt Datum]"
Object.prototype.toString.call([]) //"[Objekt-Array]"
Object.prototype.toString.call(Dokument) //"[Objekt HTMLDocument]"
Object.prototype.toString.call(Fenster) //"[Objekt Fenster]"

Nachdem wir nun die grundlegende Verwendung von toString kennen, implementieren wir eine Methode zur Beurteilung globaler Datentypen.

Funktion getType(Objekt){
  let Typ = Typ des Objekts;
  if (Typ !== "Objekt") { // Zuerst die typeof-Beurteilung durchführen. Wenn es sich um einen grundlegenden Datentyp handelt, den Rückgabetyp direkt zurückgeben;
  }
  // Für typeof ist das Ergebnis object. Treffen Sie dann die folgende Entscheidung. Das reguläre Ergebnis ist return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}

So verwenden Sie es

getType([]) // "Array" typeof [] ist ein Objekt, daher gibt toString getType('123') zurück // "string" typeof gibt direkt getType(window) zurück // "Window" toString gibt getType(null) zurück // Der erste Buchstabe von "Null" wird groß geschrieben, typeof null ist ein Objekt, daher wird toString zur Bestimmung benötigt getType(undefined) // "undefined" typeof gibt direkt getType() zurück // "undefined" typeof gibt direkt getType(function(){}) zurück // "function" typeof kann bestimmen, daher ist der erste Buchstabe klein geschrieben getType(/123/g) //"RegExp" toString gibt

Dies ist das Ende dieses Artikels darüber, wie selbst Anfänger den Unterschied zwischen typeof und instanceof in js verstehen können. Weitere Informationen zu typeof und instanceof in js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!