資訊專欄INFORMATION COLUMN
摘要：最近開(kāi)始看源碼，并將源碼解讀放在了我的計(jì)劃中。今天就跟大家聊一聊中一些常用類型檢查方法，以及一些工具類的判斷方法。用是否含有屬性來(lái)判斷工具類判斷方法接下來(lái)看下一些常用的工具類判斷方法。
Why underscore
最近開(kāi)始看 underscore.js 源碼，并將 underscore.js 源碼解讀 放在了我的 2016 計(jì)劃中。
閱讀一些著名框架類庫(kù)的源碼，就好像和一個(gè)個(gè)大師對(duì)話，你會(huì)學(xué)到很多。為什么是 underscore？最主要的原因是 underscore 簡(jiǎn)短精悍（約 1.5k 行），封裝了 100 多個(gè)有用的方法，耦合度低，非常適合逐個(gè)方法閱讀，適合樓主這樣的 JavaScript 初學(xué)者。從中，你不僅可以學(xué)到用 void 0 代替 undefined 避免 undefined 被重寫(xiě)等一些小技巧 ，也可以學(xué)到變量類型判斷、函數(shù)節(jié)流&函數(shù)去抖等常用的方法，還可以學(xué)到很多瀏覽器兼容的 hack，更可以學(xué)到作者的整體設(shè)計(jì)思路以及 API 設(shè)計(jì)的原理（向后兼容）。
之后樓主會(huì)寫(xiě)一系列的文章跟大家分享在源碼閱讀中學(xué)習(xí)到的知識(shí)。
underscore-1.8.3 源碼全文注釋 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/underscore-1.8.3-analysis.js
underscore-1.8.3 源碼解讀項(xiàng)目地址 https://github.com/hanzichi/underscore-analysis
underscore-1.8.3 源碼解讀系列文章 https://github.com/hanzichi/underscore-analysis/issues
歡迎圍觀~ （如果有興趣，歡迎 star & watch~）您的關(guān)注是樓主繼續(xù)寫(xiě)作的動(dòng)力
類型判斷第一篇跟大家簡(jiǎn)單地聊了下為什么 underscore.js 用 void 0 代替了 undefined，意外地收到了不錯(cuò)的反響，有朋友私信我說(shuō)以前還真不知道這回事，也有人催促我趕緊繼續(xù)下一篇解讀文章。今天就跟大家聊一聊 underscore.js 中一些 JavaScript 常用類型檢查方法，以及一些工具類的判斷方法。
我們先說(shuō)個(gè)老生常談的問(wèn)題，JavaScript 中數(shù)組類型的判斷方法，事實(shí)上，我在 Javascript中判斷數(shù)組的正確姿勢(shì) 一文中已經(jīng)詳細(xì)分析了各種判斷方式的優(yōu)缺點(diǎn)，并給出了正確的判斷代碼：
function isArray(a) {
Array.isArray ? Array.isArray(a) : Object.prototype.toString.call(a) === "[object Array]";
}
而 underscore 其實(shí)也正是這么做的：
// Is a given value an array?
// Delegates to ECMA5"s native Array.isArray
// 判斷是否為數(shù)組
_.isArray = nativeIsArray || function(obj) {
return toString.call(obj) === "[object Array]";
};
nativeIsArray 正是 ES5 中 Array.isArray 方法，如果支持則優(yōu)先調(diào)用；而 toString 變量就保存了 Object.prototype.toString。
如何判斷對(duì)象？underscore 把類型為 function 和 object 的變量都算作對(duì)象，當(dāng)然得除去 null。
// Is a given variable an object?
// 判斷是否為對(duì)象
// 這里的對(duì)象包括 function 和 object
_.isObject = function(obj) {
var type = typeof obj;
return type === "function" || type === "object" && !!obj;
};
再看 "Arguments", "Function", "String", "Number", "Date", "RegExp", "Error" 這些類型的判斷，其實(shí)都可以用 Object.prototype.toString.call 來(lái)判斷，所以寫(xiě)在了一起：
// Add some isType methods: isArguments, isFunction, isString, isNumber, isDate, isRegExp, isError.
// 其他類型判斷
_.each(["Arguments", "Function", "String", "Number", "Date", "RegExp", "Error"], function(name) {
_["is" + name] = function(obj) {
return toString.call(obj) === "[object " + name + "]";
};
});
但是看 isArguments 方法，在 IE < 9 下對(duì) arguments 調(diào)用 Object.prototype.toString.call，結(jié)果是 [object Object]，而并非我們期望的 [object Arguments]。咋整？我們可以用該元素是否含有 callee 屬性來(lái)判斷，眾所周時(shí)，arguments.callee 能返回當(dāng)前 arguments 所在的函數(shù)。
// Define a fallback version of the method in browsers (ahem, IE < 9), where
// there isn"t any inspectable "Arguments" type.
// _.isArguments 方法在 IE < 9 下的兼容
// IE < 9 下對(duì) arguments 調(diào)用 Object.prototype.toString.call 方法
// 結(jié)果是 [object Object]
// 而并非我們期望的 [object Arguments]。
// so 用是否含有 callee 屬性來(lái)判斷
if (!_.isArguments(arguments)) {
_.isArguments = function(obj) {
return _.has(obj, "callee");
};
}
工具類判斷方法
接下來(lái)看下一些常用的工具類判斷方法。
判斷一個(gè)元素是否是 DOM 元素，非常簡(jiǎn)單，只需要保證它不為空，且 nodeType 屬性為 1:
// Is a given value a DOM element?
// 判斷是否為 DOM 元素
_.isElement = function(obj) {
// 確保 obj 不是 null
// 并且 obj.nodeType === 1
return !!(obj && obj.nodeType === 1);
};
如何判斷一個(gè)元素為 NaN？NaN 其實(shí)是屬于 Number 類型，Object.prototype.toString.call(NaN) 返回的是 "[object Number]"，而且 NaN 不等于本身，利用這兩點(diǎn)即可進(jìn)行判斷：
// Is the given value `NaN`? (NaN is the only number which does not equal itself).
// 判斷是否是 NaN
// NaN 是唯一的一個(gè) `自己不等于自己` 的 number 類型
_.isNaN = function(obj) {
return _.isNumber(obj) && obj !== +obj;
};
當(dāng)然，underscore 還有很多其他的有用的工具類判斷方法，具體可以看源碼 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js#L1192-L1263 這部分。
如果您覺(jué)得我分享的東西對(duì)您有所幫助，請(qǐng)關(guān)注我的 Repo https://github.com/hanzichi/underscore-analysis
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79516.html
摘要：作者韓子遲不知不覺(jué)間，源碼解讀系列進(jìn)入了真正的尾聲，也請(qǐng)?jiān)试S我最后一次下項(xiàng)目的原始地址這半年以來(lái)，花費(fèi)了大量的業(yè)余時(shí)間，共計(jì)寫(xiě)了篇隨筆包括此文，也給的源碼加了差不多行注釋，對(duì)于當(dāng)初說(shuō)的要做史上最詳細(xì)的源碼剖析，至此我也覺(jué)得問(wèn)心無(wú)愧。 作者：韓子遲 What? 不知不覺(jué)間，「Underscore 源碼解讀系列」進(jìn)入了真正的尾聲，也請(qǐng)?jiān)试S我最后一次 po 下項(xiàng)目的原始地址 https://...
摘要：最近開(kāi)始看源碼，并將源碼解讀放在了我的計(jì)劃中。后文中均假設(shè)比較的兩個(gè)參數(shù)為和。，如果和均是類型或者類型，我們可以用來(lái)判斷是否。 Why underscore 最近開(kāi)始看 underscore.js 源碼，并將 underscore.js 源碼解讀 放在了我的 2016 計(jì)劃中。 閱讀一些著名框架類庫(kù)的源碼，就好像和一個(gè)個(gè)大師對(duì)話，你會(huì)學(xué)到很多。為什么是 underscore？最主要的原...
摘要：直接來(lái)看例子一目了然，第一個(gè)參數(shù)是對(duì)象，第二個(gè)參數(shù)可以是一系列的值，也可以是數(shù)組數(shù)組中含，也可以是迭代函數(shù)，我們根據(jù)值，或者迭代函數(shù)來(lái)過(guò)濾中的鍵值對(duì)，返回新的對(duì)象副本。 Why underscore 最近開(kāi)始看 underscore.js 源碼，并將 underscore.js 源碼解讀 放在了我的 2016 計(jì)劃中。 閱讀一些著名框架類庫(kù)的源碼，就好像和一個(gè)個(gè)大師對(duì)話，你會(huì)學(xué)到很多。...
摘要：最近開(kāi)始看源碼，并將源碼解讀放在了我的計(jì)劃中。像和使用內(nèi)置構(gòu)造函數(shù)所創(chuàng)建的對(duì)象都會(huì)繼承自和的不可枚舉屬性，例如的方法或者的方法。循環(huán)將迭代對(duì)象的所有可枚舉屬性和從它的構(gòu)造函數(shù)的繼承而來(lái)的包括被覆蓋的內(nèi)建屬性。 Why underscore 最近開(kāi)始看 underscore.js 源碼，并將 underscore.js 源碼解讀 放在了我的 2016 計(jì)劃中。 閱讀一些著名框架類庫(kù)的源碼...
摘要：今天要講的是數(shù)組展開(kāi)以及和數(shù)組展開(kāi)息息相關(guān)的一個(gè)重要的內(nèi)部方法。也是個(gè)布爾值，當(dāng)為并且也為時(shí)，能過(guò)濾參數(shù)元素中的非數(shù)組元素。首先并不需要對(duì)數(shù)組深度展開(kāi)，其次傳入的是數(shù)組，對(duì)于非數(shù)組元素可以直接忽略。 Why underscore （覺(jué)得這一段眼熟的童鞋可以直接跳到正文了...） 最近開(kāi)始看 underscore.js 源碼，并將 underscore.js 源碼解讀 放在了我的 201...
閱讀 2531·2021-09-28 09:36
閱讀 3673·2021-09-22 15:41
閱讀 4540·2021-09-04 16:45
閱讀 2181·2019-08-30 15:55
閱讀 2905·2019-08-30 13:49
閱讀 898·2019-08-29 16:34
閱讀 2444·2019-08-29 12:57
閱讀 1737·2019-08-26 18:42
