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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
使用js画图之画切线
Jan 12 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
浅析VUE防抖与节流
Nov 24 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获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
jquery 选择器部分整理
2009/10/28 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
Python编写登陆接口的方法
2017/07/10 Python
Python打印输出数组中全部元素
2018/03/13 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
python django生成迁移文件的实例
2019/08/31 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
教你怎样写好自我评价
2013/10/05 职场文书
计算机学生求职信范文
2014/01/30 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
讲解员培训方案
2014/05/04 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
终止合同协议书范本
2016/03/22 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python