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