如何检测JavaScript的各种类型

2019-11-20 09:22:45

字体：大中小

来源：转载

供稿：网友

一、先介绍下5种原始类型

JavaScript中5种原始类型为string，number，boolean，undefined，null

var name = "Jack";var age = 32;var single = false;var app;  //undefinedconsole.log(typeof name);  //stringconsole.log(typeof age);  //numberconsole.log(typeof single); //booleanconsole.log(typeof app);  //undefinedconsole.log(typeof null);  //object

发现除null外的其他4种基本类型均可以用typeof来识别：

if(typeof name === "string") { name += "Zhang"; }if(typeof age === "number") { age++; }if(typeof single === "boolean" && single) { … }if(typeof app === "undefined") { app = {}; }

因为typeof null会得到object，所以直接用===来检测null：

if(el === null) { … }

二、对象

JavaScript的对象包括内置对象（Date，RegExp ，Error等）和自定义对象。

（注意，Function和Array虽然也都是内置对象，但下一节单独讲）

对象不能像基本类型那样用typeof来检测了，因为检测出来的结果都是object：

console.log(typeof new Date());  //objectconsole.log(typeof new RegExp()); //objectconsole.log(typeof new Error());  //objectconsole.log(typeof new Person()); //用typeof检测出自定义对象也是object

要改用instanceof来检测：

var date = new Date();var reg = new RegExp();var err = new Error();var me = new Person();if(date instanceof Date) {  //检测日期  year = date.getFullYear(); }if(reg instanceof RegExp) {  //检测正则表达式  reg.test(...); }if(err instanceof Error) {  //检测异常  throw err; }if(me instanceof Person) {  //检测自定义对象  ... }

但自定义对象有个问题，假设浏览器frameA里和frameB里都定义了Person。 frameA里定义了me对象，用me instanceof Person检测出来为true。但当自定义对象me传给frameB后，在frameB里instanceof会是false。

本节一开头就说了，Function和Array虽然也都是内置对象，但留到下一节讲。原因就是Function和Array也有和自定义对象相同的上述问题。因此Function和Array一般不用instanceof

三、Function

上面说了用instanceof检测Function不能跨frame。因此用typeof来检测，它可跨frame：

var func = function(){};if(typeof func === 'function') { … }

但IE8以前用typeof来检测DOM系函数会得到object，因此IE8以前改用in：

console.log(typeof document.getElementById);    //object，不是functionconsole.log(typeof document.getElementsByTagName); //object，不是functionconsole.log(typeof document.createElement);     //object，不是function//IE8以前的IE浏览器，要改用in来检测是否支持DOM函数if("getElementById" in document) { … }    if("getElementsByTagName" in document) { … }if("createElement" in document) { … }

四、Array

上面说了用instanceof检测Array不能跨frame。ES5之前都自定义检测方法。其中最精确的方法：依赖Array的toString会返回固定字符串”[Object Array]”的事实来检测：

function isArray(arr) {  return Object.prototype.toString.call(arr) === "[Object Array]";}

该方法精确且优雅，因此被很多库所采纳，最终在ES5被作为isArray方法引入了Array，参照MDN。现在你不需要自定义检测方法了，直接用isArray()即可。

其他检测方法，都各有缺陷，不能100%精确。但作为一种思路是可以借鉴的。例如依赖Array是唯一包含sort方法的对象的事实来检测：

function isArray(arr) {  return typeof arr.sort === "function";}

如果是自定义对象也定义了sort方法，该方法就失效了。

五、属性

检测属性是否在实例对象中应该用hasOwnProperty。如果你不关心属性是在实例对象中还是在原型对象中，可以简单点用in

例如检测字面量对象属性：

var Person = {  name: "Jack",  age: 33};if("name" in Person) { … }         //trueif(Person.hasOwnProperty("name")) { … }  //true

例如实例对象属性：

var Person = function (name, age) {  this.name = name;  this.age = age;};Person.prototype.location = "Shanghai";var me = new Person("Jack", 33)if("name" in me) { … }         //trueif(me.hasOwnProperty("name")) { … }  //trueif("location" in me) { … }       //trueif(me.hasOwnProperty("location")) { … }//false

除此之外其他方法都不好：

if (object[propName])      //Not Good，你怎么知道属性值不是0或1？if (object[propName] === null)    //Not Good，你怎么知道属性值不是null？if (object[propName] === undefined)  //Not Good，你怎么知道属性值不是undefined？

总结

用typeof检测string，number，boolean，undefined，Function

用===检测null

用isArray()检测Array

用instanceof检测内置对象（除Function和Array）和自定义对象

用hasOwnProperty检测属性是否在实例对象中。如果你不关心属性是在实例对象中还是在原型对象中，可以简单点用in

好了，本篇介绍如何检测JavaScript各种类型的内容就到这里了，希望大家能够认真学习本文的内容，或许对大家学习JavaScript有所帮助。

上一篇：AngularJS ng-app 指令实例详解

下一篇：详解js中的apply与call的用法