underscore.js源碼解析（五）—— 完結篇

最近公司各種上線，所以回家略感疲憊就懶得寫了，這次我準備把剩下的所有方法全部分析完，可能篇幅過長...那麼廢話不多說讓我們進入正題。沒看過前幾篇的可以猛戳這裡： underscore.js源碼解析（一） underscore.js源碼解析（二） underscore.js源碼解析（三） under ...

最近公司各種上線，所以回家略感疲憊就懶得寫了，這次我準備把剩下的所有方法全部分析完，可能篇幅過長...那麼廢話不多說讓我們進入正題。

沒看過前幾篇的可以猛戳這裡：

underscore.js源碼GitHub地址： https://github.com/jashkenas/underscore/blob/master/underscore.js

本文解析的underscore.js版本是1.8.3

baseCreate

 1   var baseCreate = function(prototype) {
 2     //判斷參數是否是對象
 3     if (!_.isObject(prototype)) return {};
 4     //如果有原生的就調用原生的
 5     if (nativeCreate) return nativeCreate(prototype);
 6     //繼承原型
 7     Ctor.prototype = prototype;
 8     var result = new Ctor;
 9     Ctor.prototype = null;
10     return result;
11   };

_.bind

1   _.bind = restArgs(function(func, context, args) {
2     //如果不是函數拋異常
3     if (!_.isFunction(func)) throw new TypeError('Bind must be called on a function');
4     var bound = restArgs(function(callArgs) {
5       //調用executeBound方法，具體解釋見下方
6       return executeBound(func, bound, context, this, args.concat(callArgs));
7     });
8     return bound;
9   });

executeBound

 1   var executeBound = function(sourceFunc, boundFunc, context, callingContext, args) {
 2     //判斷boundFunc 是否在callingContext 的原型鏈上
 3     if (!(callingContext instanceof boundFunc)) return sourceFunc.apply(context, args);
 4     //創建實例
 5     var self = baseCreate(sourceFunc.prototype);
 6     //對實例進行apply操作
 7     var result = sourceFunc.apply(self, args);
 8     //如果是對象則返回對象
 9     if (_.isObject(result)) return result;
10     //否則返回實例本身
11     return self;
12   };

_.partial

 1   _.partial = restArgs(function(func, boundArgs) {
 2     //占位符
 3     var placeholder = _.partial.placeholder;
 4     var bound = function() {
 5       var position = 0, length = boundArgs.length;
 6       var args = Array(length);
 7       //迴圈遍歷boundArgs
 8       for (var i = 0; i < length; i++) {
 9         //判斷是否是占位符，如果是就把arguments里的第一個放進去（按順序以此類推），
10         //如果不是占位符就正常把boundArgs里的數據再拷貝一份到args中
11         args[i] = boundArgs[i] === placeholder ? arguments[position++] : boundArgs[i];
12       }
13       //迴圈遍歷完boundArgs，就是把剩下的數據放入到args當中，這裡調用executeBound，executeBound的分析可以看上面
14       while (position < arguments.length) args.push(arguments[position++]);
15       return executeBound(func, bound, this, this, args);
16     };
17     return bound;
18   });

_.bindAll

 1   _.bindAll = restArgs(function(obj, keys) {
 2     keys = flatten(keys, false, false);
 3     var index = keys.length;
 4     //如果沒有 function names拋異常
 5     if (index < 1) throw new Error('bindAll must be passed function names');
 6     while (index--) {
 7       var key = keys[index];
 8       //調用bind方法進行綁定
 9       obj[key] = _.bind(obj[key], obj);
10     }
11   });

多個方法綁定到對象上

_.memoize

 1   _.memoize = function(func, hasher) {
 2     var memoize = function(key) {
 3       //緩存值
 4       var cache = memoize.cache;
 5       //是否使用hashFunction，如果使用就把hashFunction的返回值作為緩存的key值
 6       var address = '' + (hasher ? hasher.apply(this, arguments) : key);
 7       //如果沒有就做一個緩存的操作
 8       if (!_.has(cache, address)) cache[address] = func.apply(this, arguments);
 9       //最後返回緩存值
10       return cache[address];
11     };
12     memoize.cache = {};
13     return memoize;
14   };

作用是緩存函數的計算結果，再做裡面有重覆運算的情況優化效果比較明顯

_.delay

1   _.delay = restArgs(function(func, wait, args) {
2     return setTimeout(function() {
3       return func.apply(null, args);
4     }, wait);
5   });

就是對setTimeout的封裝，一目瞭然就不做過多解釋了

_.defer

1 _.defer = _.partial(_.delay, _, 1);

就是讓這段程式最後執行，也是調用setTimeout來實現的，這裡“_”是函數參數的占位，1是時間1毫秒。不懂的可以去看看setTimeout的機制，如果這裡再展開的話篇幅過長，有時間也可以寫一篇setTimeout的文章

