【underscore.js 源碼解讀】常用類型判斷以及一些有用的工具方法

tanglijun 發布于2019-08-19 18:22 / 1318人閱讀

摘要：最近開始看源碼，并將源碼解讀放在了我的計劃中。今天就跟大家聊一聊中一些常用類型檢查方法，以及一些工具類的判斷方法。用是否含有屬性來判斷工具類判斷方法接下來看下一些常用的工具類判斷方法。

Why underscore

最近開始看 underscore.js 源碼，并將 underscore.js 源碼解讀放在了我的 2016 計劃中。

閱讀一些著名框架類庫的源碼，就好像和一個個大師對話，你會學到很多。為什么是 underscore？最主要的原因是 underscore 簡短精悍（約 1.5k 行），封裝了 100 多個有用的方法，耦合度低，非常適合逐個方法閱讀，適合樓主這樣的 JavaScript 初學者。從中，你不僅可以學到用 void 0 代替 undefined 避免 undefined 被重寫等一些小技巧，也可以學到變量類型判斷、函數節流&函數去抖等常用的方法，還可以學到很多瀏覽器兼容的 hack，更可以學到作者的整體設計思路以及 API 設計的原理（向后兼容）。

之后樓主會寫一系列的文章跟大家分享在源碼閱讀中學習到的知識。

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 源碼解讀項目地址 https://github.com/hanzichi/underscore-analysis

underscore-1.8.3 源碼解讀系列文章 https://github.com/hanzichi/underscore-analysis/issues

歡迎圍觀~ （如果有興趣，歡迎 star & watch~）您的關注是樓主繼續寫作的動力

類型判斷

第一篇跟大家簡單地聊了下為什么 underscore.js 用 void 0 代替了 undefined，意外地收到了不錯的反響，有朋友私信我說以前還真不知道這回事，也有人催促我趕緊繼續下一篇解讀文章。今天就跟大家聊一聊 underscore.js 中一些 JavaScript 常用類型檢查方法，以及一些工具類的判斷方法。

我們先說個老生常談的問題，JavaScript 中數組類型的判斷方法，事實上，我在 Javascript中判斷數組的正確姿勢一文中已經詳細分析了各種判斷方式的優缺點，并給出了正確的判斷代碼：

function isArray(a) {
  Array.isArray ? Array.isArray(a) : Object.prototype.toString.call(a) === "[object Array]";
}

而 underscore 其實也正是這么做的：

// Is a given value an array?
// Delegates to ECMA5"s native Array.isArray
// 判斷是否為數組
_.isArray = nativeIsArray || function(obj) {
  return toString.call(obj) === "[object Array]";
};

nativeIsArray 正是 ES5 中 Array.isArray 方法，如果支持則優先調用；而 toString 變量就保存了 Object.prototype.toString。

如何判斷對象？underscore 把類型為 function 和 object 的變量都算作對象，當然得除去 null。

// Is a given variable an object?
// 判斷是否為對象
// 這里的對象包括 function 和 object
_.isObject = function(obj) {
  var type = typeof obj;
  return type === "function" || type === "object" && !!obj;
};

再看 "Arguments", "Function", "String", "Number", "Date", "RegExp", "Error" 這些類型的判斷，其實都可以用 Object.prototype.toString.call 來判斷，所以寫在了一起：

// 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 下對 arguments 調用 Object.prototype.toString.call，結果是 [object Object]，而并非我們期望的 [object Arguments]。咋整？我們可以用該元素是否含有 callee 屬性來判斷，眾所周時，arguments.callee 能返回當前 arguments 所在的函數。

// 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 下對 arguments 調用 Object.prototype.toString.call 方法
// 結果是 [object Object]
// 而并非我們期望的 [object Arguments]。
// so 用是否含有 callee 屬性來判斷
if (!_.isArguments(arguments)) {
  _.isArguments = function(obj) {
    return _.has(obj, "callee");
  };
}

工具類判斷方法

接下來看下一些常用的工具類判斷方法。

判斷一個元素是否是 DOM 元素，非常簡單，只需要保證它不為空，且 nodeType 屬性為 1:

// Is a given value a DOM element?
// 判斷是否為 DOM 元素
_.isElement = function(obj) {
  // 確保 obj 不是 null 
  // 并且 obj.nodeType === 1
  return !!(obj && obj.nodeType === 1);
};

如何判斷一個元素為 NaN？NaN 其實是屬于 Number 類型，Object.prototype.toString.call(NaN) 返回的是 "[object Number]"，而且 NaN 不等于本身，利用這兩點即可進行判斷：

// Is the given value `NaN`? (NaN is the only number which does not equal itself).
// 判斷是否是 NaN
// NaN 是唯一的一個 `自己不等于自己` 的 number 類型
_.isNaN = function(obj) {
  return _.isNumber(obj) && obj !== +obj;
};

當然，underscore 還有很多其他的有用的工具類判斷方法，具體可以看源碼 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js#L1192-L1263 這部分。

如果您覺得我分享的東西對您有所幫助，請關注我的 Repo https://github.com/hanzichi/underscore-analysis

云服務器 GPU云服務器 linux的一些常用命令數據分析的一些方法源碼解讀 jquery常用的方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79516.html

源碼解讀這半年

摘要：作者韓子遲不知不覺間，源碼解讀系列進入了真正的尾聲，也請允許我最后一次下項目的原始地址這半年以來，花費了大量的業余時間，共計寫了篇隨筆包括此文，也給的源碼加了差不多行注釋，對于當初說的要做史上最詳細的源碼剖析，至此我也覺得問心無愧。作者：韓子遲 What? 不知不覺間，「Underscore 源碼解讀系列」進入了真正的尾聲，也請允許我最后一次 po 下項目的原始地址 https://...

zzzmh 2019-08-21 14:42 評論0 收藏0
【underscore 源碼解讀】JavaScript 中如何判斷兩個元素是否 "相同&q

摘要：最近開始看源碼，并將源碼解讀放在了我的計劃中。后文中均假設比較的兩個參數為和。，如果和均是類型或者類型，我們可以用來判斷是否。 Why underscore 最近開始看 underscore.js 源碼，并將 underscore.js 源碼解讀放在了我的 2016 計劃中。閱讀一些著名框架類庫的源碼，就好像和一個個大師對話，你會學到很多。為什么是 underscore？最主要的原...

yhaolpz 2019-08-19 18:24 評論0 收藏0
【underscore 源碼解讀】Object Functions 相關源碼拾遺 & 小結

摘要：直接來看例子一目了然，第一個參數是對象，第二個參數可以是一系列的值，也可以是數組數組中含，也可以是迭代函數，我們根據值，或者迭代函數來過濾中的鍵值對，返回新的對象副本。 Why underscore 最近開始看 underscore.js 源碼，并將 underscore.js 源碼解讀放在了我的 2016 計劃中。閱讀一些著名框架類庫的源碼，就好像和一個個大師對話，你會學到很多。...

neuSnail 2019-08-19 18:25 評論0 收藏0
【underscore.js 源碼解讀】for ... in 存在的瀏覽器兼容問題你造嗎

摘要：最近開始看源碼，并將源碼解讀放在了我的計劃中。像和使用內置構造函數所創建的對象都會繼承自和的不可枚舉屬性，例如的方法或者的方法。循環將迭代對象的所有可枚舉屬性和從它的構造函數的繼承而來的包括被覆蓋的內建屬性。 Why underscore 最近開始看 underscore.js 源碼，并將 underscore.js 源碼解讀放在了我的 2016 計劃中。閱讀一些著名框架類庫的源碼...

Pikachu 2019-08-19 18:23 評論0 收藏0
JavaScript 數組展開以及 underscore 重要的內部方法 flatten 詳解

摘要：今天要講的是數組展開以及和數組展開息息相關的一個重要的內部方法。也是個布爾值，當為并且也為時，能過濾參數元素中的非數組元素。首先并不需要對數組深度展開，其次傳入的是數組，對于非數組元素可以直接忽略。 Why underscore （覺得這一段眼熟的童鞋可以直接跳到正文了...）最近開始看 underscore.js 源碼，并將 underscore.js 源碼解讀放在了我的 201...

binaryTree 2019-08-21 10:53 評論0 收藏0