typeof null 等于什么?为什么?用什么方法可以拿到比较准确的类型判断?

来看看今天的链式问题:

  1. typeof null 等于什么?
  2. 为什么?
  3. 用什么方法可以拿到比较准确的类型判断?
  4. 自己实现一个 typeof 方法怎么实现?
  5. instanceof 与 typeof 的区别?

今天我们来带着问题一个个解决。

typeof null 等于什么?

这个问题我们可以在控制台打印一下即可得到:

js 复制代码
typeof null; // 'object'

可以看到,得到了一个值为 object 的字符串。

为什么会得到 object 的字符串?

在 JavaScript 最初的实现中,JavaScript 的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是0.由于 null 代表的是空指针(大多数平台下值为 0x00),因此,null 的类型标签是0,typeof null 也因此返回 'object'

用什么方法可以拿到比较准确的类型判断?

有人问,可不可以用 instanceof 来判断呢?

答案是不行的。

首先我们得知道 instanceof 是干嘛的?------它是用来检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

js 复制代码
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// expected output: true

console.log(auto instanceof Object);
// expected output: true

那么从语法上来讲,我们只能说判断 null 在哪个实例对象的原型链上(这句话比较扯淡,因为没有这种场景)。所以使用 instanceof 是解决不了我们的问题的。

我们可以使用 Object 里的 toString 方法来得到一个比较准确的类型判断,具体代码实现如下:

js 复制代码
function toRawType(value) {
  return Object.prototype.toString.call(value).slice(8, -1)
}

toRawType(null) // 'Null'
toRawType(1)    // 'Number'
toRawType('1')  // 'String'
toRawType({})   // 'Object'
toRawType([])   // 'Array'
toRawType(true) // 'Boolean'

每个实例都有一个 [[Class]] 属性,这个属性中就指定了上述字符串中的 type(构造函数中)。[[Class]] 不能直接被访问,但是通常可以间接通过在这个值上借用默认的 Object.prototype.toString.call(...) 方法调用来展示。

自己实现 typeof 如何实现?

其实这个问题的解决方法已经在上个问题中实现了。我们可以在上一个的基础上将值都转为小写即可。

js 复制代码
function typeOf(value) {
  return Object.prototype.toString.call(value).slice(8, -1).toLocaleLowerCase()
}

instanceof 与 typeof 的区别是什么?

其实实际上来说 instanceof 更倾向于判断引用数据类型,就跟它的定义一样:用来检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。也可以理解为当前对象是不是某个类的实例。instanceof 操作符在检测过程中也会将继承关系考虑在内,所以 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。

而 typeof 则是直接返回一个字符串,表示当前值的数据类型,对于引用数据来说,不会判断是否是某个类或者数组,它只会返回 object。

相关推荐
梁正雄1 小时前
Python前端-2-css练习
前端·css·python
清汤饺子1 小时前
用 Cursor 半年了,效率还是没提升?是因为你没用对这 7 个功能
前端·后端·cursor
雨夜之寂1 小时前
Browser Use + DeepSeek,我踩了哪些坑
后端·面试
蓝莓味的口香糖1 小时前
【vue3】组件的批量全局注册
前端·javascript·vue.js
wefly20171 小时前
开发者效率神器!jsontop.cn一站式工具集,覆盖开发全流程高频需求
前端·后端·python·django·flask·前端开发工具·后端开发工具
哈里谢顿1 小时前
fastapi面试题总结
面试
独泪了无痕2 小时前
自动导入 AutoImport:告别手动引入依赖,优化Vue3开发体验
前端·vue.js·typescript
GDAL2 小时前
MANIFEST.in简介
linux·服务器·前端·python
闻哥2 小时前
深入Redis的RDB和AOF两种持久化方式以及AOF重写机制的分析
java·数据库·spring boot·redis·spring·缓存·面试
XPoet2 小时前
AI 编程工程化:Command——给你的 AI 员工编一套操作手册
前端·后端·ai编程