underscore.js源码解析（五）—— 完结篇

最近公司各种上线，所以回家略感疲惫就懒得写了，这次我准备把剩下的所有方法全部分析完，可能篇幅过长...那么废话不多说让我们进入正题。

没看过前几篇的可以猛戳这里：

underscore.js源码解析（一）

underscore.js源码解析（二）

underscore.js源码解析（三）

underscore.js源码解析（四）

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

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

baseCreate

  var baseCreate = function(prototype) {
    //判断参数是否是对象
    if (!_.isObject(prototype)) return {};
    //如果有原生的就调用原生的
    if (nativeCreate) return nativeCreate(prototype);
    //继承原型
    Ctor.prototype = prototype;
    var result = new Ctor;
    Ctor.prototype = null;
    return result;
  };

_.bind

  _.bind = restArgs(function(func, context, args) {
    //如果不是函数抛异常
    if (!_.isFunction(func)) throw new TypeError('Bind must be called on a function');
    var bound = restArgs(function(callArgs) {
      //调用executeBound方法，具体解释见下方
      return executeBound(func, bound, context, this, args.concat(callArgs));
    });
    return bound;
  });

executeBound

  var executeBound = function(sourceFunc, boundFunc, context, callingContext, args) {
    //判断boundFunc 是否在callingContext 的原型链上
    if (!(callingContext instanceof boundFunc)) return sourceFunc.apply(context, args);
    //创建实例
    var self = baseCreate(sourceFunc.prototype);
    //对实例进行apply操作
    var result = sourceFunc.apply(self, args);
    //如果是对象则返回对象
    if (_.isObject(result)) return result;
    //否则返回实例本身
    return self;
  };

 _.partial

  _.partial = restArgs(function(func, boundArgs) {
    //占位符
    var placeholder = _.partial.placeholder;
    var bound = function() {
      var position = 0, length = boundArgs.length;
      var args = Array(length);
      //循环遍历boundArgs
      for (var i = 0; i < length; i++) {
        //判断是否是占位符，如果是就把arguments里的第一个放进去（按顺序以此类推），
        //如果不是占位符就正常把boundArgs里的数据再拷贝一份到args中
        args[i] = boundArgs[i] === placeholder ? arguments[position++] : boundArgs[i];
      }
      //循环遍历完boundArgs，就是把剩下的数据放入到args当中，这里调用executeBound，executeBound的分析可以看上面
      while (position < arguments.length) args.push(arguments[position++]);
      return executeBound(func, bound, this, this, args);
    };
    return bound;
  });

 _.bindAll

  _.bindAll = restArgs(function(obj, keys) {
    keys = flatten(keys, false, false);
    var index = keys.length;
    //如果没有 function names抛异常
    if (index < 1) throw new Error('bindAll must be passed function names');
    while (index--) {
      var key = keys[index];
      //调用bind方法进行绑定
      obj[key] = _.bind(obj[key], obj);
    }
  });

 多个方法绑定到对象上

_.memoize

  _.memoize = function(func, hasher) {
    var memoize = function(key) {
      //缓存值
      var cache = memoize.cache;
      //是否使用hashFunction，如果使用就把hashFunction的返回值作为缓存的key值
      var address = '' + (hasher ? hasher.apply(this, arguments) : key);
      //如果没有就做一个缓存的操作
      if (!_.has(cache, address)) cache[address] = func.apply(this, arguments);
      //最后返回缓存值
      return cache[address];
    };
    memoize.cache = {};
    return memoize;
  };

 作用是缓存函数的计算结果，再做里面有重复运算的情况优化效果比较明显

_.delay

  _.delay = restArgs(function(func, wait, args) {
    return setTimeout(function() {
      return func.apply(null, args);
    }, wait);
  });

 就是对setTimeout的封装，一目了然就不做过多解释了

_.defer

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

 就是让这段程序最后执行，也是调用setTimeout来实现的，这里“_”是函数参数的占位，1是时间1毫秒。不懂的可以去看看setTimeout的机制，如果这里再展开的话篇幅过长，有时间也可以写一篇setTimeout的文章

