您的位置: 翼速应用 > 业内知识 > web前端 > 正文

JavaScript主题之类型检测

    在“ JavaScript数据类型”中,我们还提到了一个简单的类型检测问题。  

 

    作为前端学生,我们都应该知道我们可以使用typeof和instanceof来在运行时判断JavaScript数据的类型,那么他们如何判断呢? 一千个人会写一千种判断方法吗?  

 

    本文将讨论如何从通用typeof到专门针对该对象的instanceof,再到isNull,isNumber,isString和其他方法来确定数据类型,以讨论如何确定数据类型 。 让我们一起做吧〜


    一、typeof


    typeof:操作符返回一个字符串,表示未经计算的操作数的类型。


    我们都知道,在 ES6 前,JavaScript 共六种数据类型,分别是:


    Undefined

    Null

    Boolean

    Number

    String

    Object

    然而当我们使用 typeof 对这些数据类型的值进行操作的时候,返回的结果却不是一一对应,分别是:


    Undefined

    object – ***

    Boolean

    Number

    String

    Object

    有一些意外,typeof null => 'object' 且 typeof function(){} => 'function'


    所以在大多数情况下我们可以使用typeof来检测基本数据类型,但是,检测得到的Object后,却无法区分是哪一种Object:

JavaScript主题之类型检测1.png

    总结


    在检测Js的原始类型时,除了typeof null返回object之外,其他的都返回对应类型名的小写字母。


    二、instanceof


    我们判断对象类型的时候,可以使用instanceof:


    如果对原型及原型链不太熟悉的同学不妨看看这篇文章从原型到原型链


    定义


    instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。


    实例

JavaScript主题之类型检测2.png

    注意instanceof是能匹配类型的父类的,所以arr instanceof Array和arr instanceof Object都是true,因为Object是Array的父类。


    满足class extends和原型链规则的父子类关系的对象都能被匹配:


    class

JavaScript主题之类型检测3.png

    原型链

JavaScript主题之类型检测4.png

    注意如果我们修改obj的原型链能改变instanceof的结果:

JavaScript主题之类型检测5.png

    总结


    instanceof借助了原型链来判断的实际上,只要一个类型Type的prototype在一个对象obj的原型链上,那么obj instanceof Type就是true,否则就是false。


    三、constructor


    有时候我们不希望匹配父类型,只希望匹配当前类型,那么我们可以用constructor来判断:


    如果对原型及原型链不太熟悉的同学不妨看看这篇文章从原型到原型链


    定义


    返回创建实例对象的 Object 构造函数的引用。注意,此属性的值是对函数本身的引用,而不是一个包含函数名称的字符串。


    实例

JavaScript主题之类型检测6.png

    对象的constructor会返回它的类型,而类型在定义的时候,会创建一个name只读属性,值为类型的名字。

JavaScript主题之类型检测7.png

    疑问


    constructor.name 一定就是正确的吗?

    我们可以修改它吗?

    四、stringTag是什么?


    4.1 stringTag——类型标签

    如果你看过一些库的早期实现,你会发现使用Object.prototype.toString来做类型判断的方式,他们会数据类型的字符串标志,被称作stringTag;


    4.2 Object.prototype.toString

    定义


    toString()方法返回一个表示该对象的字符串。


    每个对象都有一个 toString() 方法,当该对象被表示为一个文本值时,默认情况下,toString() 方法被每个 Object 对象继承。


    如果此方法在自定义对象中未被覆盖,toString() 返回 “[object type]”,其中 type 是对象的类型。以下代码说明了这一点:


    实例


    比如这是requirejs里面的代码片段。

JavaScript主题之类型检测8.png

    toString时都做了什么?


    这里直接将冴羽大大的总结搬了过来:

JavaScript主题之类型检测9.png

    当 toString 方法被调用的时候,下面的步骤会被执行:


    如果 this 值是 undefined,就返回 [object Undefined]

    如果 this 的值是 null,就返回 [object Null]

    让 O 成为 ToObject(this) 的结果

    让 class 成为 O 的内部属性 [[Class]] 的值

    最后返回由 "[object " 和 class 和 “]” 三个部分组成的字符串

    注意


    有几点我们需要注意:


    toString无法区分原始类型及其构造对象;

    我们认为Number、Boolean这种类型在被构造器构造出来后的类型应该是对象;

    但toString都会返回[object number]等原始类型;

    toString方法是可以自定义的;


    五、实现几个数据检测的方法


    好了看了几款常用的类型判断方法后,我们可不可以实现自己的类型判断工具?就利用上述提到的一个或多个方法。我们自己动手丰衣足食~


    5.1 isObject

    注意,我们认为null不是一个对象,它就是null~

JavaScript主题之类型检测10.png

    5.2 isNull

JavaScript主题之类型检测11.png

    5.3 isFunction

JavaScript主题之类型检测12.png

    5.4 isArray

JavaScript主题之类型检测13.png

    5.5 stringTag

JavaScript主题之类型检测14.png

    好吧,最后,您对类型测试的通常态度是什么?

我来说两句

0 条评论

推荐阅读

  • 响应式布局CSS媒体查询设备像素比介绍

    构建响应式网站布局最常见的是流体网格,灵活调整大小的站点布局技术,确保用户在使用的幕上获得完整的体验。响应式设计如何展示富媒体图像,可以通过以下几种方法。

    admin
  • 提升网站的性能快速加载的实用技巧

    网站速度很重要,快速加载的网站会带来更好的用户体验、更高的转化率、更多的参与度,而且在搜索引擎排名中也扮演重要角色,做SEO,网站硬件是起跑线,如果输在了起跑线,又怎么跟同行竞争。有许多方法可提升网站的性能,有一些技巧可以避免踩坑。

    admin
  • 织梦CMS TAG页找不到标签和实现彩色标签解决方法

    织梦cms是我们常见的网站程序系统的一款,在TAG标签中常常遇到的问题也很多。当我们点击 tags.php 页的某个标签的时候,有时会提示:“系统无此标签,可 能已经移除!” 但是我们检查程序后台,以及前台显示页面。这个标签确实存在,如果解决这个问题那?

    admin
  • HTML关于fieldset标签主要的作用

    在前端开发html页面中常用的标签很多,今天为大家带来的是关于HTML中fieldset标签主要的作用说明,根据技术分析HTML

    admin

精选专题