Typprüfung in JavaScript: Der Unterschied zwischen Typeof- und Instanzof-Operatoren

Sowohl Typeof- als auch Instanzof-Operatoren können in JavaScript eine Typprüfung durchführen. Was sind also die Unterschiede zwischen ihnen? In diesem Artikel wird Ihnen der Unterschied zwischen den Operatoren „typeof“ und „instanceof“ vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Verwandte Empfehlungen: „Javascript-Video-Tutorial“

Smarties müssen wissen, dass JS eine schwach typisierte Sprache ist und keine Einschränkungen hinsichtlich der Variablentypen hat.

Wenn wir beispielsweise eine Variable mit dem String-Typ erstellen, können wir später derselben Variablen eine Zahl zuweisen:

let message = 'Hello'; // 分配一个字符串

message = 14; // 分配一个数字

Diese Dynamik gibt uns Flexibilität und vereinfacht die Variablendeklaration.

Auf der anderen Seite können wir nie sicher sein, dass eine Variable einen bestimmten Werttyp enthält. Beispielsweise erfordert die folgende Funktion greet(who) einen String-Parameter, wir können die Funktion jedoch mit jedem Parametertyp aufrufen: greet(who)需要一个字符串参数，但是，我们可以使用任何类型的参数来调用该函数：

function greet(who) {
  return `Hello, ${who}!`
}

greet('World'); // => 'Hello, World!'
// You can use any type as argument
greet(true);    // => 'Hello, true!'
greet([1]);     // => 'Hello, 1!'

有时我们需要在 JS 中检查变量的类型，要怎么做？

使用typeof运算符以及instanceof来检查实例类型。

1.<span style="font-size: 18px;">typeof</span>运算符

在 JS 中，基本类型有 String、Number、Boolean和 Symbol 等。此外，还有函数、对象和特殊值undefined和null。

typeof是用于确定 expression 类型的运算符：

const typeAsString = typeof expression;

expression 的计算结果是我们要查找的类型的值。 expression 可以是变量myVariable，属性访问器myObject.myProp，函数调用myFunction()或数字 14。

typeof expression，取决于expression的值，结果可能为:'string'， 'number'， 'boolean'， 'symbol'， 'undefined'， 'object'， 'function'。

我们来看看typeof运算符每种类型的情况：

A) String:

const message = 'hello!';
typeof message; // => 'string'

B) Number:

const number = 5;
typeof number; // => 'number'

typeof NaN;    // => 'number'

C) Boolean:

const ok = true;
typeof ok; // => 'boolean'

D) Symbol:

const symbol = Symbol('key');
typeof symbol; // => 'symbol'

E) undefined:

const nothing = undefined;
typeof nothing; // => 'undefined'

F) Objects:

const object = { name: 'Batman' };
typeof object; // => 'object'

const array = [1, 4, 5];
typeof array; // => 'object'

const regExp = /Hi/;
typeof regExp; // => 'object'

G) Functions:

function greet(who) {
  return `Hello, ${who}!`
}

typeof greet; // => 'function'

1.1 typeof null

如上我们看到的，用 typeof 判断对象结果是 'object'。

但是，typeof null也会计算为'object'！

const missingObject = null;
typeof missingObject; // => 'object'

typeof null为'object'是 JS 初始实现中的一个错误。

因此，在使用typeof检测对象时，需要另外检查null：

function isObject(object) {
  return typeof object === 'object' && object !== null;
}

isObject({ name: 'Batman' }); // => true
isObject(15);                 // => false
isObject(null);               // => false

1.2 typeof 和未定义的变量

虽然typeof expression通常决定于expression的类型，但也可以使用typeof来确定是否定义了变量。

// notDefinedVar is not defined
notDefinedVar; // throws ReferenceError

typeof有一个不错的属性，当typeof评估未定义变量的类型时，不会引发 ReferenceError 错误：

// notDefinedVar is not defined
typeof notDefinedVar; // => 'undefined'

变量notDefinedVar没有在当前作用域内定义。然而，typeof  notDefinedVar不会抛出引用错误，而是将结果计算为 'undefined'。