_.throttle

  _.throttle = function(func, wait, options) {
    var timeout, context, args, result;
    //previous是缓存的上一次执行的时间点，默认为0
    var previous = 0;
    //判断是否有配置参数
    if (!options) options = {};

    var later = function() {
      previous = options.leading === false ? 0 : _.now();
      //清除timeout
      timeout = null;
      //储存函数执行的结果
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };

    var throttled = function() {
      //当前时间
      var now = _.now();
      if (!previous && options.leading === false) previous = now;
      //wait是setTimeout延迟的时间
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      if (remaining <= 0 || remaining > wait) {
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        //缓存当前时间
        previous = now;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        //生成定时器
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
    //清除操作
    throttled.cancel = function() {
      clearTimeout(timeout);
      previous = 0;
      timeout = context = args = null;
    };

    return throttled;
  };

 _.throttle的作用是控制函数的执行频率，第一次执行的时候previous默认为零，那么remaining就是负数，没有定时器，之后当remaining大于0时，启动定时器，当定时器的时间到的时候，执行定时器里面的函数，并且会请一次timeout，remaining此时大于零并且timeout为空，则进入else if再次生成一个setTimeout。remaining > wait也就意味着now < previous，这是为了规避用户改变系统是简单的情况，这时候需要清除timeout的操作。

_.debounce

  _.debounce = function(func, wait, immediate) {
    var timeout, result;

    var later = function(context, args) {
      timeout = null;
      if (args) result = func.apply(context, args);
    };

    var debounced = restArgs(function(args) {
      //判断是否立即调用
      var callNow = immediate && !timeout;
      if (timeout) clearTimeout(timeout);
      if (callNow) {
        //如果立即调用则，立即执行函数
        timeout = setTimeout(later, wait);
        result = func.apply(this, args);
      } else if (!immediate) {
        //如果本次调用时，上一个定时器没有执行完，将再生成一个定时器
        timeout = _.delay(later, wait, this, args);
      }

      return result;
    });

    debounced.cancel = function() {
      clearTimeout(timeout);
      timeout = null;
    };

    return debounced;
  };

  _.debounce也是函数节流，但是与throttle不同的是debounce中两个函数的时间间隔不能小于wait，这样的话定时器就会被重新创建

_.wrap

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

 作用就是把func当做参数传给wrapper执行，_.partial前文介绍过，就是给函数设置一些默认的参数

_.compose

  _.compose = function() {
    var args = arguments;
    var start = args.length - 1;
    return function() {
      var i = start;
      var result = args[start].apply(this, arguments);
      //从后往前调用
      while (i--) result = args[i].call(this, result);
      return result;
    };
  };

  _.compose的作用就是组合复合函数，结构就是从最后一个函数开始执行，然后返回结果给前一个函数调用，直到第一个。

_.after

  _.after = function(times, func) {
    return function() {
      if (--times < 1) {
        return func.apply(this, arguments);
      }
    };
  };

原理很简单，就是只有调用到最后一次的时候才开始执行里面的函数

_.before

  _.before = function(times, func) {
    var memo;
    return function() {
      if (--times > 0) {
        //正常调用，记录返回值
        memo = func.apply(this, arguments);
      }
      //最后一次调用时，清空fun
      if (times <= 1) func = null;
      return memo;
    };
  };

_.before的作用是限制函数的调用次数，最后一次调用清空fun，返回上一次调用的结果

_.once

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

_.once调用了_.before并且times参数为2，说明无论调用几次，只返回第一次的调用结果

_.mapObject

  _.mapObject = function(obj, iteratee, context) {
    iteratee = cb(iteratee, context);
    var keys = _.keys(obj),
        length = keys.length,
        results = {};
    for (var index = 0; index < length; index++) {
      var currentKey = keys[index];
      results[currentKey] = iteratee(obj[currentKey], currentKey, obj);
    }
    return results;
  };

_.mapObject跟map类似，只不过它最后返回的是对象

_.pairs

  _.pairs = function(obj) {
    var keys = _.keys(obj);
    var length = keys.length;
    var pairs = Array(length);
    for (var i = 0; i < length; i++) {
      pairs[i] = [keys[i], obj[keys[i]]];
    }
    return pairs;
  };

_.pairs的结构也很简单，就是把对象转化为数组

_.invert

  _.invert = function(obj) {
    var result = {};
    var keys = _.keys(obj);
    for (var i = 0, length = keys.length; i < length; i++) {
      result[obj[keys[i]]] = keys[i];
    }
    return result;
  };

结构也是很清晰，就是一个翻转对象的过程，将对象的键和值互换位置

_.functions

  _.functions = _.methods = function(obj) {
    var names = [];
    for (var key in obj) {
      if (_.isFunction(obj[key])) names.push(key);
    }
    return names.sort();
  };

就是获取对象的所有方法名，然后存在数组当中

_.pick

  _.pick = restArgs(function(obj, keys) {
    var result = {}, iteratee = keys[0];
    //如果没有传入obj，则返回空
    if (obj == null) return result;
    //判断keys参数里是否传的是函数
    if (_.isFunction(iteratee)) {
      如果是函数，则调用函数进行上下文this的绑定
      if (keys.length > 1) iteratee = optimizeCb(iteratee, keys[1]);
      keys = _.allKeys(obj);
    } else {
    //如果不是函数，则为所需的属性
      iteratee = keyInObj;
      keys = flatten(keys, false, false);
      obj = Object(obj);
    }
    for (var i = 0, length = keys.length; i < length; i++) {
      var key = keys[i];
      var value = obj[key];
      if (iteratee(value, key, obj)) result[key] = value;
    }
    return result;
  });

作用是过滤出所需的键值对，对参数是属性的和函数的情况分别处理

_.omit

  _.omit = restArgs(function(obj, keys) {
    var iteratee = keys[0], context;
    if (_.isFunction(iteratee)) {
      //这里一个取反的操作
      iteratee = _.negate(iteratee);
      if (keys.length > 1) context = keys[1];
    } else {
      keys = _.map(flatten(keys, false, false), String);
      iteratee = function(value, key) {
        //不存在的情况返回true
        return !_.contains(keys, key);
      };
    }
    //最后调用pick()
    return _.pick(obj, iteratee, context);
  });

_.omit相比较_.pick是一种相反的操作，作用是保留标记以外的对象

_.create

  _.create = function(prototype, props) {
    //继承原型
    var result = baseCreate(prototype);
    //属性拷贝的操作
    if (props) _.extendOwn(result, props);
    return result;
  };

模拟Object.create方法

_.clone

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

对象浅拷贝，如果是数组就调用slice，不是数组就调用_.extend

_.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];
      //如果对象属性不在obj中或者不在obj中
      if (attrs[key] !== obj[key] || !(key in obj)) return false;
    }
    return true;
  };

  判断后者的对象属性是否全在前者的对象当中

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

  deepEq = function(a, b, aStack, bStack) {
    // 如果是underscore封装的对象，则通过_.wrapped中获取本身数据再进行对比
    if (a instanceof _) a = a._wrapped;
    if (b instanceof _) b = b._wrapped;
    // 对两者的数据类型进行比较
    var className = toString.call(a);
    if (className !== toString.call(b)) return false;
    switch (className) {
      case '[object RegExp]':
      case '[object String]':
        // 正则转化字符串
        return '' + a === '' + b;
      case '[object Number]':
        // 对NaN情况的判断，跟eq里的判断一样，只不过多了转化数字这一步
        if (+a !== +a) return +b !== +b;
        // 如果不是NaN，那就要判断0的情况了，也是跟eq里面的判断同理
        return +a === 0 ? 1 / +a === 1 / b : +a === +b;
      case '[object Date]':
      case '[object Boolean]':
        //日期和布尔值转化为数字来比较，日期转化为数字是毫秒数
        return +a === +b;
    }

    var areArrays = className === '[object Array]';
    if (!areArrays) {
      //如果不是数组，只要有一个不是object类型就不等
      if (typeof a != 'object' || typeof b != 'object') return false;

      var aCtor = a.constructor, bCtor = b.constructor;
      //不同的构造函数是不等的，不同frames的object和Array是相等的
      if (aCtor !== bCtor && !(_.isFunction(aCtor) && aCtor instanceof aCtor &&
                               _.isFunction(bCtor) && bCtor instanceof bCtor)
                          && ('constructor' in a && 'constructor' in b)) {
        return false;
      }
    }
  
    aStack = aStack || [];
    bStack = bStack || [];
    var length = aStack.length;
    while (length--) {
      // 对嵌套结构的做判断
      if (aStack[length] === a) return bStack[length] === b;
    }

    // 将a和b放入栈中
    aStack.push(a);
    bStack.push(b);

    // 对数组的判断处理
    if (areArrays) {
      length = a.length;
      //如果长度不等，那么肯定不等
      if (length !== b.length) return false;
      // 递归比较每一个元素
      while (length--) {
        if (!eq(a[length], b[length], aStack, bStack)) return false;
      }
    } else {
      //如果是对象
      var keys = _.keys(a), key;
      length = keys.length;
      // 相比较亮两个对象的属性数量是否相等
      if (_.keys(b).length !== length) return false;
      while (length--) {
        //递归比较每个属性是否相等
        key = keys[length];
        if (!(_.has(b, key) && eq(a[key], b[key], aStack, bStack))) return false;
      }
    }
    // 移除栈里的元素
    aStack.pop();
    bStack.pop();
    return true;
  };

