JavaScript 判断数据类型方法总结：Object.prototype.toString.call(obj)功能及原理

若想直接了解Object.prototype.toString.call(obj)的功能和原理可跳转至 第3节。

JavaScript 判断数据类型的方法大致有以下几种：

1. typeof
2. instanceof
3. constructor
4. Object.prototype.toString.call( )

数据类型判断的三种方式

1 typeof

语法 ： typeof 数据

返回值： 数据类型

用途： 用于判断简单数据类型（null除外），对于复杂数据类型只能判断出类型为Object

• 简单数据类型：数字、字符串、布尔、null、undefined null除外

• 复杂数据类型：对象、数组、键值对、函数 函数除外

• 特殊点：

  • null （简单数据类型）: typeof将其判断为 Object（null-空对象）。
  • function （复杂数据类型）:typeof将其判断为Function 而不是 Object。

  // 简单数据类型
  console.log('typeof 123 结果：', typeof 123) // number
  console.log('typeof "小红" 结果：', typeof "小红") // string
  console.log('typeof true 结果：', typeof true) // boolean
  console.log('typeof undefined 结果：', typeof undefined) // undefined
  console.log('typeof null 结果：', typeof null) // object 空对象

  // 复杂数据类型
  console.log('typeof [] 结果：', typeof []) // object
  console.log('typeof {} 结果：', typeof {}) // object
  console.log('typeof function(){} 结果：', typeof function () { }) // function

2 instanceof

语法 ： 数据 instanceof 构造原型（ 常用：Array、Object）

返回值： boolean [true or false]

如果instanceof左边的数据，是通过右边的构造函数构造出来的，则返回true,否则返回false

用途： 用于判断复杂数据类型，不能正确判断基础数据类型

    // 1 对于简单数据类型会报错
    '123' instanceof String // false
    
    // 2 复杂数据类型，常用Array Object
    [1,2,3] instanceof Array // true
    {} instanceof Array // false
    {} instanceof Array // true

3 constructor

语法 ： 数据.constructor

返回值： ƒ 数据类型() { [native code] }

如果instanceof左边的数据，是通过右边的构造函数构造出来的，则返回true,否则返回false

用途： 几乎可以判断基本数据类型和引用数据类型 (null和undefined除外），但主要用于构造函数的判断

• 用于构造函数时：
• 对于构造函数 返回值为true/false ： 实例对象.constructor===构造函数
• 主要用于判断构造实例是否属于某个构造器-构造出来的

  const num = 1, str = 'zs', boo = true, nul = null, und = undefined, 
  obj = {}, arr = [], fn = function () { }
  // 简单数据类型
  console.log('num.constructor', num.constructor) // ƒ Number() { [native code] }
  console.log('str.constructor', str.constructor) // ƒ String() { [native code] }
  console.log('boo.constructor', boo.constructor) // ƒ Boolean() { [native code] }
  console.log('nul.constructor', nul.constructor) // 报错
  console.log('und.constructor', und.constructor) // 报错
  
  // 复杂数据类型
  console.log('obj.constructor', obj.constructor) // ƒ Object() { [native code] }
  console.log('arr.constructor', arr.constructor) // ƒ Array() { [native code] }
  console.log('fn.constructor', fn.constructor) // ƒ Function() { [native code] }

4 Object.prototype.toString.call( )

语法： Object.prototype.toString.call(数据)

返回值： [object 数据类型]

用途： 简单、复杂数据类型均能使用。

原理： 每一个继承的Object对象都有toString方法，如果toString方法没有改写，会返回[object 类型]字符串，但是除了Object类型外、数组、函数、基本数据类型等若直接.toString()，会返回字符串。因此需要使用.call或.apply改变toString的执行上下文（改变this指向）。

为什么需要调用call：
因为该数据的toString方法被改写，通过call方法，将this指向该数据，让该数据调用Object上的toString方法，用以判断当前数据的类型。

  // 简单数据类型
    Object.prototype.toString.call(1) // [object Number]
    Object.prototype.toString.call('小红') // [object String]
    Object.prototype.toString.call(true) // [object Boolean]
    Object.prototype.toString.call(undefined) // [object Undefined]
    Object.prototype.toString.call(null) // [object Null]

  // 复杂数据类型
    Object.prototype.toString.call([1, 2, 3]) // [object Array]
    Object.prototype.toString.call({ age: 18 }) // [object Object]
    Object.prototype.toString.call(function () { }) // [object Function]