_.throttle

 1   _.throttle = function(func, wait, options) {
 2     var timeout, context, args, result;
 3     //previous是緩存的上一次執行的時間點，預設為0
 4     var previous = 0;
 5     //判斷是否有配置參數
 6     if (!options) options = {};
 7 
 8     var later = function() {
 9       previous = options.leading === false ? 0 : _.now();
10       //清除timeout
11       timeout = null;
12       //儲存函數執行的結果
13       result = func.apply(context, args);
14       if (!timeout) context = args = null;
15     };
16 
17     var throttled = function() {
18       //當前時間
19       var now = _.now();
20       if (!previous && options.leading === false) previous = now;
21       //wait是setTimeout延遲的時間
22       var remaining = wait - (now - previous);
23       context = this;
24       args = arguments;
25       if (remaining <= 0 || remaining > wait) {
26         if (timeout) {
27           clearTimeout(timeout);
28           timeout = null;
29         }
30         //緩存當前時間
31         previous = now;
32         result = func.apply(context, args);
33         if (!timeout) context = args = null;
34       } else if (!timeout && options.trailing !== false) {
35         //生成定時器
36         timeout = setTimeout(later, remaining);
37       }
38       return result;
39     };
40     //清除操作
41     throttled.cancel = function() {
42       clearTimeout(timeout);
43       previous = 0;
44       timeout = context = args = null;
45     };
46 
47     return throttled;
48   };

_.throttle的作用是控制函數的執行頻率，第一次執行的時候previous預設為零，那麼remaining就是負數，沒有定時器，之後當remaining大於0時，啟動定時器，當定時器的時間到的時候，執行定時器裡面的函數，並且會請一次timeout，remaining此時大於零並且timeout為空，則進入else if再次生成一個setTimeout。remaining > wait也就意味著now < previous，這是為了規避用戶改變系統是簡單的情況，這時候需要清除timeout的操作。

_.debounce

 1   _.debounce = function(func, wait, immediate) {
 2     var timeout, result;
 3 
 4     var later = function(context, args) {
 5       timeout = null;
 6       if (args) result = func.apply(context, args);
 7     };
 8 
 9     var debounced = restArgs(function(args) {
10       //判斷是否立即調用
11       var callNow = immediate && !timeout;
12       if (timeout) clearTimeout(timeout);
13       if (callNow) {
14         //如果立即調用則，立即執行函數
15         timeout = setTimeout(later, wait);
16         result = func.apply(this, args);
17       } else if (!immediate) {
18         //如果本次調用時，上一個定時器沒有執行完，將再生成一個定時器
19         timeout = _.delay(later, wait, this, args);
20       }
21 
22       return result;
23     });
24 
25     debounced.cancel = function() {
26       clearTimeout(timeout);
27       timeout = null;
28     };
29 
30     return debounced;
31   };

_.debounce也是函數節流，但是與throttle不同的是debounce中兩個函數的時間間隔不能小於wait，這樣的話定時器就會被重新創建

_.wrap

1   _.wrap = function(func, wrapper) {
2     return _.partial(wrapper, func);
3   };

作用就是把func當做參數傳給wrapper執行，_.partial前文介紹過，就是給函數設置一些預設的參數

_.compose

 1   _.compose = function() {
 2     var args = arguments;
 3     var start = args.length - 1;
 4     return function() {
 5       var i = start;
 6       var result = args[start].apply(this, arguments);
 7       //從後往前調用
 8       while (i--) result = args[i].call(this, result);
 9       return result;
10     };
11   };

_.compose的作用就是組合複合函數，結構就是從最後一個函數開始執行，然後返回結果給前一個函數調用，直到第一個。

_.after

1   _.after = function(times, func) {
2     return function() {
3       if (--times < 1) {
4         return func.apply(this, arguments);
5       }
6     };
7   };

原理很簡單，就是只有調用到最後一次的時候才開始執行裡面的函數

_.before

 1   _.before = function(times, func) {
 2     var memo;
 3     return function() {
 4       if (--times > 0) {
 5         //正常調用，記錄返回值
 6         memo = func.apply(this, arguments);
 7       }
 8       //最後一次調用時，清空fun
 9       if (times <= 1) func = null;
10       return memo;
11     };
12   };

_.before的作用是限制函數的調用次數，最後一次調用清空fun，返回上一次調用的結果

_.once

1   _.once = _.partial(_.before, 2);

_.once調用了_.before並且times參數為2，說明無論調用幾次，只返回第一次的調用結果

_.mapObject

 1   _.mapObject = function(obj, iteratee, context) {
 2     iteratee = cb(iteratee, context);
 3     var keys = _.keys(obj),
 4         length = keys.length,
 5         results = {};
 6     for (var index = 0; index < length; index++) {
 7       var currentKey = keys[index];
 8       results[currentKey] = iteratee(obj[currentKey], currentKey, obj);
 9     }
10     return results;
11   };