_.isEmpty

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

就是一个判断为空的函数，结构很简单

_.isElement

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

判断是都是DOM元素

_.times

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

调用迭代函数n次，最后结果返回一个数组

_.template

  _.template = function(text, settings, oldSettings) {
    //如果没有第二个参数，就将第三个参数赋值给第二个
    if (!settings && oldSettings) settings = oldSettings;
    //这里_.default函数前面介绍过填充属性为undefined的属性
    settings = _.defaults({}, settings, _.templateSettings);

    // 定义正则表达式，将settings里面的三个正则组合在一起，这里'|$'是为了让replace里面的函数多执行一遍
    var matcher = RegExp([
      (settings.escape || noMatch).source,
      (settings.interpolate || noMatch).source,
      (settings.evaluate || noMatch).source
    ].join('|') + '|$', 'g');

    var index = 0;
    var source = "__p+='";
    //拼接字符串
    text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
      source += text.slice(index, offset).replace(escapeRegExp, escapeChar);
      index = offset + match.length;
      //针对不同的情况进行拼接
      if (escape) {
        source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
      } else if (interpolate) {
        source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
      } else if (evaluate) {
        source += "';\n" + evaluate + "\n__p+='";
      }

      return match;
    });
    //下面是一个模板预编译的处理，主要用于调试
    source += "';\n";

    if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';

    source = "var __t,__p='',__j=Array.prototype.join," +
      "print=function(){__p+=__j.call(arguments,'');};\n" +
      source + 'return __p;\n';

    var render;
    try {
      render = new Function(settings.variable || 'obj', '_', source);
    } catch (e) {
      e.source = source;
      throw e;
    }
    //创建templete函数
    var template = function(data) {
      return render.call(this, data, _);
    };
    //设置source属性
    var argument = settings.variable || 'obj';
    template.source = 'function(' + argument + '){\n' + source + '}';

    return template;
  };

