jQuery源代码学习_工具函数_type
jquery源代码学习_工具函数_type
jquery里面有一个很重要的工具函数，$.type函数用来判断类型，今天写这篇文章，是来回顾type函数的设计思想，深入理解。
首先来看一下最终结果：
上面的源代码乍一看似乎艰涩难懂，有点抽象，毕竟是前辈心血之作，深深佩服。对我们初学者，可以从简单入手，来一步一步深化，得到最终的优化方案。
第一个版本
在看《JavaScript高级程序设计》这本书时候，书上提到typeof，typeof可以判断function，number ，undefined， string， boolean但是用typeof 判断null会返回object，而用typeof判断object返回object，且对于任意的系统对象，比如Regexp,Date,Array等，并不能很好区分。
也就是说：不是object类型的可以使用typeof判断；而对于其他引用类型，我们使用Object.protype.toString。所以可以得到第一个版本的代码如下：
function type(obj) {
if (typeof obj !== 'object') {
return typeof obj;
}
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
对于一些系统对象，用到slice（8，-1），省略了前缀"[object "。不然我们会得到这样结果：
问题
这个函数不能处理type(document.createElement('div'))这样的情况。示例如下：
显然：实际上应该是object类型，而htmldivelement并不是JavaScript数据类型，而是一个DOM的数据类型。
第二个版本
吸取第一个版本的教训，也就是说类型的判断不是盲目的，判断的结果应该在我们所掌握的JavaScript几种数据类型里，那么是哪几种类型呢？除了基本的值类型5种，引用类型Object，还包括Function Array Date RegExp Error一共有11种，因此进一步优化的结果应该是：我们判断的类型取自于以上11种类型里面的任意一个。经常分析处理，我们得到第二个版本的代码如下：
var class2type = 'Boolean Number String Null Undefined Function Array Date RegExp Object Error';
function type(obj) {
if (typeof obj !== 'object') {
return typeof obj;
}
var sliced = Object.prototype.toString.call(obj).slice(8, -1);
return class2type.indexOf(sliced) >= 0 ? sliced.toLowerCase() : 'object';
}
显然我们第一个版本的问题已经解决了。indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。
问题
计算量大，每判断一次都要用一个slice、一个indexOf、一个toLowerCase
第三个版本
很明显我们规避使用indexOf方法，把所有的类型结果用对象字面量的方式表现出来，其中key是Object.prototype.toString的计算结果，value是type结果，因此我们可以得到第三个版本的代码如下：
var class2type = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regexp',
'[object Object]': 'object',
'[object Error]': 'error'
};
function type(obj) {
if (typeof obj !== 'object') {
return typeof obj;
}
return class2type[Object.prototype.toString.call(obj)] || 'object';
}
这里用class2type来缓存类型判断的结果。
缺点
这个对象里面全部是字符串，没有办法进行压缩。
第四个版本
借鉴第3种方法的缺陷，我们不用字面量的形式，采用split方法，用空格分隔开类型。
var class2type = {};
var arr = 'Boolean Number String Function Array Null Undefined Date RegExp Object Error'.split(' ');
for (var i = 0, l = arr.length; i < l; i++) {
class2type['[object ' + arr[i] + ']'] = arr[i].toLowerCase();
}
function type(obj) {
if (typeof obj !== 'object') {
return typeof obj;
}
return class2type[Object.prototype.toString.call(obj)] || 'object';
}
这样就不需要枚举所有的类型了，如果需要做额外的判断，只要在字符串中加一个单词就可以了。
第五个版本
继续优化，减少代码量，更高效的方法是用到正则表达式，来匹配每一种类型，它们之间用空格隔开。（据说是司徒正美大神倡导的方法，果然厉害，哇）
var class2type = {};
// 利用replace减少使用for循环，同时可以简化代码
'Boolean Number String Function Undefined Null Array Date RegExp Object Error'.replace(/\w+/g, function (name) {
class2type['[object ' + name + ']'] = name.toLowerCase();
});
function type(obj) {
if (typeof obj !== 'object') {
return typeof obj;
}
return class2type[class2type.toString.call(obj)] || 'object';
}
这样，层层递进，就得到我们伟大的jQuery type源代码啦，是不是很开心呢！
