类型检查：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 argument
greet(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' }); // => 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');

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。

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

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

交流

文章每周持续更新，能够微信搜索【大迁世界 】第一时间阅读，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，欢迎Star。