_.template就是一个模板函数，核心的部分还是前半段字符串拼接的过程（17-38行）。

首先先解释一下参数text是模板字符串，settings是正则匹配的规则，escape、interpolate、evaluate和variable

  _.templateSettings = {
    evaluate: /<%([\s\S]+?)%>/g,
    interpolate: /<%=([\s\S]+?)%>/g,
    escape: /<%-([\s\S]+?)%>/g
  };

evaluate是用来执行任意的JavaScript代码，interpolate是用来插入变量的，escape是HTML转义的

里面有个noMatch，他是为了避免settings中缺少属性的情况

var noMatch = /(.)^/;

17行里offset是用来记录匹配当前位置的，剩下的主要就是走21-27行了，插入值就走23-24行判断，如果遇到一些需要js判断转换的数据就走25-26行判断，最后匹配$也是为了再执行一遍将最后面的html拼接进字符串。

其中18行中的escapeRegExp和escapeChar就是用来转化一些特殊字符的

  var escapes = {
    "'": "'",
    '\\': '\\',
    '\r': 'r',
    '\n': 'n',
    '\u2028': 'u2028',
    '\u2029': 'u2029'
  };

  var escapeRegExp = /\\|'|\r|\n|\u2028|\u2029/g;

  var escapeChar = function(match) {
    return '\\' + escapes[match];
  };

小结

到这里underscore.js就都分析完了，断断续续用了一个月的时间，在读这些函数方法的时候收获很多，也发现了一些以前自己理解不全面的地方，对自己也是个检验，就拿上面的template来说，就发现了自己正则方面的掌握还不够，在分析方法时学习了一些这些好的编程思想。

下一篇可能是对定时器的分析，到时候再看自己的研究效果吧。

夜已深，去睡觉了...

感谢大家的观看，也希望能够和大家互相交流学习，有什么分析的不对的地方欢迎大家批评指出

参考资料

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