_.mapObject跟map類似，只不過它最後返回的是對象

_.pairs

1   _.pairs = function(obj) {
2     var keys = _.keys(obj);
3     var length = keys.length;
4     var pairs = Array(length);
5     for (var i = 0; i < length; i++) {
6       pairs[i] = [keys[i], obj[keys[i]]];
7     }
8     return pairs;
9   };

_.pairs的結構也很簡單，就是把對象轉化為數組

_.invert

1   _.invert = function(obj) {
2     var result = {};
3     var keys = _.keys(obj);
4     for (var i = 0, length = keys.length; i < length; i++) {
5       result[obj[keys[i]]] = keys[i];
6     }
7     return result;
8   };

結構也是很清晰，就是一個翻轉對象的過程，將對象的鍵和值互換位置

_.functions

1   _.functions = _.methods = function(obj) {
2     var names = [];
3     for (var key in obj) {
4       if (_.isFunction(obj[key])) names.push(key);
5     }
6     return names.sort();
7   };

就是獲取對象的所有方法名，然後存在數組當中

_.pick

 1   _.pick = restArgs(function(obj, keys) {
 2     var result = {}, iteratee = keys[0];
 3     //如果沒有傳入obj，則返回空
 4     if (obj == null) return result;
 5     //判斷keys參數里是否傳的是函數
 6     if (_.isFunction(iteratee)) {
 7       如果是函數，則調用函數進行上下文this的綁定
 8       if (keys.length > 1) iteratee = optimizeCb(iteratee, keys[1]);
 9       keys = _.allKeys(obj);
10     } else {
11     //如果不是函數，則為所需的屬性
12       iteratee = keyInObj;
13       keys = flatten(keys, false, false);
14       obj = Object(obj);
15     }
16     for (var i = 0, length = keys.length; i < length; i++) {
17       var key = keys[i];
18       var value = obj[key];
19       if (iteratee(value, key, obj)) result[key] = value;
20     }
21     return result;
22   });

作用是過濾出所需的鍵值對，對參數是屬性的和函數的情況分別處理

_.omit

 1   _.omit = restArgs(function(obj, keys) {
 2     var iteratee = keys[0], context;
 3     if (_.isFunction(iteratee)) {
 4       //這裡一個取反的操作
 5       iteratee = _.negate(iteratee);
 6       if (keys.length > 1) context = keys[1];
 7     } else {
 8       keys = _.map(flatten(keys, false, false), String);
 9       iteratee = function(value, key) {
10         //不存在的情況返回true
11         return !_.contains(keys, key);
12       };
13     }
14     //最後調用pick()
15     return _.pick(obj, iteratee, context);
16   });

_.omit相比較_.pick是一種相反的操作，作用是保留標記以外的對象

_.create

1   _.create = function(prototype, props) {
2     //繼承原型
3     var result = baseCreate(prototype);
4     //屬性拷貝的操作
5     if (props) _.extendOwn(result, props);
6     return result;
7   };

模擬Object.create方法

_.clone

1   _.clone = function(obj) {
2     if (!_.isObject(obj)) return obj;
3     return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
4   };

對象淺拷貝，如果是數組就調用slice，不是數組就調用_.extend

_.isMatch

 1   _.isMatch = function(object, attrs) {
 2     var keys = _.keys(attrs), length = keys.length;
 3     if (object == null) return !length;
 4     //防止不是對象
 5     var obj = Object(object);
 6     for (var i = 0; i < length; i++) {
 7       var key = keys[i];
 8       //如果對象屬性不在obj中或者不在obj中
 9       if (attrs[key] !== obj[key] || !(key in obj)) return false;
10     }
11     return true;
12   };

判斷後者的對象屬性是否全在前者的對象當中

eq

  eq = function(a, b, aStack, bStack) {
    //雖然0 === -0成立，但是1 / 0 == 1 / -0 是不成立的，因為1 / 0值為Infinity, 1 / -0值為-Infinity, 而Infinity不等於-Infinity
    if (a === b) return a !== 0 || 1 / a === 1 / b;
    //null == undefined
    if (a == null || b == null) return a === b;
    //對NaN情況的判斷，因為NaN!=NaN,所以a !== a說明a是NaN，如果b !== b為true，那麼說明b是NaN，a和b相等，b !== b為false，說明b不是NaN，那麼a和b不等
    if (a !== a) return b !== b;
    var type = typeof a;
    if (type !== 'function' && type !== 'object' && typeof b != 'object') return false;
    return deepEq(a, b, aStack, bStack);
  };

