js数据类型检测总结


Posted in Javascript onAugust 05, 2018

在js中,有四种用于检测数据类型的方式,分别是:

  • typeof

    用来检测数据类型的运算符

  • instanceof

    检测一个实例是否属于某个类

  • constructor

    构造函数

  • Object.prototype.toString.call()

    原型链上的Object对象的toString方法

下面我们就来分别介绍一下上面四种方法的适用场景和局限性。

typeof 用来检测数据类型的运算符

使用typeof检测数据类型,返回值是字符串格式。能够返回的数据类型

是:"number","string","bolean","undefined","function","object"。

<script>
  console.log(typeof(1));  //number
  console.log(typeof('hello'));  //string
  console.log(typeof(true));  //boolean
  console.log(typeof(undefined));  //undefined
  console.log(typeof(null));  //object
  console.log(typeof({}));  //object
  console.log(typeof(function() {}));  //function
</script>

局限性:

  • typeof (null); //"object"。这是由于在js中,null值表示一个空对象指针,而这也正是使用typeof操作 符检测null值时会返回"object"的原因。
  • 不能具体的细分是数组还是正则,还是对象中其他的值,因为使用typeof检测数据类型,对于对象数据类型的所有的值,最后返回的都是"object"

instanceof 检测某一个实例是否属于某个类

instanceof主要用来弥补typeof不能检测具体属于哪个对象的局限性。

<script>
  let arr = [1,2,3];
  let reg = /\w/;
  console.log(arr instanceof Array);  //true
  console.log(arr instanceof Object);  //true
  console.log(reg instanceof RegExp);  //true
  console.log(reg instanceof Object);  //true
</script>

局限性:

  • 不能用于检测和处理字面量方式创建出来的基本数据类型值,即原始数据类型
  • instanceof的特性:只要在当前实例的原型链上的对象,我们用其检测出来都为true
  • 在类的原型继承中,我们最后检测出来的结果未必正确

constructor 构造函数

是函数原型上的属性,该属性指向的是构造函数本身。

作用和instsnceof非常相似,与instanceof不同的是,不仅可以处理引用数据类型,还可以处理原始数据类型。

<script>
  let num = 12;
  let obj = {};
  console.log(num.constructor == Number);//true
  console.log(obj.constructor == Object);//true
</script>

但是要注意一点的是,当直接用(对象字面量或原始数据).constructor时,最好加上()。为了便于理解,我们来看一个例子。

<script>
  1.constructor === Number;    //报错,Invalid or unexceped token
  (1).constructor === Number;    //true
  {}.constructor === Number;    //报错,Invalid or unexceped token
  ({}).constructor === Number;  //true
</script>

这主要是由于js内部解析方式造成的,js会把1.constructor解析成小数,这显然是不合理的,小数点后应该是数字,因此就会引发报错。js会把{}解析成语句块来执行,这时后面出现一个小数点显然也是不合理的,因此也会报错。为了解决这个问题,我们可以为表达式加上()使js能够正确解析。

局限性:我们可以把类的原型进行重写,在重写的过程中很可能把之前constructor给覆盖了,这样检测出来的结果就是不准确的

<script>
   function Fn() {};
  Fn.prototype = new Array;
  var f = new Fn;
  //f是一个函数,按道理说他的构造函数应该是Function,但是修改其原型链后,它的constructor变成了Array.
  console.log(f.constructor == Array);  //true
</script>

Object.prototype.toString.call() 原型链上的Object对象的toString方法

Object.prototype.toString的作用是返回当前方法的执行主体(方法中的this)所属类的详细信息,是最全面也是最常用的检测数据类型的方式。

返回值的类型为string类型。

<script> 
  console.log(Object.prototype.toString.call(1));          //[object Number]
  console.log(Object.prototype.toString.call(/^sf/));        //[object RegExp]
  console.log(Object.prototype.toString.call("hello"));      //[object String]
  console.log(Object.prototype.toString.call(true));        //[object Boolean]
  console.log(Object.prototype.toString.call(null));        //[object Null]
  console.log(Object.prototype.toString.call(undefined));      //[object Undefined]
  console.log(Object.prototype.toString.call(function() {}));    //[object Function]
  console.log(typeof(Object.prototype.toString.call(function() {})));    //string
</script>
Javascript 相关文章推荐
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 #Javascript
vue实现简单的MVVM框架
Aug 05 #Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 #Javascript
详解Require.js与Sea.js的区别
Aug 05 #Javascript
vue中关闭eslint的方法分析
Aug 04 #Javascript
详解Vue取消eslint语法限制
Aug 04 #Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 #Javascript
You might like
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
python str与repr的区别
2013/03/23 Python
Python中的自省(反射)详解
2015/06/02 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python 用struct模块解决黏包问题
2020/11/07 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
医药营销个人求职信
2014/04/12 职场文书
工厂搬迁方案
2014/05/11 职场文书
初一语文教学反思
2016/03/03 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