javascript中对变量类型的推断

本文正式地址：http://www.xiabingbao.com/javascript/2015/07/04/javascript-type

在JavaScript中，有5种基本数据类型和1种复杂数据类型，基本数据类型有：Undefined, Null, Boolean, Number和String。复杂数据类型是Object。Object中还细分了非常多详细的类型，比方：Array, Function, Date等等。今天我们就来探讨一下，使用什么方法推断一个出一个变量的类型。

在解说各种方法之前。我们首先定义出几个測试变量，看看后面的方法到底能把变量的类型解析成什么样子，以下几个变量差点儿相同包括了我们在实际编码中经常使用的类型。

var num  = 123;
var str  = 'abcdef';
var bool = true;
var arr  = [1, 2, 3, 4];
var json = {name:'wenzi', age:25};
var func = function(){ console.log('this is function'); }
var und  = undefined;
var nul  = null;
var date = new Date();
var reg  = /^[a-zA-Z]{5,20}$/;
var error= new Error();

1. 使用typeof检測

我们平时用的最多的就是用typeof检測变量类型了。

这次，我们也使用typeof检測变量的类型：

console.log(
    typeof num, 
    typeof str, 
    typeof bool, 
    typeof arr, 
    typeof json, 
    typeof func, 
    typeof und, 
    typeof nul, 
    typeof date, 
    typeof reg, 
    typeof error
);
// number string boolean object object function undefined object object object object

从输出的结果来看，arr, json, nul, date, reg, error 全部被检測为object类型。其它的变量能够被正确检測出来。当须要变量是否是number, string, boolean, function, undefined, json类型时。能够使用typeof进行推断。其它变量是推断不出类型的，包括null。

还有。typeof是区分不出array和json类型的。由于使用typeof这个变量时，array和json类型输出的都是object。

2. 使用instance检測

在 JavaScript 中，推断一个变量的类型尝尝会用 typeof 运算符。在使用 typeof 运算符时採用引用类型存储值会出现一个问题，不管引用的是什么类型的对象，它都返回 “object”。ECMAScript 引入了还有一个 Java 运算符 instanceof 来解决问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。

与 typeof 方法不同的是，instanceof 方法要求开发人员明白地确认对象为某特定类型。

比如：

function Person(){

}
var Tom = new Person();
console.log(Tom instanceof Person); // true

我们再看看以下的样例：

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John instanceof Student); // true
console.log(John instancdof Person);  // true

instanceof还能检測出多层继承的关系。

好了。我们来使用instanceof检測上面的那些变量：

console.log(
    num instanceof Number,
    str instanceof String,
    bool instanceof Boolean,
    arr instanceof Array,
    json instanceof Object,
    func instanceof Function,
    und instanceof Object,
    nul instanceof Object,
    date instanceof Date,
    reg instanceof RegExp,
    error instanceof Error
)
// num : false 
// str : false 
// bool : false 
// arr : true 
// json : true 
// func : true 
// und : false 
// nul : false 
// date : true 
// reg : true 
// error : true

从上面的执行结果我们能够看到，num, str和bool没有检測出他的类型，可是我们使用以下的方式创建num，是能够检測出类型的：

var num = new Number(123);
var str = new String('abcdef');
var boolean = new Boolean(true);

同一时候，我们也要看到，und和nul是检測的Object类型，才输出的true，由于js中没有Undefined和Null的这样的全局类型，他们und和nul都属于Object类型，因此输出了true。

3. 使用constructor检測

在使用instanceof检測变量类型时。我们是检測不到number, ‘string’, bool的类型的。

因此，我们须要换一种方式来解决问题。

constructor本来是原型对象上的属性，指向构造函数。可是根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，因此，实例对象也是能使用constructor属性的。

我们先来输出一下num.constructor的内容，即数字类型的变量的构造函数是什么样子的：

function Number() { [native code] }

我们能够看到它指向了Number的构造函数。因此，我们能够使用num.constructor==Number来推断num是不是Number类型的。其它的变量也相似：

function Person(){

}
var Tom = new Person();

// undefined和null没有constructor属性
console.log(
    Tom.constructor==Person,
    num.constructor==Number,
    str.constructor==String,
    bool.constructor==Boolean,
    arr.constructor==Array,
    json.constructor==Object,
    func.constructor==Function,
    date.constructor==Date,
    reg.constructor==RegExp,
    error.constructor==Error
);
// 全部结果均为true

从输出的结果我们能够看出，除了undefined和null。其它类型的变量均能使用constructor推断出类型。

不过使用constructor也不是保险的，由于constructor属性是能够被改动的，会导致检測出的结果不对，比如：

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John.constructor==Student); // false
console.log(John.constructor==Person);  // true

在上面的样例中，Student原型中的constructor被改动为指向到Person，导致检測不出实例对象John真实的构造函数。

同一时候，使用instaceof和construcor,被推断的array必须是在当前页面声明的！比方。一个页面（父页面）有一个框架，框架中引用了一个页面（子页面），在子页面中声明了一个array，并将其赋值给父页面的一个变量。这时推断该变量。Array == object.constructor;会返回false； 
原因： 
1、array属于引用型数据。在传递过程中。不过引用地址的传递。 
2、每一个页面的Array原生对象所引用的地址是不一样的，在子页面声明的array，所相应的构造函数。是子页面的Array对象。父页面来进行推断，使用的Array并不等于子页面的Array。切记。不然非常难跟踪问题！

