JavaScript判断变量类型的几种方式 | typeof | instanceof | constructor | Object.prototype.toString.call()

JavaScript判断变量类型的几种方式

方式一：typeof

• 常用于判断基本数据类型，对于引用数据类型除了typeof function返回'function'，其他都返回'object'。

• 且typeof null 也是返回'object'

  • 原因：JavaScript 在底层存储变量时，会在变量的机器码1-3位存储变量的类型信息，对象类型的1-3位是000，而null的机器码是全0，所以typeof检测的时候将null也判定为是对象。

方法一代码示例：

let num = 123
let str = 'hello'
let bool = true
let s = Symbol('hello')
let obj = {
    
    a:'hi'}
let arr = ['a','b','c']
let fun = function(){
    
    
    console.log('hello')
}
console.log('typeof num '+ typeof num) 
console.log('typeof str '+ typeof str)
console.log('typeof bool '+ typeof bool)
console.log('typeof null '+ typeof null)
console.log('typeof undefined '+ typeof undefined)
console.log('typeof s '+ typeof s)
console.log('typeof obj '+ typeof obj)
console.log('typeof arr ' + typeof arr)
console.log('typeof fun ' + typeof fun)

运行结果：

方式二：instanceof

• instanceof判断方法：如 a instanceof B

  • 如果B函数的显示原型对象prototype在a的隐式原型链上，则返回true，否则返回false。

• 不可以用于简单数据类型的检测，检测过程繁琐且对于简单数据类型中的null、undefined、symbol检测不出来。

方法二代码示例：

let num = 123
let str = 'hello'
let bool = true
let s = Symbol('hello')
let obj = {
    
    a:'hi'}
let arr = ['a','b','c']
let fun = function(){
    
    
    console.log('hello')
}
console.log(num instanceof Number) //false
console.log(str instanceof String)  //false
console.log(bool instanceof Boolean )//false
console.log(undefined instanceof Object)//false
console.log(null instanceof Object) //false
console.log(s instanceof Symbol ) //false
console.log(obj instanceof Object ) //true
console.log(arr instanceof Array)  //true
console.log(fun instanceof Function )  //true

运行结果：

方式三：constructor

• 每个函数都有一个prototype属性，它默认指向一个空的object对象，叫做函数的原型对象，这个原型对象上有一个属性叫做constructor，它默认指向函数对象。当使用实例对象获取constructor属性时，在自身属性上找不到，则会沿着原型链去查找，且找到的这个constructor属性指向这个实例对象的构造函数。因此可以通过constructor属性来判断引用数据类型。

方法三代码示例：

let num = 123
let str = 'hello'
let bool = true
let s = Symbol('hello')
let obj = {
    
    a:'hi'}
let arr = ['a','b','c']
let fun = function(){
    
    
    console.log('hello')
}
console.log(num.constructor === Number) //true
console.log(str.constructor === String) //true
console.log(bool.constructor === Boolean)//true
console.log(s.constructor === Symbol) //true
console.log(obj.constructor === Object) //true
console.log(arr.constructor === Array) // true
console.log(fun.constructor === Function) //true

运行结果：

方式四：Object.prototype.toString.call()

• Object的每一个实例都有toString方法，这个方法在Object构造函数的prototype上，Object.prototype.toString方法会输出对象的字符串表示：[Object 类型]
  • Object.prototype.toString()方法是Object构造函数的prototype上的toString方法，只有这个方法是会输出调用改方法的对象的字符串表示。其他数据类型对toString方法基本都进行了改写（可以看下面代码实例中的对比），因此若通过实例对象直接调用toString方法无法获取到Object.prototype.toString()方法，只有通过Object.prototype.toString.call()/apply()调用，以实现数据类型的判断。
• 这四种方法中各种数据类型都能检测且检测精准的就是Object.prototype.toString.call()。包括null、undefined都可以精确的检测出。

方法四代码示例：

let num = 123
let str = 'hello'
let bool = true
let s = Symbol('hello')
let obj = {
    
    a:'hi'}
let arr = ['a','b','c']
let fun = function(){
    
    
    console.log('hello')
}
console.log(num.toString())
console.log(Object.prototype.toString.call(num))
console.log(str.toString())
console.log(Object.prototype.toString.call(str))
console.log(bool.toString())
console.log(Object.prototype.toString.call(bool))
console.log(s.toString())
console.log(Object.prototype.toString.call(s))
console.log(obj.toString())
console.log(Object.prototype.toString.call(obj))
console.log(arr.toString())
console.log(Object.prototype.toString.call(arr))
console.log(fun.toString())
console.log(Object.prototype.toString.call(fun))
console.log(Object.prototype.toString.call(null))
console.log(Object.prototype.toString.call(undefined))

运行结果：

总结

以上四种方式即为JavaScript中判断变量数据类型的四种方式。如代码或思路有任何不足，欢迎补充。