关于前端:类型检查typeof-和-instanceof-运算符区别

作者：Dmitri Pavlutin
译者：前端小智
起源：Dmitri Pavlutin

点赞再看，微信搜寻【大迁世界】关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。**

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

智米们必定晓得，JS 是种弱类型语言，对变量的类型没有限度。

例如，如果咱们应用字符串类型创立了一个变量，前面又能够为同一变量调配一个数字：

let message = 'Hello'; // 调配一个字符串message = 14; // 调配一个数字

这种动态性为咱们提供了灵活性并简化了变量申明。

不好方面，咱们永远不能确保变量蕴含某种类型的值。例如，以下函数greet(who)须要一个字符串参数，然而，咱们能够应用任何类型的参数来调用该函数：

function greet(who) {  return `Hello, ${who}!`}greet('World'); // => 'Hello, World!'// You can use any type as argumentgreet(true);    // => 'Hello, true!'greet([1]);     // => 'Hello, 1!'

有时咱们须要在 JS 中查看变量的类型，要怎么做？

应用typeof运算符以及instanceof来查看实例类型。

1.`typeof`运算符

在 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' }); // => trueisObject(15);                 // => falseisObject(null);               // => false

1.2 typeof 和未定义的变量

尽管typeof expression通常决定于expression的类型，但也能够应用typeof来确定是否定义了变量。

// notDefinedVar is not definednotDefinedVar; // throws ReferenceError

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

// notDefinedVar is not definedtypeof 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');

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/); // => trueisRegExp('Hello'); // => falsefunction isArray(value) {  return value instanceof Array;}isArray([1, 2, 3]); // => trueisArray({ 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。

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://dmitripavlutin.com/ja...

交换

文章每周继续更新，能够微信搜寻【大迁世界】第一工夫浏览，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送Star。

1.typeof运算符