JavaScript数据类型检测总结

来源:前端全栈君丶 发布时间:2018-12-04 13:58:04 阅读量:1199

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


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

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

constructor   构造函数

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

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


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


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


是:“number”,“string”,“bolean”,“undefined”,“function”,“object”。


<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>

1

2

3

4

5

6

7

8

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力

群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。


局限性:


不能用于检测和处理字面量方式创建出来的基本数据类型值,即原始数据类型

instanceof的特性:只要在当前实例的原型链上的对象,我们用其检测出来都为true

在类的原型继承中,我们最后检测出来的结果未必正确

constructor 构造函数


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


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


<script>

  let num = 12;

  let obj = {};

  console.log(num.constructor == Number);//true

  console.log(obj.constructor == Object);//true

</script>

1

2

3

4

5

6

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


<script>

  1.constructor === Number;    //报错,Invalid or unexceped token

  (1).constructor === Number;    //true

  {}.constructor === Number;    //报错,Invalid or unexceped token

  ({}).constructor === Number;  //true

</script>

1

2

3

4

5

6

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力

群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。


这主要是由于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>

1

2

3

4

5

6

7

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>

--------------------- 



标签: PHP 环境搭建
分享:
评论:
你还没有登录,请先