1.2 JS-Typeof-一一网

本系列文章是针对前端面试之道网站所做的个人注解

原文引用

typeof 对于基本类型，除了 null 都可以显示正确的类型

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof b // b 没有声明，但是还会显示 undefined
复制代码

typeof 对于对象，除了函数都会显示 object

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'
复制代码

对于 null 来说，虽然它是基本类型，但是会显示 object，这是一个存在很久了的 Bug

typeof null // 'object'
复制代码

PS：为什么会出现这种情况呢？因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。

如果我们想获得一个变量的正确类型，可以通过 Object.prototype.toString.call(xx)。这样我们就可以获得类似 [object Type] 的字符串。

let a
// 我们也可以这样判断 undefined
a === undefined
// 但是 undefined 不是保留字，能够在低版本浏览器被赋值
let undefined = 1
// 这样判断就会出错
// 所以可以用下面的方式来判断，并且代码量更少
// 因为 void 后面随便跟上一个组成表达式
// 返回就是 undefined
a === void 0
复制代码

此篇没有难懂的内容，所以下面进行一个延申，总结一下判断数据类型的几种方法。

js中判断数据类型的五种方法

通常情况下用typeof判断就可以了；遇到需要判断Object类型是否为预知类型，比如判断[]是否为Array时用instanceof或constructor；只要不嫌麻烦，prototype和jquery.type()适用所有情况。

1. 最常见的判断方法：typeof

typeof 是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。

返回该类型的字符串(全小写字母)。

对于基本类型，除 null 以外，均可以返回正确的结果。
对于引用类型，除 function 以外，一律返回 object 类型。
对于 null ，返回 object 类型。
对于 function 返回 function 类型。

typeof 1;// number
typeof true;// boolean
typeof Symbol();// symbol
typeof '';// string
typeof [];// object
typeof undefined;// undefined
typeof Function();// function
复制代码

2. 判断已知对象类型的方法：instanceof

instanceof 是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。在这里需要特别注意的是：instanceof 检测的是原型，原型相关知识可移步：wwwwwwwwwwww，instanceof 只能用来判断两个对象是否属于实例关系（会沿着原型链向上找，只要找到，就会返回true），而不能判断一个对象实例具体属于哪种类型。我们用一段伪代码来模拟其内部执行过程：

instanceof (A,B) = {
    varL = A.__proto__;
    varR = B.prototype;
    if(L === R) {
        // A的内部属性 __proto__ 指向 B 的原型对象
        return true;
    }
    return false;
}
复制代码

instanceof 后面一定要是对象类型，并且大小写不能错。返回true/false。

[] instanceof Array;// true
{} instanceof Object;// true
newDate() instanceof Date;// true
 
function Person(){};
newPerson() instanceof Person;
 
[] instanceof Object;// true
newDate() instanceof Object;// true
newPerson instanceof Object;// true
复制代码

3. 根据对象的constructor判断： constructor

var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
c.constructor === Array;// true
d.constructor === Date;// true
e.constructor === Function;// true
复制代码

4. 繁琐但很通用的方法：Object.prototype.toString.call()

（）内写入待判断类型的数据，以类似"[object String]"的字符串形式返回对应类型。

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(newFunction()) ;// [object Function]
Object.prototype.toString.call(newDate()) ;// [object Date]
Object.prototype.toString.call([]) ;// [object Array]
Object.prototype.toString.call(newRegExp()) ;// [object RegExp]
Object.prototype.toString.call(newError()) ;// [object Error]
Object.prototype.toString.call(document) ;// [object HTMLDocument]
Object.prototype.toString.call(window) ;//[object global] window 是全局对象 global 的引用
复制代码

5. 无敌万能的方法：jquery.type()

（）内写入待判断类型的数据，返回对应类型的小写字符串。

jQuery.type( undefined );// "undefined"
jQuery.type();// "undefined"
jQuery.type( window.notDefined );// "undefined"
jQuery.type( null );// "null"
jQuery.type( true );// "boolean"
jQuery.type( 3 );// "number"
jQuery.type( "test" );// "string"
jQuery.type( function(){} );// "function"
jQuery.type( [] );// "array"
jQuery.type( new Date() );// "date"
jQuery.type( new Error() );// "error" // as of jQuery 1.9
jQuery.type( /test/ );// "regexp"
其他一切都将返回它的类型“object”。
复制代码