博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS检测数据类型
阅读量:5238 次
发布时间:2019-06-14

本文共 3681 字,大约阅读时间需要 12 分钟。

  如果你要判断的是基本数据类型或JavaScript内置对象,使用toString; 如果要判断的时自定义类型,请使用instanceof

1.typeof

typeof操作符返回的是类型字符串,它的返回值有6种取值:

typeof 3 // "number"typeof "abc" // "string"typeof {} // "object"typeof true // "boolean"typeof undefined // "undefined"typeof function(){} // "function"

所有对象的typeof都是"object",不能用于检测用户自定义类型。 比如DateRegExpArrayDOM Element的类型都是"object"

typeof []   // "object"

typeof还有一个知名的bug:

typeof null     // "object"

null是基本数据类型,它的类型显然是Null。其实这也反映了null的语义, 它是一个空指针表示对象为空,而undefined才表示什么都没有。 总之,typeof只能用于基本数据类型检测,对于null还有Bug。

 

2.instanceof

instanceof操作符用于检查某个对象的原型链是否包含某个构造函数的prototype属性。例如:

obj instanceof Widget

obj的原型链上有很多对象(隐式原型),比如:obj.__proto__obj.__proto__.__proto__, ...

如果这些对象里存在一个p === Widget.prototype,那么instanceof结果为true,否则为false

instanceof是通过原型链来检查类型的,所以适用于任何"object"的类型检查。

// 比如直接原型关系function Animal(){ }(new Animal) instanceof Animal     // true// 原型链上的间接原型function Cat(){}Cat.prototype = new Animal(new Cat) instanceof Animal         // true

instanceof也可以用来检测内置兑现,比如ArrayRegExpObjectFunction

[1, 2, 3] instanceof Array // true/abc/ instanceof RegExp // true({}) instanceof Object // true(function(){}) instanceof Function // true

instanceof对基本数据类型不起作用,因为基本数据类型没有原型链。

3 instanceof Number // falsetrue instanceof Boolean // false'abc' instanceof String // falsenull instanceof XXX  // always falseundefined instanceof XXX  // always false

但你可以这样:

new Number(3) instanceof Number // truenew Boolean(true) instanceof Boolean // truenew String('abc') instanceof String // true

但这时你已经知道数据类型了,类型检查已经没有意义了。

另外,instance还存在着跨窗口的问题

iWindow.document.write('');iWindow.arr instanceof Array            // falseiWindow.arr instanceof iWindow.Array    // true

 

3.constructor

constructor属性返回一个指向创建了该对象原型的函数引用。需要注意的是,该属性的值是那个函数本身。例如:

function Animal(){}var a = new Animala.constructor === Animal    // true

constructor不适合用来判断变量类型。首先因为它是一个属性,所以非常容易被伪造:

var a = new Animala.constructor == Arraya.constructor === Animal    // false

另外constructor指向的是最初创建当前对象的函数,是原型链最上层的那个方法:

function Cat(){}Cat.prototype = new Animalfunction BadCat(){}BadCat.prototype = new Cat(new BadCat).constructor === Animal   // trueAnimal.constructor === Function       // true

instanceof类似,constructor只能用于检测对象,对基本数据类型无能为力。 而且因为constructor是对象属性,在基本数据类型上调用会抛出TypeError异常:

null.constructor         // TypeError!undefined.constructor    // TypeError!

instanceof不同的是,在访问基本数据类型的属性时,JavaScript会自动调用其构造函数来生成一个对象。例如:

(3).constructor === Number // truetrue.constructor === Boolean // true'abc'.constructor === String // true// 相当于(new Number(3)).constructor === Number(new Boolean(true)).constructor === Boolean(new String('abc')).constructor === String

 

4.toString

toString方法是最为可靠的类型检测手段,它会将当前对象转换为字符串并输出。 toString属性定义在Object.prototype上,因而所有对象都拥有toString方法。 但ArrayDate等对象会重写从Object.prototype继承来的toString, 所以最好用Object.prototype.toString来检测类型。

toString = Object.prototype.toString;toString.call(new Date);    // [object Date]toString.call(new String);  // [object String]toString.call(Math);        // [object Math]toString.call(3);           // [object Number]toString.call([]);          // [object Array]toString.call({});          // [object Object]// Since JavaScript 1.8.5toString.call(undefined);   // [object Undefined]toString.call(null);        // [object Null]

toString也不是完美的,它无法检测用户自定义类型。 因为Object.prototype是不知道用户会创造什么类型的, 它只能检测ECMA标准中的那些内置类型。

toString.call(new Animal)   // [object Object]

因为返回值是字符串,也避免了跨窗口问题。当然IE弹窗中还是有Bug,不必管它了。

Object.prototype.toString类似地,Function.prototype.toString也有类似功能, 不过它的this只能是Function,其他类型(例如基本数据类型)都会抛出异常。

 

判断window对象:

isWindow: function(obj){    return obj && typeof obj === 'object' && "setInterval" in obj;}

 

 

转载于:https://www.cnblogs.com/shytong/p/5094626.html

你可能感兴趣的文章
组建自己的局域网(可以将PC机实现为服务器)
查看>>
jstack的使用:死锁问题实战
查看>>
Ubuntu Sublime Text 设置等宽字体
查看>>
双摆的程序实现
查看>>
Button 控件
查看>>
用游标来查找数据例子:
查看>>
不是第一次的第一篇
查看>>
正则表达式实例
查看>>
ROS 教程之 navigation :在 catkin 环境下创建costmap layer plugin
查看>>
数据类型之整型;浮点型;字符串;列表
查看>>
浏览器的get请求和post请求的区别
查看>>
GDI+用PNG图片做半透明异型窗口
查看>>
<神鬼传奇>客户端-终极优化精简方法
查看>>
Group by、having、order by、Distinct 使用注意事项
查看>>
H3C交换机配置远程管理配置
查看>>
一篇文章看懂Java并发和线程安全
查看>>
阿里巴巴电话面试记录(他人的)
查看>>
简明python教程 --C++程序员的视角(八):标准库
查看>>
nginx 网络层的优化
查看>>
HTTP与HTTPS的区别
查看>>