underscore.js源碼解析（二）

前幾天我對underscore.js的整體結構做了分析，今天我將針對underscore封裝的方法進行具體的分析，代碼的一些解釋都寫在了注釋里，那么廢話不多說進入今天的正文。

沒看過上一篇的可以猛戳這里：underscore.js源碼解析（一）

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

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

_.each

  _.each = _.forEach = function(obj, iteratee, context) {
    //optimizeCb( )是underscore內部用來執行函數的很重要的方法，這個我們后面再聊
    iteratee = optimizeCb(iteratee, context);
    var i, length;
    if (isArrayLike(obj)) {
      //判斷是否是類數組，一般不會傳入類似 {length: 3} 這樣的數據
      for (i = 0, length = obj.length; i < length; i++) {
        iteratee(obj[i], i, obj);
      }
    } else {
      //對象處理，這個_.keys( )我們也后面再聊
      var keys = _.keys(obj);
      for (i = 0, length = keys.length; i < length; i++) {
        iteratee(obj[keys[i]], keys[i], obj);
      }
    }
    return obj;
  };

 
_.each結構很清晰，如果是數組，就遍歷數組調用相應的處理方法，如果是對象的話，就遍歷對象調用相應的處理方法。

其中判斷是否為類數組的代碼如下：

  var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
  //獲取"length"屬性
  var getLength = property('length');
  //判斷是否是類數組
  var isArrayLike = function(collection) {
    var length = getLength(collection);
    return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
  };

類數組，即擁有 length 屬性並且 length 屬性值為 Number 類型的元素，例如數組、arguments、HTMLCollection 以及 NodeList 等等,當然 {length: 3} 這種對象也滿足條件，但是_.each一般不會傳這種值。

這種判斷類數組的方法還是可以學習借鑒一下的。

 

接下來我們來聊上面提到的optimizeCb()，它是underscore內部用來執行函數的很重要的方法，並且改變所執行函數的作用域。

optimizeCb

  var optimizeCb = function(func, context, argCount) {
    if (context === void 0) return func;
    //argCount為函數參數的個數，針對不同參數個數進行不同的處理
    switch (argCount == null ? 3 : argCount) {
     //為單值的情況，例如times函數
      case 1: return function(value) {
        return func.call(context, value);
      };
      //因為2個參數的情況沒用被用到，所以在新版中被刪除了
      //3個參數用於一些迭代器函數，例如map函數
      case 3: return function(value, index, collection) {
        return func.call(context, value, index, collection);
      };
     // 4個參數用於reduce和reduceRight函數
      case 4: return function(accumulator, value, index, collection) {
        return func.call(context, accumulator, value, index, collection);
      };
    }
    return function() {
      return func.apply(context, arguments);
    };
  };

 cb和_.iteratee

  var cb = function(value, context, argCount) {
   //如果為空，則返回value本身（identity函數就是一個返回本身的函數 ）
    if (value == null) return _.identity;
    //如果為函數，則改變所執行函數的作用域
    if (_.isFunction(value)) return optimizeCb(value, context, argCount);
    //如果是對象，判斷是否匹配（matcher是一個用來判斷是否匹配的，我們具體后續再聊）
    if (_.isObject(value)) return _.matcher(value);
    return _.property(value);
  };
  // 通過調用cb函數，生成每個元素的回調
  _.iteratee = function(value, context) {
    return cb(value, context, Infinity);
  };

_.keys

  _.keys = function(obj) {
    //如果不是對象，返回空數組
    if (!_.isObject(obj)) return [];
    //如果支持原生的方法，就調用原生的keys方法
    if (nativeKeys) return nativeKeys(obj);
    var keys = [];
    //記錄所有屬性名
    for (var key in obj) if (_.has(obj, key)) keys.push(key);
    // IE9以下枚舉bug的兼容處理
    if (hasEnumBug) collectNonEnumProps(obj, keys);
    return keys;
  };

獲取所有的屬性名存在數組當中。

這里的in操作符不僅在對象本身里查找，還會在原型鏈中查找。_.keys上增加了_.has()判斷，將原型上的過濾。

 

其中IE9以下枚舉bug兼容處理源碼如下：

