Vérification de type en JavaScript : la différence entre les opérateurs typeof et instanceof

En JavaScript les opérateurs typeof et instanceof peuvent effectuer une vérification de type, alors quelles sont les différences entre eux ? Cet article vous présentera la différence entre les opérateurs typeof et instanceof. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "tutoriel vidéo javascript"

Les smarties doivent savoir que JS est un langage faiblement typé et que les variables sont là il n'y a aucune restriction sur le type.

Par exemple, si nous créons une variable en utilisant le type chaîne, nous pouvons ensuite attribuer un numéro à la même variable :

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

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

Cette dynamique nous donne de la flexibilité et simplifie l'énoncé des variables.

Par contre, nous ne pouvons jamais être sûrs qu'une variable contient une valeur d'un certain type. Par exemple, la fonction suivante greet(who) nécessite un paramètre chaîne, cependant, nous pouvons appeler la fonction avec n'importe quel type de paramètre :

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!'

Parfois, nous devons vérifier le type d'une variable en JS, comment faire il?

Utilisez l'opérateur typeof avec instanceof pour vérifier le type d'instance.

1.<code><span style="font-size: 18px;">typeof</span>type deOpérateur

String en JS, les types de base incluent Number, Boolean, Symbol et undefined etc. De plus, il existe des fonctions, des objets et des valeurs spéciales null et

.

typeofexpression est l'opérateur utilisé pour déterminer le type de

 :

const typeAsString = typeof expression;

expressionexpression est évalué à une valeur du type que nous recherchons. myVariable peut être une variable myObject.myProp, un accesseur de propriété myFunction(), un appel de fonction 14 ou un nombre .

typeof expressionexpression, selon la valeur de 'string', le résultat peut être : 'number', 'boolean', 'symbol', 'undefined', 'object', 'function',

.

typeofJetons un coup d'œil à chaque type d'opérateur

 :

A) Chaîne :

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

B) Nombre :

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

typeof NaN;    // => 'number'

C ) Booléen :

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

D) Symbole :

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

E) non défini :

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

F) Objets :

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

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

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

G) Fonctions :

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

typeof greet; // => 'function'

1.1 type de null

typeofComme nous pouvons le voir ci-dessus, utiliser 'object' pour juger l'objet donne

.

typeof nullCependant, 'object' sera également compté comme

 !

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

typeof null'object' car était un bug dans l'implémentation initiale de JS.

typeofPar conséquent, lorsque vous utilisez null pour détecter des objets, vous devez également vérifier

 :

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

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

1.2 type de variables et variables non définies

typeof expression Bien que expression soit généralement déterminé par le type de typeof, vous pouvez également utiliser

pour déterminer si une variable est définie.

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

typeoftypeof a une propriété intéressante qui lorsque ReferenceError évalue le type d'une variable non définie, il ne génère pas l'erreur  :

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

notDefinedVarLa variable typeof  notDefinedVar n'est pas actuellement défini dans le champ d’application. Cependant, 'undefined' ne génère pas d'erreur de référence et est évalué à .

typeof Nous pouvons utiliser typeof myVar === 'undefined' pour détecter si une variable n'est pas définie, si true est myVar, alors

n'est pas défini.

2. instanceof Operator

La manière habituelle d'utiliser une fonction JS est de l'appeler en ajoutant une paire de crochets après son nom :

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

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

greet('World') est un appel de fonction régulier.

newLes fonctions JS peuvent faire bien plus : elles peuvent même construire des objets ! Pour qu'une fonction construise un objet, utilisez simplement le mot-clé

avant l'appel de fonction régulier :

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

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

new Greeter('World')worldGreeter est l'appel du constructeur qui crée l'instance .

instanceofComment vérifier si JS a créé une instance spécifique en utilisant un constructeur spécifique ? Utilisez l'opérateur

 :

const bool = object instanceof Constructor;

object où Constructor est une expression qui évalue l'objet, et instanceof est une classe ou une fonction qui construit l'objet, et est évalué à une valeur booléenne. Les instances

worldGreeterGreeter sont créées à l'aide du constructeur 此worldGreeter instanceof Greeter, donc true est évalué à

.

classÀ partir d'ES6, vous pouvez utiliser Pet pour définir des objets. Par exemple, définissez une classe myPet puis créez-en une instance

 :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!