deepEq

 1   deepEq = function(a, b, aStack, bStack) {
 2     // 如果是underscore封裝的對象，則通過_.wrapped中獲取本身數據再進行對比
 3     if (a instanceof _) a = a._wrapped;
 4     if (b instanceof _) b = b._wrapped;
 5     // 對兩者的數據類型進行比較
 6     var className = toString.call(a);
 7     if (className !== toString.call(b)) return false;
 8     switch (className) {
 9       case '[object RegExp]':
10       case '[object String]':
11         // 正則轉化字元串
12         return '' + a === '' + b;
13       case '[object Number]':
14         // 對NaN情況的判斷，跟eq里的判斷一樣，只不過多了轉化數字這一步
15         if (+a !== +a) return +b !== +b;
16         // 如果不是NaN，那就要判斷0的情況了，也是跟eq裡面的判斷同理
17         return +a === 0 ? 1 / +a === 1 / b : +a === +b;
18       case '[object Date]':
19       case '[object Boolean]':
20         //日期和布爾值轉化為數字來比較，日期轉化為數字是毫秒數
21         return +a === +b;
22     }
23 
24     var areArrays = className === '[object Array]';
25     if (!areArrays) {
26       //如果不是數組，只要有一個不是object類型就不等
27       if (typeof a != 'object' || typeof b != 'object') return false;
28 
29       var aCtor = a.constructor, bCtor = b.constructor;
30       //不同的構造函數是不等的，不同frames的object和Array是相等的
31       if (aCtor !== bCtor && !(_.isFunction(aCtor) && aCtor instanceof aCtor &&
32                                _.isFunction(bCtor) && bCtor instanceof bCtor)
33                           && ('constructor' in a && 'constructor' in b)) {
34         return false;
35       }
36     }
37   
38     aStack = aStack || [];
39     bStack = bStack || [];
40     var length = aStack.length;
41     while (length--) {
42       // 對嵌套結構的做判斷
43       if (aStack[length] === a) return bStack[length] === b;
44     }
45 
46     // 將a和b放入棧中
47     aStack.push(a);
48     bStack.push(b);
49 
50     // 對數組的判斷處理
51     if (areArrays) {
52       length = a.length;
53       //如果長度不等，那麼肯定不等
54       if (length !== b.length) return false;
55       // 遞歸比較每一個元素
56       while (length--) {
57         if (!eq(a[length], b[length], aStack, bStack)) return false;
58       }
59     } else {
60       //如果是對象
61       var keys = _.keys(a), key;
62       length = keys.length;
63       // 相比較亮兩個對象的屬性數量是否相等
64       if (_.keys(b).length !== length) return false;
65       while (length--) {
66         //遞歸比較每個屬性是否相等
67         key = keys[length];
68         if (!(_.has(b, key) && eq(a[key], b[key], aStack, bStack))) return false;
69       }
70     }
71     // 移除棧里的元素
72     aStack.pop();
73     bStack.pop();
74     return true;
75   };

_.isEmpty

1   _.isEmpty = function(obj) {
2     if (obj == null) return true;
3     if (isArrayLike(obj) && (_.isArray(obj) || _.isString(obj) || _.isArguments(obj))) return obj.length === 0;
4     return _.keys(obj).length === 0;
5   };

就是一個判斷為空的函數，結構很簡單

_.isElement

1   _.isElement = function(obj) {
2     return !!(obj && obj.nodeType === 1);
3   };

判斷是都是DOM元素

_.times

1   _.times = function(n, iteratee, context) {
2     var accum = Array(Math.max(0, n));
3     iteratee = optimizeCb(iteratee, context, 1);
4     for (var i = 0; i < n; i++) accum[i] = iteratee(i);
5     return accum;
6   };

調用迭代函數n次，最後結果返回一個數組

_.template

 1   _.template = function(text, settings, oldSettings) {
 2     //如果沒有第二個參數，就將第三個參數賦值給第二個
 3     if (!settings && oldSettings) settings = oldSettings;
 4     //這裡_.default函數前面介紹過填充屬性為undefined的屬性
 5     settings = _.defaults({}, settings, _.templateSettings);
 6 
 7     // 定義正則表達式，將settings裡面的三個正則組合在一起，這裡'|$'是為了讓replace裡面的函數多執行一遍
 8     var matcher = RegExp([
 9       (settings.escape || noMatch).source,
10       (settings.interpolate || noMatch).source,
11       (settings.evaluate || noMatch).source
12     ].join('|') + '|$', 'g');
13 
14     var index = 0;
15     var source = "__p+='";
16     //拼接字元串
17     text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
18       source += text.slice(index, offset).replace(escapeRegExp, escapeChar);
19       index = offset + match.length;
20       //針對不同的情況進行拼接
21       if (escape) {
22         source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
23       } else if (interpolate) {
24         source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
25       } else if (evaluate) {
26         source += "';\n" + evaluate + "\n__p+='";
27       }
28 
29       return match;
30     });
31     //下麵是一個