//判斷是否存在枚舉bug
  var hasEnumBug = !{toString: null}.propertyIsEnumerable('toString');
  //不可枚舉的屬性如下
  var nonEnumerableProps = ['valueOf', 'isPrototypeOf', 'toString',  'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString'];
  
  var collectNonEnumProps = function(obj, keys) {
    var nonEnumIdx = nonEnumerableProps.length;
    var constructor = obj.constructor;
    var proto = _.isFunction(constructor) && constructor.prototype || ObjProto;

    // Constructor單獨處理部分.
    var prop = 'constructor';
    如果對象和keys都存在constructor屬性，則把他存入keys數組當中
    if (_.has(obj, prop) && !_.contains(keys, prop)) keys.push(prop);

    while (nonEnumIdx--) {
      prop = nonEnumerableProps[nonEnumIdx];
      //如果obj對象存在上面數組里那些不可枚舉的屬性但是不在原型中，並且keys數組里面也沒有的話
      if (prop in obj && obj[prop] !== proto[prop] && !_.contains(keys, prop)){
        //將其添加進來
        keys.push(prop);
      }
    }
  };

 
既然都說到了keys那么順帶着也介紹一下allkeys吧。

_.allKeys

  _.allKeys = function(obj) {
    if (!_.isObject(obj)) return [];
    var keys = [];
    //獲取所有的key
    for (var key in obj) keys.push(key);
    // 依然是IE9以下枚舉bug的兼容處理
    if (hasEnumBug) collectNonEnumProps(obj, keys);
    return keys;
  };

其實keys和allKeys代碼對比就少了if (_.has(obj, key))，allKeys是獲取所有的，包括繼承的

在介紹_.matcher之前，需要先介紹一下createAssigner 和_.isMatch。

createAssigner

var createAssigner = function(keysFunc, defaults) {
    return function(obj) {
      var length = arguments.length;
      //判斷是否是對象
      if (defaults) obj = Object(obj);
      //如果一個參數或者對象為空，則返回這個對象
      if (length < 2 || obj == null) return obj;
      //從第二個參數開始
      for (var index = 1; index < length; index++) {
        var source = arguments[index],
            //獲取對應的keys
            //keysFunc只有keys和allKeys兩種，在下面_.extend和_.extendOwn中可以看到
            keys = keysFunc(source),
            l = keys.length;
        //進行拷貝處理
        for (var i = 0; i < l; i++) {
          var key = keys[i];
          //defaults是為了對defaults做單獨處理而添加的參數，具體的解釋_.defaults里做詳細分析
          //在_.extend和_.extendOwn中default沒有傳值所以是underfinded，所以下面判斷條件橫為true，正常進行拷貝處理
          if (!defaults || obj[key] === void 0) obj[key] = source[key];
        }
      }
      return obj;
    };
  };

//把后面的source拷貝到第一個對象
  _.extend = createAssigner(_.allKeys);

  //把后面的source拷貝到第一個對象（只拷貝實例的）
  // (https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
  _.extendOwn = _.assign = createAssigner(_.keys);

  //跟_.extend相似，只是當key相同，只會去第一次的鍵值對，不會被后面的覆蓋
  _.defaults = createAssigner(_.allKeys, true);

把createAssigner中處理defaults的代碼拿到這里具體分析

 

if (!defaults || obj[key] === void 0) obj[key] = source[key];

 

此時defaults參數為true，所以就要看obj[key] === void 0這句了，void 0返回的就是underfinded，那么這里換句通俗的話說就是判斷key之前沒有出現過相同的值時，才進行拷貝處理，如果后面出現相同的key，將不再進行拷貝操作，只保存第一次的鍵值對結果。

_.isMatch

//用來判斷該屬性是否在對象中 （包括原型鏈）
_.isMatch = function(object, attrs) {
    var keys = _.keys(attrs), length = keys.length;
    //判斷對象是否為空
    if (object == null) return !length;
    //判斷是否是對象
    var obj = Object(object);
    for (var i = 0; i < length; i++) {
      var key = keys[i];
      //如果兩者值不等或者不在屬性不在對象當中則返回false
      if (attrs[key] !== obj[key] || !(key in obj)) return false;
    }
    return true;
  };

 _.matcher和_.matches

// 判斷對象是否匹配attrs的屬性
  _.matcher = _.matches = function(attrs) {
    //進行拷貝
    attrs = _.extendOwn({}, attrs);
    return function(obj) {
      //用來判斷該屬性是否在對象中，上文有提及
      return _.isMatch(obj, attrs);
    };
  };

小結

今天介紹了underscore.js中部分封裝函數，其他的會在后面的文章繼續一一分析

感謝大家的觀看，也希望能夠和大家互相交流學習，有什么分析的不對的地方歡迎大家批評指出

參考資料

https://segmentfault.com/a/1190000000531871

http://www.w3cfuns.com/house/17398/note/class/id/bb6dc3cabae6651b94f69bbd562ff370