类型检查：typeof 和 instanceof 运算符区别？

蔚落 2022-12-27 12:42 183阅读 0赞

> 作者：Dmitri Pavlutin  
> 译者：前端小智  
> 来源：Dmitri Pavlutin

> **点赞再看**，微信搜索\*\*【大迁世界】**关注这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。**

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

**github 地址：[https://github.com/qq449245884/vue-okr-tree][https_github.com_qq449245884_vue-okr-tree]**

智米们肯定知道，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`对于确定内置的特殊实例(如正则表达式、数组)很有用：

#### 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/javascript-typeof-instanceof/

## 交流 ##

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

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[https_github.com_qq449245884_vue-okr-tree]: https://github.com/qq449245884/vue-okr-tree
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi