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 源碼解讀項(xiàng)目地址 https://github.com/hanzichi/underscore-analysis
• 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/issues

歡迎圍觀~ （如果有興趣，歡迎 star & watch~）您的關(guān)注是樓主繼續(xù)寫(xiě)作的動(dòng)力

_.isEqual

本文跟大家聊聊 JavaScript 中如何判斷兩個(gè)參數(shù) "相同"洗鸵，即 underscore 源碼中的 _.isEqual 方法越锈。這個(gè)方法可以說(shuō)是 underscore 源碼中實(shí)現(xiàn)最復(fù)雜的方法（用了百來(lái)行），幾乎沒(méi)有之一膘滨。

那么甘凭，我說(shuō)的 "相同" 到底是什么意思？舉個(gè)栗子火邓，1 和 new Number(1) 被認(rèn)為是 equal丹弱，[1] 和 [1] 被認(rèn)為是 equal（盡管它們的引用并不相同），當(dāng)然铲咨，兩個(gè)引用相同的對(duì)象肯定是 equal 的了躲胳。

那么，如何設(shè)計(jì)這個(gè) _.isEqual 函數(shù)呢纤勒？我們跟著 underscore 源碼，一步步來(lái)看它的實(shí)現(xiàn)粹湃。后文中均假設(shè)比較的兩個(gè)參數(shù)為 a 和 b泉坐。

首先我們判斷 a === b，為 true 的情況有兩種腕让，其一是 a 和 b 都是基本類型，那么就是兩個(gè)基本類型的值相同司训，其二就是兩個(gè)引用類型液南，那么就是引用類型的引用相同滑凉。那么如果 a === b 為 true统扳，是否就是說(shuō) a 和 b 是 equal 的呢咒钟？事實(shí)上若未，99% 的情況是這樣的，還得考慮 0 和 -0 這個(gè) special case粗合，0 === -0 為 true萍嬉，而 0 和 -0 被認(rèn)為是 unequal壤追，至于原因供屉，可以參考 http://wiki.ecmascript.org/doku.php?id=harmony:egal。

這部分代碼可以這樣表示：

// Identical objects are equal. `0 === -0`, but they aren't identical.
// See the [Harmony `egal` proposal](http://wiki.ecmascript.org/doku.php?id=harmony:egal).
// a === b 時(shí)
// 需要注意 `0 === -0` 這個(gè) special case
// 0 和 -0 不相同
// 至于原因可以參考上面的鏈接
if (a === b) return a !== 0 || 1 / a === 1 / b;

接下去的情況伶丐，也就是 a !== b 的情況了。

如果 a 和 b 中有一個(gè)是 null 或者 undefined肛走，那么可以特判下啡彬，不用繼續(xù)比較了。源碼實(shí)現(xiàn)：

// A strict comparison is necessary because `null == undefined`.
// 如果 a 和 b 有一個(gè)為 null（或者 undefined）
// 判斷 a === b
if (a == null || b == null) return a === b;

個(gè)人覺(jué)得這里寫(xiě)的有點(diǎn)多余纵搁，因?yàn)楦鶕?jù)上面的判斷過(guò)濾往踢，a === b 肯定是返回 false 的。

ok利职，我們繼續(xù)，接下來(lái)我們可以先根據(jù) a 和 b 的類型來(lái)判斷猪贪，如果類型不一樣讯私，那么就沒(méi)必要繼續(xù)判斷了西傀。如何獲取變量類型桶癣？沒(méi)錯(cuò)，就是神奇的 Object.prototype.toString.call饺鹃！

如果類型是 RegExp 和 String间雀，我們可以將 a 和 b 分別轉(zhuǎn)為字符串進(jìn)行比較（如果是 String 就已經(jīng)是字符串了），舉個(gè)栗子：

var a = /a/;
var b = new RegExp("a");

console.log(_.isEqual(a, b));  // => true

其實(shí)它在 underscore 內(nèi)部是這樣判斷的：

var a = /a/;
var b = new RegExp("a");

var _a = '' + a; // => /a/
var _b = '' + b; // => /a/

console.log(_a === _b); // => true

如果是 Number 類型呢伟端？這里又有個(gè) special case匪煌，就是 NaN！這里規(guī)定萎庭，NaN 僅和 NaN 相同，與別的 Number 類型均 unequal肴敛。這里我們將引用類型均轉(zhuǎn)為基本類型吗购，看如下代碼：

