JS中类型检测的几种方法以及各自的适用范围
JavaScript的数据类型
首先先说一下JavaScript中的几种类型,JavaScript定义了null、undefined、布尔值、数字、字符串、对象等几种数据类型,其中前5个是JavaScript的原始类型。
JavaScript中类型检测的几种方法为:
typeof
instanceof
constructor
duck type(鸭子类型)
1.typeof
typeof 返回字符串,适用于函数对象和基本类型的判断(注:遇到null失效),各种类型的返回值见下图
typeof 1 | "number" |
typeof true | "boolean" |
typeof function | "function" |
typeof [3,4,5] | "object" |
typeof new Object() | "object" |
typeof NaN | "number" |
typeof undefined | "undefined" |
typeof null | "object" |
不适用的范围:typeof null 返回 "object",所以typeof不适合判断null。
如何判断一个对象是否是null呢?可以使用 obj === null,3个等于号,使用严格等于。
2. instanceof
instanceof 是一个二元操作符,左边是要判断的对象,右边是函数对象或者构造器
instanceof是基于原型链进行判断,判断左边的原型链上是否有右边的类型(有点类似于java 中的instanceof)
<span style="font-size:18px;">function Animal() {}
function Dog() {}
// Dog继承于Animal
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
var dog = new Dog();
console.log(dog instanceof Dog); // true dog直接用Dog初始化,所以为真
var cat = new Animal();
console.log(cat instanceof Animal); // true cat直接用Animal初始化,所以为真
console.log(cat instanceof Dog); //false
console.log(dog instanceof Animal); //true
</span>
在判断dog是否是Animal类型时,dog对象有一个原型_proto_,该原型会指向其构造器 Dog 的_proto_,但是Animal不等于Dog,所以该原型链会继续向上查找,Dog的_proto_指向了Animal,所以最终dog instanceof Animal 返回true
不适用的范围:在多窗口和多框架的子页面的web应用中兼容性不好。
原因:在两个不同框架页面创建的两个相同的对象继承与两个相同但互相独立的原型对象(例如:创建两个数组),其中一个框架页面中的数组不是另一个框架页面中的Array()构造函数的实例,instanceof 运算结果返回false。
3.constructor
不适用范围:①不适合判断null和undefined,因为没有contructor属性
②contructor可能被改写
③和instanceof类型,在多窗口和多框架下无法工作
④并非所有的对象都包含contructor 属性
contructor的使用如下
var x=1; x.constructor | Number |
var x=true; x.constructor | Boolean |
var x = function(){};x.constructor | Function |
var x='string';x.constructor | String |
null和undefined没有constructor |
4.duck type
不要关注对象的类是什么,而是关注对象能做什么。
例如,我们在判断一个对象是否是Array的实例的时候,可以通过判断对象是否含有一个非负的length属性来判断,这是一个必要非充分条件。