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;

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

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

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

typeof NaN;    // => 'number'

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

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

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

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

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

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

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

typeof greet; // => 'function'

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'

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

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

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

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

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

2. instanceof Operator

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

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

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é

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

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

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;

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!