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。

相关推荐
加班是不可能的,除非双倍日工资2 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi2 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip2 小时前
vite和webpack打包结构控制
前端·javascript
excel3 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
阿华的代码王国3 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼3 小时前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin
Jimmy3 小时前
AI 代理是什么,其有助于我们实现更智能编程
前端·后端·ai编程
ZXT3 小时前
promise & async await总结
前端
Jerry说前后端3 小时前
RecyclerView 性能优化:从原理到实践的深度优化方案
android·前端·性能优化
画个太阳作晴天4 小时前
A12预装app
linux·服务器·前端