我们可以使用typeof来检测是否未定义变量，如果typeof myVar === 'undefined' 为 true， 则 myVar 未定义。

2. instanceof 运算符

使用 JS 函数的通常方法是通过在其名称后添加一对括号来调用它：

function greet(who) {
  return `Hello, ${who}!`;
}

greet('World'); // => 'Hello, World!'

greet('World')是常规函数调用。

JS 函数可以做更多的事情：它们甚至可以构造对象！ 要使函数构造对象，只需在常规函数调用之前使用new关键字：

function Greeter(who) {
  this.message = `Hello, ${who}!`;
}

const worldGreeter = new Greeter('World');
worldGreeter.message; // => 'Hello, World!'

new Greeter('World')是创建实例worldGreeter的构造函数调用。

如何检查 JS 是否使用特定构造函数创建了特定实例？ 使用 instanceof 运算符：

const bool = object instanceof Constructor;

其中object是对对象求值的表达式，而Constructor是构造对象的类或函数，instanceof计算为布尔值。

worldGreeter实例是使用Greeter构造函数创建的，因此worldGreeter instanceof Greeter计算结果为true。

从ES6 开始，可以使用 class 来定义对象。例如，定义一个类Pet，然后创建它的一个实例myPet

class Pet {
  constructor(name) {
    this.name = name;
  }
}

const myPet = new Pet('Lily');

Manchmal müssen wir den Typ einer Variablen in JS überprüfen , bis Wie geht das? 🎜🎜Verwenden Sie den Operator typeof und instanceof, um den Instanztyp zu überprüfen. 🎜🎜1.<span style="font-size: 18px;">typeof</span>Operator🎜🎜In JS sind die Grundtypen String, Number, Boolean und Symbol usw. Darüber hinaus gibt es Funktionen, Objekte und die Sonderwerte undefiniert und null. 🎜🎜typeof ist der Operator, der verwendet wird, um den Typ von expression zu bestimmen: 🎜

myPet instanceof Pet; // => true

🎜expression ergibt einen Wert des gesuchten Typs . expression kann eine Variable myVariable, ein Eigenschaftsaccessor myObject.myProp, ein Funktionsaufruf myFunction() oder ein sein Zahl >14. 🎜🎜typeof expression, abhängig vom Wert von expression kann das Ergebnis sein: 'string', 'number' code> , <code>'boolean', 'symbol', 'undefiniert', 'object', 'Funktion '. 🎜🎜Werfen wir einen Blick auf jeden Typ des typeof-Operators: 🎜🎜A) String:🎜

const plainPet = { name: 'Zoe' };
plainPet instanceof Pet; // => false

🎜B) Zahl:🎜

function isRegExp(value) {
  return value instanceof RegExp;
}
isRegExp(/Hello/); // => true
isRegExp('Hello'); // => false

function isArray(value) {
  return value instanceof Array;
}
isArray([1, 2, 3]); // => true
isArray({ prop: 'Val' }); // => false

🎜C) Boolescher Wert:🎜

class Cat extends Pet {
  constructor(name, color) {
    super(name);
    this.color = color;
  }
}

const myCat = new Cat('Callie', 'red');

🎜D) Symbol:🎜

myCat instanceof Pet; // => true

🎜E) undefiniert:🎜

myCat instanceof Pet; // => true

