类型判断什么时候用 typeof?

typeof 是 JavaScript 中最常用的类型判断运算符,但它有几个致命的盲区和历史包袱。

1. null 被误判为 'object'(最著名的历史 bug)

2. 无法区分数组和普通对象

3. NaN 被判定为 'number'

4. 无法区分普通函数和类

class 本质上是函数的语法糖,typeof 无法区分"普通函数"和"类构造函数"。

5. 无法区分包装对象和原始值(严格来说不算 bug,但容易混淆)

什么时候用 typeof?

typeof 不是不能用,而是只适合判断原始类型和函数 :

一旦涉及对象的具体类型判断,立即换 Object.prototype.toString.call。

Object.prototype.toString.call()

JavaScript 中最可靠的内置类型判断方法 ,江湖人称「类型判断的终极武器」。

返回格式永远是 [object Xxx] ,其中 Xxx 就是该值的内部 [[Class]] 或 Symbol.toStringTag。

为什么它这么准?

1. 每个对象都继承了 toString

JavaScript 中,几乎所有对象都自带 toString 方法,但很多都重写了:

JavaScript

vbscript 复制代码
[1,2,3].toString()        // "1,2,3"  ← Array 重写了
({a:1}).toString()        // "[object Object]"  ← Object 默认
(function(){}).toString() // "function(){}"  ← Function 重写了

直接调用对象的 toString,得到的往往是该对象自定义的字符串,无法判断类型。

2. Object.prototype.toString 是「原版」

Object.prototype.toString 没有被重写,它的行为是固定的:

读取被调用对象的内部 [[Class]] 属性,返回 [object ClassName]。

但问题是,如果你直接写:

JavaScript

vbscript 复制代码
Object.prototype.toString([])    
// 等同于 [].toString(),返回 "1,2,3"

因为 Object.prototype.toString 里的 this 指向了数组,数组又重写了 toString,所以结果还是乱的。

3. .call() 强制绑定 this

JavaScript

css 复制代码
Object.prototype.toString.call([])

这里用 .call([]) 把 this 强制绑定到数组实例上,但调用的是 Object.prototype 上的原版 toString,数组自己的重写版本被绕过了。

于是原版 toString 读取数组的内部 [[Class]],返回 [object Array]。

Object.prototype.toString.call(x) 通过绕过对象重写、强制绑定 this、读取内部 \[Class] 的方式,返回最准确的类型标签。它是 JS 中判断内置类型最 robust 的方法,没有之一。

相关推荐
kyriewen41 分钟前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
工控丫丫1 小时前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库
Dream-Y.ocean4 小时前
鸿蒙PC平台星图遥感适配实战:基于 Electron 壳方案的纯 JavaScript 遥感图像处理引擎开发
javascript·electron·harmonyos
螺丝钉tina4 小时前
[Playwright ][16]Playwright + TypeScript API 自动化测试实战:API测试
前端·javascript·typescript
Highcharts.js7 小时前
React 中原生支持使用 JSX 组件配置自定义表格 Highcharts Grid
前端·javascript·react.js·前端框架·jsx·highcharts·自定义表格
Java后端的Ai之路7 小时前
【AIAgent开发】-Agent工具封装成CLI(纯干货!!!)
java·javascript·人工智能·agent·cli
薛定谔的猫-菜鸟程序员7 小时前
Electron开发超详细教程(从入门到放弃)
前端·javascript·electron
htzyl2068 小时前
前端阶梯——第四十三章、实战二:待办清单To-Do
前端·javascript·html
程序员大阳9 小时前
HTML+CSS+JS对话式实战(1)-开篇:认识我们要做的社团活动发布平台
javascript·css·html·实战·系统·平台·社团活动发布