JavaScript專題系列第四篇,講解類型判斷的各類方法,而且跟着 jQuery 寫一個 type 函數。jquery
類型判斷在 web 開發中有很是普遍的應用,簡單的有判斷數字仍是字符串,進階一點的有判斷數組仍是對象,再進階一點的有判斷日期、正則、錯誤類型,再再進階一點還有好比判斷 plainObject、空對象、Window 對象等等。git
以上都會講,今天是上半場。github
咱們最最經常使用的莫過於 typeof,注意,儘管咱們會看到諸如:web
console.log(typeof('yayu')) // string複製代碼
的寫法,可是 typeof 但是一個正宗的運算符,就跟加減乘除同樣!這就能解釋爲何下面這種寫法也是可行的:api
console.log(typeof 'yayu') // string複製代碼
引用《JavaScript權威指南》中對 typeof 的介紹:數組
typeof 是一元操做符,放在其單個操做數的前面,操做數能夠是任意類型。返回值爲表示操做數類型的一個字符串。函數
那咱們都知道,在 ES6 前,JavaScript 共六種數據類型,分別是:ui
Undefined、Null、Boolean、Number、String、Object this
然而當咱們使用 typeof 對這些數據類型的值進行操做的時候,返回的結果卻不是一一對應,分別是:es5
undefined、object、boolean、number、string、object
注意以上都是小寫的字符串。Null 和 Object 類型都返回了 object 字符串。
儘管不能一一對應,可是 typeof 卻能檢測出函數類型:
function a() {}
console.log(typeof a); // function複製代碼
因此 typeof 能檢測出六種類型的值,可是,除此以外 Object 下還有不少細分的類型吶,如 Array、Function、Date、RegExp、Error 等。
若是用 typeof 去檢測這些類型,舉個例子:
var date = new Date();
var error = new Error();
console.log(typeof date); // object
console.log(typeof error); // object複製代碼
返回的都是 object 吶,這可怎麼區分~ 因此有沒有更好的方法呢?
是的,固然有!這就是 Object.prototype.toString!
那 Object.protototype.toString 到底是一個什麼樣的方法呢?
爲了更加細緻的講解這個函數,讓我先獻上 ES5 規範地址:es5.github.io/#x15.2.4.2。
在第 15.2.4.2 節講的就是 Object.prototype.toString(),爲了避免誤導你們,我先奉上英文版:
When the toString method is called, the following steps are taken:
- If the this value is undefined, return "[object Undefined]".
- If the this value is null, return "[object Null]".
- Let O be the result of calling ToObject passing the this value as the argument.
- Let class be the value of the [[Class]] internal property of O.
- Return the String value that is the result of concatenating the three Strings "[object ", class, and "]".
凡是規範上加粗或者斜體的,在這裏我也加粗或者斜體了,就是要讓你們感覺原汁原味的規範!
若是沒有看懂,就不妨看看我理解的:
當 toString 方法被調用的時候,下面的步驟會被執行:
經過規範,咱們至少知道了調用 Object.prototype.toString 會返回一個由 "[object " 和 class 和 "]" 組成的字符串,而 class 是要判斷的對象的內部屬性。
讓咱們寫個 demo:
console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
console.log(Object.prototype.toString.call(null)) // [object Null]
var date = new Date();
console.log(Object.prototype.toString.call(date)) // [object Date]複製代碼
由此咱們能夠看到這個 class 值就是識別對象類型的關鍵!
正是由於這種特性,咱們能夠用 Object.prototype.toString 方法識別出更多類型!
那到底能識別多少種類型呢?
至少 12 種!
你咋知道的?
我數的!
……
讓咱們看個 demo:
// 如下是11種:
var number = 1; // [object Number]
var string = '123'; // [object String]
var boolean = true; // [object Boolean]
var und = undefined; // [object Undefined]
var nul = null; // [object Null]
var obj = {a: 1} // [object Object]
var array = [1, 2, 3]; // [object Array]
var date = new Date(); // [object Date]
var error = new Error(); // [object Error]
var reg = /a/g; // [object RegExp]
var func = function a(){}; // [object Function]
function checkType() {
for (var i = 0; i < arguments.length; i++) {
console.log(Object.prototype.toString.call(arguments[i]))
}
}
checkType(number, string, boolean, und, nul, obj, array, date, error, reg, func)複製代碼
除了以上 11 種以外,還有:
console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(JSON)); // [object JSON]複製代碼
除了以上 13 種以外,還有:
function a() {
console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}
a();複製代碼
因此咱們能夠識別至少 14 種類型,固然咱們也能夠算出來,[[class]] 屬性至少有 12 個。
既然有了 Object.prototype.toString 這個神器!那就讓咱們寫個 type 函數幫助咱們之後識別各類類型的值吧!
個人設想:
寫一個 type 函數能檢測各類類型的值,若是是基本類型,就使用 typeof,引用類型就使用 toString。此外鑑於 typeof 的結果是小寫,我也但願全部的結果都是小寫。
考慮到實際狀況下並不會檢測 Math 和 JSON,因此去掉這兩個類型的檢測。
咱們來寫一版代碼:
// 初版
var class2type = {};
// 生成class2type映射
"Boolean Number String Function Array Date RegExp Object Error Null Undefined".split(" ").map(function(item, index) {
class2type["[object " + item + "]"] = item.toLowerCase();
})
function type(obj) {
return typeof obj === "object" || typeof obj === "function" ?
class2type[Object.prototype.toString.call(obj)] || "object" :
typeof obj;
}複製代碼
嗯,看起來很完美的樣子~~ 可是注意,在 IE6 中,null 和 undefined 會被 Object.prototype.toString 識別成 [object Object]!
我去,居然還有這個兼容性!有什麼簡單的方法能夠解決嗎?那咱們再改寫一版,絕對讓你驚豔!
// 第二版
var class2type = {};
// 生成class2type映射
"Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item, index) {
class2type["[object " + item + "]"] = item.toLowerCase();
})
function type(obj) {
// 一舉兩得
if (obj == null) {
return obj + "";
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[Object.prototype.toString.call(obj)] || "object" :
typeof obj;
}複製代碼
有了 type 函數後,咱們能夠對經常使用的判斷直接封裝,好比 isFunction:
function isFunction(obj) {
return type(obj) === "function";
}複製代碼
jQuery 判斷數組類型,舊版本是經過判斷 Array.isArray 方法是否存在,若是存在就使用該方法,不存在就使用 type 函數。
var isArray = Array.isArray || function( obj ) {
return type(obj) === "array";
}複製代碼
可是在 jQuery v3.0 中已經徹底採用了 Array.isArray。
到此,類型判斷的上篇就結束了,咱們已經能夠判斷日期、正則、錯誤類型啦,可是還有更復雜的判斷好比 plainObject、空對象、Window對象、類數組對象等,路漫漫其修遠兮,吾將上下而求索。
哦, 對了,這個 type 函數抄的 jQuery,點擊查看 type 源碼。
JavaScript專題系列目錄地址:github.com/mqyqingfeng…。
JavaScript專題系列預計寫二十篇左右,主要研究平常開發中一些功能點的實現,好比防抖、節流、去重、類型判斷、拷貝、最值、扁平、柯里、遞歸、亂序、排序等,特色是研(chao)究(xi) underscore 和 jQuery 的實現方式。
若是有錯誤或者不嚴謹的地方,請務必給予指正,十分感謝。若是喜歡或者有所啓發,歡迎 star,對做者也是一種鼓勵。