正文
javascript关键字typeof、instanceof、constructor判断类型
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
鉴于 ECMAScript 是松散类型的，因此需要有一种手段来检测给定变量的数据类型。对于这个问题，JavaScript 也提供了多种方法，但遗憾的是，不同的方法得到的结果参差不齐。
下面介绍常用的几种方法，并对各个方法存在的问题进行简单的分析
1.typeof返回的是类型名包括以下 7 种：number、boolean、symbol、string、object、undefined、function 等，(array,null除外)
typeof ''; // string 有效
typeof 1; // number 有效
typeof Symbol(); // symbol 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof null; //object 无效
typeof [] ; //object 无效
typeof new Function(); // function 有效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效
2.instanceof返回值真则返回true,否则返回 false
[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
[] instanceof Object; //true
var num=123;
document.write(num instanceof Number); //false
document.write(typeof str2) //true
var num=new Number(123);
document.write(num instanceof Number); //true
我们发现，虽然 instanceof 能够判断出 [ ] 是Array的实例，但它认为 [ ] 也是Object的实例
3.constructor 默认返回的是类型（三者中最好的）
let str="abcd";
str.constructor //返回值：function String() { [native code] }
''.constructor == String //true
new Number(1).constructor == Number //true
new Function().constructor == Function //true
true.constructor == Boolean //true
new Date().constructor == Date //true new Error().constructor == Error //true
[].constructor == Array //true
document.constructor == HTMLDocument //true
window.constructor == window //false
console.log('abc'.constructor)
ƒ String() { [native code] }
console.log([].constructor)
ƒ Array() { [native code] }
//可以通过截取字符串拿到类型关键字进行判断
利用字符串截取获取构造函数名称
<script type="text/javascript">
function Fn(){}
var obj = new Fn();//创建构造函数
document.write( obj.constructor === Fn ); // true 对象的constructor属性描述的就是其构造函数var str = ''+obj.constructor;
var str1 = str.replace('function','|');
var startIndex = str1.indexOf('|');
var endIndex = str1.indexOf('(');
if( startIndex != -1 && endIndex != -1 ){
var name = str1.slice( startIndex+2,endIndex );
alert(name); //Fn
}</script>
4.toString
toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。
对于 Object 对象，直接调用 toString() 就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。
Object.prototype.toString.call('') ; // [object String]
Object.prototype.toString.call(1) ; // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用
5.原生原型扩展函数
接下来我们就用到另外一个利器：return Object.prototype.toString.call(arr); 这是对象的一个原生原型扩展函数,用来更精确的区分数据类型。 我们来试试这个玩儿意儿： var gettype=Object.prototype.toString gettype.call('aaaa') 输出 [object String] gettype.call(2222) 输出 [object Number] gettype.call(true) 输出 [object Boolean] gettype.call(undefined) 输出 [object Undefined] gettype.call(null) 输出 [object Null] gettype.call({}) 输出 [object Object] gettype.call([]) 输出 [object Array]
gettype.call(function(){}) 输出 [object Function] 看到这里，刚才的问题我们解决了
gettype封装的方法如下 ： var gettype=Object.prototype.toString var utility={ isObj:function(o){ return gettype.call(o)=="[object Object]"; }, isArray:function(o){ return gettype.call(o)=="[object Array]"; }, isNULL:function(o){ return gettype.call(o)=="[object Null]"; }, isDocument:function(){ return gettype.call(o)=="[object Document]"|| [object HTMLDocument]; } ........ }
