你真的会判断javascript中的数据类型吗？ | 【javascript基础系列】

三年三月
818 阅读4分钟

前言

这个系列 主要介绍 javacript基础内容
本章主要讨论 js中的类型判断
这里不仅仅 知识 讨论 理论部分，也会结合自己的实际写代码遇到的问题
尽量能够做到 理论与实践相结合的目的
这样才会对某个知识点有更多的认识，也便于理解相应的知识点
也会提供一些 关于 某些知识点的最佳实践

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”

相关代码地址

JS中引用数据类型

JS 中的数据类型有好些，很多时候，我们需要判断其类型，从而决定 代码的具体的执行逻辑

那么如何快速准确的判断JS中的类型呢

本节我们要总结四种判断数据类型的方法

特别注意：每个方法都有相应的坑，但愿你不要踩到

第一种：typeof

typeof 用来判断 数据类型，我们先看下面表

image.png

总结一：

只能准确的判断基本类型（除Null），对于 引用类型，只能区分 Object和function，无法区别 Array,等其他类型

总结二：

为什么基本类型中的null的类型是 Object?

这个问题其实在前面的一篇文章已经阐述过了，是因为 最初世界上的机器基本都是 32位的机器

typeof 内部是根据每个变量在内存中的地址 前两位数字来判断 数据类型的，而最初的 null是 也是 0 开头

参考

image.png

所以此处在类型判断的时候一定要注意Null的特殊情况，它虽然是 Object,但确实是 基本数据类型

总结三：

Function类型比较特殊，虽然它其实还是 Object,但用 typeof测试，却是 Function，但是 像Array等

其他继承于 Object的 引用类型 却统一是 Object

第二种： instanceof

instanceof 可以正确判断对象的类型，其内部运行机制是判断在其原型链中能否找到该类型的原型

所以它可以用来判断引用类型，但是对于基本类型却无能为力

image.png

注意: null 类型 用 instanceof 无法判断，因为 null是原型链的最顶层了

如何实现一个 instanceof

知道了它的原理，就很简单了

只要递归的拿它的原型链去对比就可以了

image.png

第三种：constructor

constructor 主要是获取当前实例的构造函数

通过该对象的构造函数 是否是 哪个值，从而知道该对象的类型

此方法对 string 也是有效的，如下图试验

image.png

但是

  1. 如果你自己定义的一个构造函数，那么它产生的实例。再用上文中 instanceof 测试，是无法得到 Object,而只能得到 你自己写的那个构造函数
class Person {
  constructor(name) {
    this.name = name
  }
  getName(){
    console.log('我的名字叫',this.name)
  }
}

let p = new Person('三年三月')
p.getName()

console.log('p的类型是否是 Object',p.constructor === Object) // false
console.log('通过instanceof 可以，因为原型链上有 Object'p instanceof Object) // true
  1. null 也是无法通过 constructor 来判断类型的，因为 null 没有constructor 属性

第四种：Object.prototype.toString.call()

此方法返回一个表示该对象的字符串 , 比如 [Object string]，后面的 string 就真正的类型

这个方法 必须使用 Object.prototype.toString.call()，因为 像 数组和函数，一般都会 自己去实现 自己的

toString方法，这样的话，就覆盖了原型上面的 toSting 方法

这个方法的好处是，不管是 基本类型，还是引用类型，都能识别到，算是 目前为止判断类型的最优解了

image.png

但是，但是 由于 javascrippt还是太随意了，toString方法也是可以直接修改的

image.png

总结

本文主要介绍了javaScript中的四种判断类型的方法

  • typeof , 判断基本类型够用，无法识别具体的 引用类型（除function）
  • instanceof,判断一个值的原型链是否有 某个值，只能识别到 引用类型，对于基本类型无效
  • constructor，获取值得构造函数，从而判断类型，能判断 引用类型 和 基本类型，但是 如果引用类型是个自定义的类型，那么只能判断到 它自身的 构造函数，无法在原型链上去搜索
  • Object.prototype.toString.call() 能准确的判断出 基本类型和引用类型

注意：以上所有的方法，都可以直接修其 函数的定义。这种情况是 语言特性决定的

所有最优解还是 Object.prototype.toString.call()

这是一个系列文章，不断更新，希望对大家有帮助

有问题可以留言一起探讨

avatar
文章
阅读
粉丝