【JavaScript】typeof和instanceof的区别及用法

系统管理员 2022-10-11 00:42 283阅读 0赞

# 1. 前言 #

之前对于 `typeof` 和 `instanceof` 用法的印象仅停留在可以使用它们对变量的类型进行检测，但是具体的差别并不很熟悉，如果你和我有同样的困惑，那接着往下看吧！

# 2. 区别 #

从官方文档中，可以了解到两者的定义分别如下：

*  `typeof`：返回一个字符串，表示一个未经计算的操作数的类型
 *  `instanceof`：检测构造函数的 `prototype` 是否存在某个实例对象的原型链上

能让你直观地感受到有时候 `typeof` 检测并不准确的例子如下：  
  当你想判断一个变量是否为数组时，typeof 只能检测为 object，而 instanceof 能告诉你是否为数组。

let arr = []
    typeof arr   // object
    arr instanceof Array  // true

**1）typeof**

*  能判断 “值类型”
 *  能判断 “函数”
 *  能判断是否为 “引用类型”，但只能知道其为 object，无法辨别是否为数组、null或者对象

举一个不太恰当的例子，`typeof` 相当于用于辨别一个人的性别，但是它没办法知道这个人的生平或其他特质。

console.log(typeof 'str');  		// string
    console.log(typeof 10);				// number
    console.log(typeof { });				// object
    console.log(typeof []);				// object
    console.log(typeof function(){ });	// function

**2）instanceof**

而 `instanceof` 与 `typeof` 不同的是，它可以判断你与某个人是否存在联系，你身上的血液是否流淌着这个人遗传给你的某些DNA。

就犹如下面的代码中，a 是 A 的实例，在 A 的原型链上挂载了`某些特质`（text）后，实例a 也同时拥有了该特质，并且通过 `instanceof` 检测的时候，可以发现是正确的，因此我们称：**构造函数A的原型链，是存在实例对象a 的原型链上的**。而 `typeof` 是无法做到这一点的。

`注：`关于原型链，后续会单独出一篇文章来讲。

// 声明构造器
    function A(){ }
    
    // 创建实例
    let a = new A()
    
    // 往构造器上挂载一个 text 属性
    A.prototype.text = 'prototype text'
    
    console.log(a);
    // 打印结果如下
    A { 
       __proto__: 
        	text: prototype text
    }
    
    console.log(a instanceof A) // true

# 3. 用法 #

**1）typeof**

以下两种写法都可以

typeof xxx
    typeof(xxx)

返回值是 `字符串`，如 `"object"`，因此若有题目如下，解答如下

let a = { }
    typeof(typeof a)   // string

**2）instanceof**

写法如下

object instanceof constructor
    
    // 示例
    function A(){ }
    var a = new A()
    a instanceof A   	// true
    a instanceof Object // true

值得注意的是，第一个函数必须是 `实例对象`，第二个函数必须是 `构造函数`

这句话的意思，可以分别看下面两段代码：

// 第一个函数必须是实例对象
    var str = 'str'
    var str1 = new String()
    
    str instanceof String   // false, str 非对象实例
    str1 instanceof String  // true, str1 是 String 的实例

// 第二个函数必须是构造函数
    function A(){ }
    let a = new A()
    let b = new A()
    console.log(a instanceof b);
    
    // TypeError: Right-hand side of 'instanceof' is not callable, 也就是 instanceof 右边不能是实例对象

**3）需注意的点**

var str = 'str'
    str instanceof String   // false
    
    var str1 = new String()
    str1 instanceof String	// true
    
    var obj = { }			// 对象不需要定义原型
    obj instanceof Object	// true
    
    var obj1  = Object.create(null);  // Object.create: 一种创建非 Object 实例的对象的方法
    obj1 instanceof Object	// false