Underscore源碼解析（一）

本文同步自我得博客：http://www.joeray61.com

最近準備折騰一下backbone.js，在事先了解了backbone以後，我知道了backbone對underscore這個庫有着強依賴，正好underscore以前也沒使用過，因而我就想先把underscore完全瞭解一下，這樣以後折騰backbone的時候也少一點阻礙。

*underscore*是一個很實用且小巧的框架，提供了不少咱們在編程時須要的基本功能函數，並且他沒有擴展*javascript*的原生對象，主要涉及對*Object*、*Array*、*Function*的操做。
我曾經問個人朋友[@小鬍子哥][1] 怎麼學習一個框架？他給個人回答是：「直接看源碼。」如今想一想深感贊成，由於研究源碼是最直接的學習途徑，能夠深刻地瞭解這個框架的思想和精髓，同時也能學習框架做者的編程技巧，提高本身的coding水平。
好了，題外話就說到這裏，下面我們進入正題。

簡化源碼看結構

我此次看的underscore版本是1.3.3，整個文件也就1000多行，我把代碼簡化了一下，並加入了相關的註釋：

// underscore的代碼包裹在一個匿名自執行函數中
(function() {
    // 建立一個全局對象, 在瀏覽器中表示爲window對象, 在Node.js中表示global對象
     var root = this;

     // 保存"_"(下劃線變量)被覆蓋以前的值
     // 若是出現命名衝突或考慮到規範, 可經過_.noConflict()方法恢復"_"被Underscore佔用以前的值, 並返回Underscore對象以便從新命名
     var previousUnderscore = root._;

     // 建立一個空的對象常量, 便於內部共享使用
     var breaker = {};

     // 將內置對象的原型鏈緩存在局部變量
     var ArrayProto = Array.prototype, 
     ObjProto = Object.prototype, 
     FuncProto = Function.prototype;

     // 將內置對象原型中的經常使用方法緩存在局部變量
     var slice = ArrayProto.slice, 
     unshift = ArrayProto.unshift, 
     toString = ObjProto.toString,
     hasOwnProperty = ObjProto.hasOwnProperty;

     // 這裏定義了一些JavaScript 1.6提供的新方法
     // 若是宿主環境中支持這些方法則優先調用, 若是宿主環境中沒有提供, 則會由Underscore實現
     var nativeForEach = ArrayProto.forEach, 
     nativeMap = ArrayProto.map, 
     nativeReduce = ArrayProto.reduce, 
     nativeReduceRight = ArrayProto.reduceRight, 
     nativeFilter = ArrayProto.filter, 
     nativeEvery = ArrayProto.every, 
     nativeSome = ArrayProto.some, 
     nativeIndexOf = ArrayProto.indexOf, 
     nativeLastIndexOf = ArrayProto.lastIndexOf, 
     nativeIsArray = Array.isArray, 
     nativeKeys = Object.keys, 
     nativeBind = FuncProto.bind;

     // 建立對象式的調用方式, 將返回一個Underscore包裝器, 包裝器對象的原型中包含Underscore全部方法(相似與將DOM對象包裝爲一個jQuery對象)
     var _ = function(obj) {
         // 全部Underscore對象在內部均經過wrapper對象進行構造
         return new wrapper(obj);
     };

     // 針對不一樣的宿主環境, 將Undersocre的命名變量存放到不一樣的對象中
     if( typeof exports !== 'undefined') {// Node.js環境
         if( typeof module !== 'undefined' && module.exports) {
             exports = module.exports = _;
         }
         exports._ = _;
     } else {// 瀏覽器環境中Underscore的命名變量被掛在window對象中
         root['_'] = _;
     }

     // 版本聲明
     _.VERSION = '1.3.3';

    //在_對象上定義各類方法
    . . . . . .

     // underscore對象的包裝函數
     var wrapper = function(obj) {
         // 原始數據存放在包裝對象的_wrapped屬性中
         this._wrapped = obj;
     };

     // 將Underscore的原型對象指向wrapper的原型, 所以經過像wrapper原型中添加方法, Underscore對象也會具有一樣的方法
     _.prototype = wrapper.prototype;

     // 返回一個對象, 若是當前Underscore調用了chain()方法(即_chain屬性爲true), 則返回一個被包裝的Underscore對象, 不然返回對象自己
    // result函數用於在構造方法鏈時返回Underscore的包裝對象
     var result = function(obj, chain) {
         return chain ? _(obj).chain() : obj;
     };

     // 將一個自定義方法添加到Underscore對象中(實際是添加到wrapper的原型中, 而Underscore對象的原型指向了wrapper的原型)
     var addToWrapper = function(name, func) {
         // 向wrapper原型中添加一個name函數, 該函數調用func函數, 並支持了方法鏈的處理
         wrapper.prototype[name] = function() {
             // 獲取func函數的參數, 並將當前的原始數據添加到第一個參數
             var args = slice.call(arguments);
             unshift.call(args, this._wrapped);
             // 執行函數並返回結果, 並經過result函數對方法鏈進行封裝, 若是當前調用了chain()方法, 則返回封裝後的Underscore對象, 不然返回對象自己
             return result(func.apply(_, args), this._chain);
         };
     };

     // 將內部定義的_(即Underscore方法集合對象)中的方法複製到wrapper的原型鏈中(即Underscore的原型鏈中)
     // 這是爲了在構造對象式調用的Underscore對象時, 這些對象也會具備內部定義的Underscore方法
     _.mixin(_);

     // 將Array.prototype中的相關方法添加到Underscore對象中, 所以在封裝後的Underscore對象中也能夠直接調用Array.prototype中的方法
     // 如: _([]).push()
     each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
         // 獲取Array.prototype中對應方法的引用
         var method = ArrayProto[name];
         // 將該方法添加到Underscore對象中(實際是添加到wrapper的原型對象, 所以在建立Underscore對象時同時具有了該方法)
         wrapper.prototype[name] = function() {
             // _wrapped變量中存儲Underscore對象的原始值
             var wrapped = this._wrapped;
            // 調用Array對應的方法並返回結果
             method.apply(wrapped, arguments);
             var length = wrapped.length;
             if((name == 'shift' || name == 'splice') && length === 0)
                 delete wrapped[0];
             // 即便是對於Array中的方法, Underscore一樣支持方法鏈操做
             return result(wrapped, this._chain);
         };
     });

     // 做用同於上一段代碼, 將數組中的一些方法添加到Underscore對象, 並支持了方法鏈操做
     // 區別在於上一段代碼所添加的函數, 均返回Array對象自己(也多是封裝後的Array), concat, join, slice方法將返回一個新的Array對象(也多是封裝後的Array)
     each(['concat', 'join', 'slice'], function(name) {
         var method = ArrayProto[name];
         wrapper.prototype[name] = function() {
             return result(method.apply(this._wrapped, arguments), this._chain);
         };
     });

     // 對Underscore對象進行鏈式操做的聲明方法
     wrapper.prototype.chain = function() {
         // this._chain用來標示當前對象是否使用鏈式操做
         // 對於支持方法鏈操做的數據, 通常在具體方法中會返回一個Underscore對象, 並將原始值存放在_wrapped屬性中, 也能夠經過value()方法獲取原始值
         this._chain = true;
         return this;
     };

     // 返回被封裝的Underscore對象的原始值(存放在_wrapped屬性中)
     wrapper.prototype.value = function() {
         return this._wrapped;
    };

}).call(this);

小結

underscore這個庫的結構（或者說思路）大體是這樣的：

建立一個包裝器, 將一些原始數據進行包裝，全部的*undersocre*對象, 內部均經過*wrapper*函數進行構造和封裝
    *underscore*與*wrapper*的內部關係是:

• 內部定義變量_, 將underscore相關的方法添加到_, 這樣就能夠支持函數式的調用, 如_.bind()

• 內部定義wrapper類, 將_的原型對象指向wrapper類的原型

• 將underscore相關的方法添加到wrapper原型, 建立的_對象就具有了underscore的方法

• 將Array.prototype相關方法添加到wrapper原型, 建立的_對象就具有了Array.prototype中的方法

• new _()時實際建立並返回了一個wrapper()對象, 並將原始數組存儲到_wrapped變量, 並將原始值做爲第一個參數調用對應方法

  以後我會對underscore中全部方法的具體實現進行介紹，感謝關注