var a = new Number(1);
console.log(+a); // 1

沒(méi)錯(cuò)，加個(gè) + 就解決了镀梭，其他的不難理解踱启，都在注釋里了。

// `NaN`s are equivalent, but non-reflexive.
// Object(NaN) is equivalent to NaN
// 如果 +a !== +a 
// 那么 a 就是 NaN
// 判斷 b 是否也是 NaN 即可
if (+a !== +a) return +b !== +b;

// An `egal` comparison is performed for other numeric values.
// 排除了 NaN 干擾
// 還要考慮 0 的干擾
// 用 +a 將 Number() 形式轉(zhuǎn)為基本類型
// 如果 a 為 0透罢，判斷 1 / +a === 1 / b
// 否則判斷 +a === +b
return +a === 0 ? 1 / +a === 1 / b : +a === +b;

// 如果 a 為 Number 類型
// 要注意 NaN 這個(gè) special number
// NaN 和 NaN 被認(rèn)為 equal

接下來(lái)我們看 Date 和 Boolean 兩個(gè)類型冠蒋。跟 Number 類型相似，它們也可以用 + 轉(zhuǎn)化為基本類型的數(shù)字朽寞！看下面代碼：

var a = new Date();
var b = true;
var c = new Boolean(false);

console.log(+a); // 1464180857222
console.log(+b); // 1
console.log(+c); // 0

非常簡(jiǎn)單，其實(shí) +new Date() （或者也可以寫(xiě)成 +new Date）獲取的正是當(dāng)前時(shí)間和 1970 年 1 月 1 日 0 點(diǎn)的毫秒數(shù)（millisecond）愁憔，可能你聽(tīng)說(shuō)過(guò)時(shí)間戳孽拷，其實(shí)時(shí)間戳就是這個(gè)數(shù)據(jù)除以 1000，也就是秒數(shù)膜宋。在用 canvas 做動(dòng)畫(huà)時(shí)炼幔，我經(jīng)常用 +new Date 來(lái)當(dāng)時(shí)間戳惫撰。

so耻瑟，如果 a 和 b 均是 Date 類型或者 Boolean 類型蝴蜓，我們可以用 +a === +b 來(lái)判斷是否 equal贱案。

程序接著走刀脏，我們接著看局荚，似乎還有兩類重要的類型沒(méi)有判斷耀态？沒(méi)錯(cuò)暂雹，Array 和 Object！underscore 對(duì)此采用遞歸方法展開(kāi)來(lái)比較簿盅。

還是舉個(gè)栗子吧，舉例比較直觀桨醋。

假設(shè) a现斋，b 如下：

var a = {name: "hanzichi", loveCity: [{cityName: "hangzhou", province: "zhenjiang"}], age: 30};
var b = {name: "hanzichi", loveCity: [{cityName: "hangzhou", province: "zhenjiang"}], age: 25};

首先 a，b 是對(duì)象庄蹋，我們可以分別比較其鍵值對(duì)迷雪，如果有一個(gè)鍵值對(duì)不同（或者說(shuō)一個(gè)鍵值對(duì) a 和 b 有一個(gè)沒(méi)有）章咧，則 a 和 b unequal。如果是數(shù)組呢赁严？那就一個(gè)一個(gè)元素比較嘍粉铐。因?yàn)閿?shù)組可能嵌套對(duì)象，對(duì)象的 value 又可能是數(shù)組蝙泼，所以這里用了遞歸。

還是以上面的例子汤踏，我們可以把它拆成三次比較，分別比較三個(gè) key 的 value 值是否相同昙沦。對(duì)于 loveCity 這個(gè) key 的 value，因?yàn)槠?value 又是個(gè)數(shù)組盾饮，所以我們將這個(gè) value 傳入比較函數(shù)懒熙，通過(guò)這個(gè)比較的結(jié)果，來(lái)判斷最后的比較結(jié)果徘钥。遞歸就是這樣，可以將大的東西呈础，拆成一個(gè)個(gè)小的橱健，根據(jù)小的結(jié)果，來(lái)匯總得到大的結(jié)果臼节。

最后，給出代碼位置巨税。關(guān)于 _.isEqual 方法的源碼粉臊，大家可以參考 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js#L1094-L1190