JS的 typeof 与 instanceof 的判断范围详解

我们都知道JS是一门弱类型语言，变量可以通过var、let或const声明任意类型，在执行程序时，我们可以通过 typeof 与 instanceof用于判断变量数据的类型，便于进一步操作数据，那它们两个判断类型都是有限制的，只能判断某一类，下面我们会明确区分它们的判断类型。

JS有五种基本数据类型：

null
undefined
number
boolean
string

三种复杂类型：

Object（任意对象）
Function（一种可以执行的特殊对象）
Array（一种数值类型的下标的特殊对象）

注意：函数和数组也是对象。

1.typeof的判断范围

可判断：undefined、数值、字符串、布尔值、function
不可判断：null与object、array与object

可判断举例：

      let name = undefined
      let age = 18
      let sex = '男'
      let func = function () {
    
    }
      let checked = true
      console.log(typeof name === 'undefined')
      console.log(typeof age === 'number')
      console.log(typeof sex === 'string')
      console.log(typeof func === 'function')
      console.log(typeof checked === 'boolean')

在这里插入图片描述
上面举例了typeof可以判断的五种类型，除了这五种就超出了 typeof 的能力。

不可判断举例：

举例一：不可判断null与object

      var obj = null
      var obj1 = {
    
    
        name: '鸭绒',
      }

      console.log(typeof obj === 'object')
      console.log(typeof obj1 === 'object')

在这里插入图片描述
null 和 object 两者使用typeof判断的结果都是’object’,那我们就无法区分这变量到底是null还是真的是object。

举例二：不可判断array与object

      var arr = ['鸭绒']
      var obj = {
    
    
        name: '鸭绒',
      }

      console.log(typeof arr === 'object')
      console.log(typeof obj === 'object')

在这里插入图片描述
数组使用 typeof 返回的也是’object’，所以最终是无法断定到底是数组还是对象。

注意：数组使用typeof不是返回 ‘array’。

2. instanceof 判断范围

instanceof用于判断对象的具体类型。

对象只有三种：函数、数组、对象。

      let arr = ['鸭绒']
      console.log(arr instanceof Array)
      console.log(arr instanceof Object)

	  let func = function () {
    
    }
      console.log(func instanceof Function)
      console.log(func instanceof Object)

	  let obj = {
    
     name: '鸭绒' }
      console.log(obj instanceof Object)

在这里插入图片描述

数组、函数的具体类型是Array、Function，但数组、函数同样是对象，所以同样返回true。

instanceof的判断原理是原型链,只要能在原型链中最终相遇，便会返回true，这得需深入学习原型链。

面试易考易错点：

      console.log(Function instanceof Object)
      console.log(Array instanceof Object)
      console.log(Object instanceof Object)
      console.log(Object instanceof Function)
      console.log(Object instanceof Array)
      console.log(Function instanceof Array)
      console.log(Array instanceof Function)

在这里插入图片描述
前三种还是好理解的，后四种就让人有点迷惑了。

下面我画一张关于函数Foo、Function、Object的原型链的关系图：

在这里插入图片描述
我在图中清晰的标注了注释，如果没看懂的那就要先去学学原型链，作为JS的重要核心点，务必掌握。
通过上面图我们就可以确切的知道：

Object instanceof Function
Function instanceof Object

为什么都返回true了。

instanceof语法：A instanceof B A指的是实例对象，B指的是构造函数,就算A是Function或Object也都一致认为它是实例对象，既然是实例对象，那么它就有__proto__指向它的构造函数中的prototype。

JS的 typeof 与 instanceof 的判断范围详解

猜你喜欢