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

          }

          ........

    }