🎜F) Objekte:🎜rrreee🎜G) Funktionen:🎜rrreee🎜1.1 typeof null🎜🎜Wie wir oben gesehen haben, verwenden Sie typeof Das Ergebnis der Beurteilung des Objekts ist 'object'. 🎜🎜Allerdings wird typeof null auch als 'object' berechnet! 🎜rrreee🎜typeof null, das 'object' war, war ein Fehler in der ersten Implementierung von JS. 🎜🎜Daher müssen Sie bei der Verwendung von typeof zum Erkennen von Objekten zusätzlich auf null prüfen: 🎜rrreee🎜1.2 typeof und undefinierte Variablen🎜🎜 Obwohl typeof expression normalerweise durch den Typ von expression bestimmt wird, kann typeof auch verwendet werden, um zu bestimmen, ob eine Variable definiert ist. 🎜rrreee🎜typeof hat eine nette Eigenschaft, die, wenn typeof den Typ einer undefinierten Variablen auswertet, keinen ReferenceError-Fehler auslöst: 🎜rrreee🎜 Die Variable notDefinedVar ist im aktuellen Bereich nicht definiert. typeof notDefinedVar löst jedoch keinen Referenzfehler aus und ergibt stattdessen 'undefiniert'. 🎜🎜Wir können typeof verwenden, um zu erkennen, ob eine Variable undefiniert ist. Wenn typeof myVar === 'undefiniert' true ist, dann myVar ist nicht definiert. 🎜🎜2. Instanz des Operators🎜🎜Die übliche Art, eine JS-Funktion zu verwenden, besteht darin, nach ihrem Namen ein Klammerpaar hinzuzufügen . Aufruf: 🎜rrreee🎜greet('World') ist ein regulärer Funktionsaufruf. 🎜🎜JS-Funktionen können noch viel mehr: Sie können sogar Objekte konstruieren! Um eine Funktion dazu zu bringen, ein Objekt zu erstellen, verwenden Sie einfach das Schlüsselwort new vor dem regulären Funktionsaufruf: 🎜rrreee🎜new Greeter('World') soll eine Instanz von worldGreeters Konstruktoraufruf. 🎜🎜Wie überprüfe ich, ob JS eine bestimmte Instanz mit einem bestimmten Konstruktor erstellt hat? Verwenden Sie den Operator instanceof: 🎜rrreee🎜wobei object der Ausdruck ist, der das Objekt auswertet, und Constructor die Klasse oder Funktion ist, die das Objekt erstellt , instanceof ergibt einen booleschen Wert. 🎜🎜worldGreeter-Instanzen werden mit dem Greeter-Konstruktor erstellt, sodass diese worldGreeter-Instanz von Greeter als true ausgewertet wird. 🎜🎜Ab ES6 können Sie class verwenden, um Objekte zu definieren. Definieren Sie beispielsweise eine Klasse Pet und erstellen Sie dann eine Instanz davon myPet:🎜

class Pet {
  constructor(name) {
    this.name = name;
  }
}

const myPet = new Pet('Lily');

new Pet('Lily')是创建实例myPet的构造调用。

由于myPet是使用Pet类构造的-const myPet = new Pet('Lily'), 所以 myPet instanceof Pet 的结果为 true：

myPet instanceof Pet; // => true

但是，普通对象不是Pet的实例：

const plainPet = { name: 'Zoe' };
plainPet instanceof Pet; // => false

我们发现instanceof对于确定内置的特殊实例(如正则表达式、数组)很有用：

function isRegExp(value) {
  return value instanceof RegExp;
}
isRegExp(/Hello/); // => true
isRegExp('Hello'); // => false

function isArray(value) {
  return value instanceof Array;
}
isArray([1, 2, 3]); // => true
isArray({ prop: 'Val' }); // => false

2.1 instanceof 和父类

现在，Cat 扩展了父类Pet：

class Cat extends Pet {
  constructor(name, color) {
    super(name);
    this.color = color;
  }
}

const myCat = new Cat('Callie', 'red');

不出所料，myCat是Cat类的实例：

myCat instanceof Pet; // => true

但同时，myCat也是基类Pet的一个实例:

myCat instanceof Pet; // => true

3. 总结

JS 是一种弱类型的语言，这意味着对变量的类型没有限制。

typeof expression可以用来查看 expression 的类型，结果是可能是其中的一个:'string'， 'number'， 'boolean'， 'symbol'， 'undefined'， 'object'， 'function'。

typeof null的值为'object'，因此使用typeof检测对象的正确方法是typeof object ==='object'&& object！== null。

instanceof运算符让我们确定实例的构造函数。 如果object是Constructor的实例，则object instanceof Constructor为true。

原文地址：https://dmitripavlutin.com/javascript-typeof-instanceof/

作者：Dmitri Pavlutin

译文地址：https://segmentfault.com/a/1190000038312457

更多编程相关知识，请访问：编程课程！！

Das obige ist der detaillierte Inhalt vonTypprüfung in JavaScript: Der Unterschied zwischen Typeof- und Instanzof-Operatoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!