4. 使用Object.prototype.toString.call

我们先不管这个是什么，先来看看他是怎么检測变量类型的：

console.log(
    Object.prototype.toString.call(num),
    Object.prototype.toString.call(str),
    Object.prototype.toString.call(bool),
    Object.prototype.toString.call(arr),
    Object.prototype.toString.call(json),
    Object.prototype.toString.call(func),
    Object.prototype.toString.call(und),
    Object.prototype.toString.call(nul),
    Object.prototype.toString.call(date),
    Object.prototype.toString.call(reg),
    Object.prototype.toString.call(error)
);
// '[object Number]' '[object String]' '[object Boolean]' '[object Array]' '[object Object]'
// '[object Function]' '[object Undefined]' '[object Null]' '[object Date]' '[object RegExp]' '[object Error]'

从输出的结果来看，Object.prototype.toString.call(变量)输出的是一个字符串，字符串里有一个数组，第一个參数是Object，第二个參数就是这个变量的类型，并且，全部变量的类型都检測出来了，我们只须要取出第二个參数就可以。

或者能够使用Object.prototype.toString.call(arr)=="object Array"来检測变量arr是不是数组。

我们如今再来看看ECMA里是是怎么定义Object.prototype.toString.call的：

Object.prototype.toString( ) When the toString method is called, the following steps are taken: 
1. Get the [[Class]] property of this object. 
2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”. 
3. Return Result (2)

上面的规范定义了Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后根据这个属性，返回一个相似于”[object Array]”的字符串作为结果（看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接訪问的属性。称为“内部属性”）。利用这种方法，再配合call，我们能够取得不论什么对象的内部属性[[Class]]。然后把类型检測转化为字符串比較，以达到我们的目的。

5. jquery中$.type的实现

在jquery中提供了一个$.type的接口，来让我们检測变量的类型：

console.log(
    $.type(num),
    $.type(str),
    $.type(bool),
    $.type(arr),
    $.type(json),
    $.type(func),
    $.type(und),
    $.type(nul),
    $.type(date),
    $.type(reg),
    $.type(error)
);
// number string boolean array object function undefined null date regexp error

看到输出结果，有没有一种熟悉的感觉？对，他就是上面使用Object.prototype.toString.call(变量)输出的结果的第二个參数呀。

我们这里先来对照一下上面全部方法检測出的结果，横排是使用的检測方法， 竖排是各个变量：

这样对照一下，就更能看到各个方法之间的差别了，并且Object.prototype.toString.call和$type输出的结果真的非常像。我们来看看jquery（2.1.2版本号）内部是怎么实现$.type方法的：

// 实例对象是能直接使用原型链上的方法的
var class2type = {};
var toString = class2type.toString;

// 省略部分代码...

type: function( obj ) {
    if ( obj == null ) {
        return obj + "";
    }
    // Support: Android<4.0, iOS<6 (functionish RegExp)
    return (typeof obj === "object" || typeof obj === "function") ?
        (class2type[ toString.call(obj) ] || "object") :
        typeof obj;
},

// 省略部分代码... 

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

我们先来看看jQuery.each的这部分：

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

//循环之后，`class2type`的值是： 
class2type = {
    '[object Boolean]' : 'boolean', 
    '[object Number]'  : 'number',
    '[object String]'  : 'string',
    '[object Function]': 'function',
    '[object Array]'   : 'array',
    '[object Date]'    : 'date',
    '[object RegExp]'  : 'regExp',
    '[object Object]'  : 'object',
    '[object Error]'   : 'error'
}

再来看看type方法：

// type的实现
type: function( obj ) {
    // 若传入的是null或undefined。则直接返回这个对象的字符串
    // 即若传入的对象obj是undefined。则返回"undefined"
    if ( obj == null ) {
        return obj + "";
    }
    // Support: Android<4.0, iOS<6 (functionish RegExp)
    // 低版本号regExp返回function类型；高版本号已修正，返回object类型
    // 若使用typeof检測出的obj类型是object或function。则返回class2type的值，否则返回typeof检測的类型
    return (typeof obj === "object" || typeof obj === "function") ?
        (class2type[ toString.call(obj) ] || "object") :
        typeof obj;
}

当typeof obj === "object" || typeof obj === "function"时，就返回class2type[ toString.call(obj)。

到这儿，我们就应该明白为什么Object.prototype.toString.call和$.type那么像了吧，事实上jquery中就是用Object.prototype.toString.call实现的。把’[object Boolean]’类型转成’boolean’类型并返回。若class2type存储的没有这个变量的类型，那就返回”object”。 
除了”object”和”function”类型。其它的类型则使用typeof进行检測。即number, string, boolean类型的变量，使用typeof就可以。

本文正式地址：http://www.xiabingbao.com/javascript/2015/07/04/javascript-type

本文转自mfrbuaa博客园博客，原文链接：http://www.cnblogs.com/mfrbuaa/p/5202979.html，如需转载请自行联系原作者