JavaScript类型侦探：四大神器让你一眼看穿变量真身

在JavaScript的江湖中，每个变量都有自己的"身份证"，但有些家伙喜欢玩"变脸"。今天，我带大家认识四位顶尖的"类型侦探"，帮你识破一切伪装！

侦探档案：四大神探各显神通

1. typeof ------ 初出茅庐的原始类型专家

这位侦探最擅长处理原始类型案件，但总在null面前栽跟头，但是它判断不了引用类型案件：

let n = 123  //number 数字类型
let s = 'hello' // string 字符串类型 
let f = true  //boolean 布尔类型
let u = undefined // undefined 未定义类型
let nu = null  // object 判断失败
let sy = Symbol(1)//symbol类型
let big = 123123123n// bigint类型

let arr = [] //object 失败
let obj = {} //object 失败
let fn = function() {} // function 特例判断成功
let date = new Date() //object 判断失败
console。log(typeof xxx)

typeof会通过将值转化为二进制来判断类型，对于二进制数据前三位是0的统一识别为对象，所有引用类型转化为二进制前三位都是0，而null转化为二进制全是0，null的机器码是全0，所以被判定为对象。

2. instanceof ------ 血统鉴定师

这位侦探专查家族关系，看你是否出自"名门望族"：

let n = 123
let s = 'hello'
let f = true
let u = undefined 
let nu = null
let sy = Symbol(1)
let big = 123123123n

let arr = []
let obj = {}
let fn = function() {}
let date = new Date()


console.log(arr instanceof Array);//true
console.log(arr instanceof Object); //  Array.prototype.__proto__ == Object.prototype  true

console.log(obj instanceof Object); //true
console.log(date instanceof Date);  //true
console.log(fn instanceof Function); //true

console.log(n instanceof Number);  // false
console.log(nu instanceof Object);  // false

破案原理：沿着原型链向上找，看你祖上有没有这位"祖先",很显然，这样判断不了原始类型，而且这样还不好判断自己的上一级是不是就是自己的构造函数这是因为实例对象都是new一个构造函数得到的，也就是万物皆对象。

3. Object.prototype.toString.call() ------ 法医鉴定中心

最权威的鉴定机构，能给出最准确的官方报告：

let n = 123
let s = 'hello'
let f = true 
let u = undefined
let nu = null 
let sy = Symbol(1)
let big = 123123123n
let arr = []
let obj = {}
let fn = function () { }
let date = new Date() 
console.log(Object.prototype.toString.call(n));
console.log(Object.prototype.toString.call(s));
console.log(Object.prototype.toString.call(f)); 
console.log(Object.prototype.toString.call(u)); 
console.log(Object.prototype.toString.call(nu)); 
console.log(Object.prototype.toString.call(sy)); 
console.log(Object.prototype.toString.call(big)); 
console.log(Object.prototype.toString.call(arr)); 
console.log(Object.prototype.toString.call(obj)); 
console.log(Object.prototype.toString.call(fn)); 
console.log(Object.prototype.toString.call(date));

这时候的检验结果如下

法医鉴定中心完美地把每个变量的类型展示出来，但是这时候你看这个打印结果就会发现不对劲，怎么前面会有一个object，这是因为这个函数会将this值作为参数传递给ToObject，设o为调用ToObject的结果， 设一个变量class为O的\[class]内部属性值，返回一个字符串，这个字符串由'object' +class+ ''组成，一种结构它的内部属性\[class]对应的值 就是 创建它的那个构造函数。 如果想要去掉的话，就要用到一个它自身就有的方法slice

function getType(x) {
  const val = Object.prototype.toString.call(x)  // '[object String]'
  const valType = val.slice(8, -1)
  return valType
}
console.log(getType(s));  // String

Object.prototype.toString.call(arr)

slice顾名思义就是直接把你想要的东西剪切出来不影响原来的东西，前面那个数就是从下标多少开始切，后面那个数就是到哪里停止，-1就代表从后往前开始切，这样就能轻松识别变量的身份。

4. Array.isArray() ------ 数组特派员

专门负责数组鉴定，又快又准：

console.log(Array.isArray([]));//true

总结

选择哪种类型判断方法，就像选择不同的工具：

• 🔧 日常快速判断 → typeof
• 🧬 检查继承关系 → instanceof
• 🏥 需要精确诊断 → Object.prototype.toString.call()
• 📦 专门检查数组 → Array.isArray()

记住：没有最好的，只有最合适的。下次遇到类型判断问题时，想想我们的四位侦探，选对工具，事半功倍！