underscore源码学习（一）

前言

最近在社区浏览文章的时候，看到了一位大四学长在寻求前端工作中的面经，看完不得不佩服，掌握知识点真是全面，无论是前端后台还是其他，都有涉猎。

在他写的文章中，有这么一句话，大概意思是，没有看过一个库或者框架的源码还敢出来混。然后自己心虚了一下，一直以来，都只是学习使用框架或库，或者在过程中有学习框架的思想，但并不深入。例如，在学习Vue.js中，我曾经去探索过Vue中的双向绑定是如何实现的，通过什么模式，什么API，作者的思想是什么，也曾经实现过简单版的双向绑定。
<!--more-->
但是感觉自己在这方面并没有什么提高，尤其在原生JavaScript的学习中，一些不常用的API经常忘，思维也不够好。所以有了学习优秀的库的源码的想法，一方面能够学习作者的思想，提高自己的分析能力，另一方面我觉得如果能好好分析一个库的源码，对自己的提升也是有的。

所以，刚开始，我从源码比较短的underscore.js(包含注释只有1.5k行)开始学习起。

什么是underscore

Underscore一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。它是这个问题的答案：“如果我在一个空白的HTML页面前坐下， 并希望立即开始工作， 我需要什么？“...它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。——摘自Underscore中文文档

我的学习之路是基于Underscore1.8.3版本开始的。

// Current version.
 _.VERSION = '1.8.3';

作用域包裹

与其他第三方库一样，underscore最外层是一个立即执行函数(IIFE)，来包裹自己的业务逻辑。一般使用IIFE有如下好处，可以创建一个独立的沙箱似的作用域，避免全局污染，还可以防止其他代码对该函数内部造成影响。(但凡在立即执行函数中声明的函数、变量等，除非是自己想暴露，否则绝无可能在外部获得)

(function(){

    // ...执行逻辑
    
}.call(this))

学习的点，当我们要写自己的库或者封装某个功能函数时，可以给自己的库或函数在最外层包裹一个立即执行函数，这样既不会受外部影响，也不会给外部添麻烦。

_对象

underscore有下划线的意思，所以underscore通过一个下划线变量_来标识自身，值得注意的是，_是一个函数对象或者说是一个构造函数，并且支持无new调用的构造的函数，所有API都会挂载在这个对象上，如_.each,_.map等

var _ = function(obj) {
    if(obj instanceof _) return obj;
    if(!(this instanceof _)) return new _(obj) //实例化
    this._wrapped = obj
}

全局命名空间

underscore使用root变量保存了全局的this。

var root = this;

为了防止其他库对_的冲突或影响，underscore做了如下处理，

var previousUnderscore = root._
_.noConflict = function() {
    root._ = perviousUnderscore;
    return this;
}

执行环境判断

underscore 既能够服务于浏览器，又能够服务于诸如 nodejs 所搭建的服务端。
一般，在客户端（浏览器）环境中，_即为window._=_，暴露在全局中。若在node环境中，_将被作为模块导出，并且向后兼容老的API，即require。

if (typeof exports !== 'undefined') {
  if (typeof module !== 'undefined' && module.exports) {
    exports = module.exports = _;  
  }
  exports._ = _ ;
} esle {
  root._ = _;
}

缓存局部变量及快速引用

underscore本身用到了不少ES5的原生方法，在浏览器支持的条件下，underscore率先使用原生的ES5方法。如下代码所示，underscore通过局部变量来保存一些常用到的方法或者属性。
这样做有几个好处：

• 便于压缩代码
• 提高代码性能，减少在原型链中的查找次数
• 同时也可减少代码量，避免在使用时冗长的书写

var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;
var
  push             = ArrayProto.push,
  slice            = ArrayProto.slice,
  toString         = ObjProto.toString,
  hasOwnProperty   = ObjProto.hasOwnProperty;
var
  nativeIsArray      = Array.isArray,
  nativeKeys         = Object.keys,
  nativeBind         = FuncProto.bind,
  nativeCreate       = Object.create;

undefined处理

在underscore中，有很多函数都会有一个context函数，也就是当前函数的执行上下文，underscore对其进行了处理，如果没有传入context即context为undefined，则返回原函数。
这里判断值为undefined用的是void 0，如下：

if (context === void 0) return func

作为一只涉猎尚浅的小白，查阅资料之后终于知道这里作者为什么要用void 0来做判断了。

详情可点链接了解，这样做更加安全可靠。
在还没看到这个代码时， 如果我要判断一个值是不是undefined，我会这样写

if (context === undefined) {}

但是，在发现作者的void 0之后，才发现这样写并不可靠，在JavaScript中，我们可以这样写：

args => {
  let undefined = 1
  console.log(undefined) // => 1
  if (args === undefined) {
    //...
  }
}

如果这样写，undefined就被轻易地修改为了1，所以对于我们之后定义的undefined的理解有歧义。所以，在JavaScript中，把undefined直接解释为“未定义”是有风险的，因为它可能被修改。

学习：以后判断undefined直接使用void 0, 看起来也优雅一点（滑稽脸）。

处理类数组

// getLength 函数
// 该函数传入一个参数，返回参数的 length 属性值
// 用来获取 array 以及 arrayLike 元素的 length 属性值
var getLength = property('length');

// 判断是否是 ArrayLike Object
// 类数组，即拥有 length 属性并且 length 属性值为 Number 类型的元素
// 包括数组、arguments、HTML Collection 以及 NodeList 等等
// 包括类似 {length: 10} 这样的对象
// 包括字符串、函数等
var isArrayLike = function(collection) {
  var length = getLength(collection);
  return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};

对象创建的特殊处理

为了处理Object.create的跨浏览器的兼容性，underscore进行了特殊的处理。我们知道，原型是无法直接实例化的，因此我们先创建一个空对象，然后将其原型指向这个我们想要实例化的原型，最后返回该对象其一个实例。其代码如下：

var Ctor = function() {};  // 用于代理原型转换的空函数

var baseCreate = function(prototype) {
  if (!(_.isObject(prototype))) return {}; // 如果参数不是对象，直接返回空对象
  if (nativeCreate) return nativeCreate(prototype); // 如果原生的对象创建可以使用，返回该方法根据原型创建的对象
    
  // 处理没有原生对象创建的情况
  Ctor.prototype = prototype;  // 将空函数的原型指向要使用的原型
  var result = new Ctor();  // 创建一个实例
  Ctor.prototype = null;  // 恢复Ctor的原型供下次使用
  return result;  // 返回该实例
};

underscore中的迭代(iteratee)

在函数式编程中，使用更多的是迭代，而不是循环。
迭代：

var res = _.map([1,2], function(item){
  return item * 2
})

循环：

var arr = [1,2]
var res = []
for(var i = 0; i < arr.length; i++) {
  res.push(arr[i] * 2)
}

在underscore中迭代使用非常巧妙，源码也写的非常好，通过传入的数据类型不同而选择不同的迭代函数。
首先，在underscore中_.map的实现如下：

_.map = _.collect = function(obj, iteratee, context) {
  iteratee = cb(iteratee, context);
  var keys = !isArrayLike(obj) && _.keys(obj),
      length = (keys || obj).length,
      results = Array(length);
  for (var index = 0; index < length; index++) {
    var currentKey = keys ? keys[index] : index;
    results[index] = iteratee(obj[currentKey], currentKey, obj) //(value, index, obj)
  }
  return results;
}

可以看到，在_.map函数中的第二个参数iteratee，这个参数的格式可以是函数，对象，字符串。underscore会将其处理成一个函数，这将由回调函数cb来完成，我们来看一下cb的实现：

var cb = function(value, context, argCount) {
 // 是否用默认的迭代器 如果没有传入value 则返回当前迭代元素自身
 if (value == null) return _.identity;
 // 如果value是一个回调函数, 则需要优化回调 优化函数为optimizeCb
 if (_.isFunction(value)) return optimizeCb(value, context, argCount);
 // 如果value是个对象, 则返回一个matcher进行对象匹配
 if (_.isObject(value)) return _.matcher(value)
 // 否则, 如果value只是一个字面量, 则把value看做是属性名称, 返回一个对应的属性获得函数
 return _.property(value);
}

前面两个比较容易理解，看看当传入的数据格式为对象的情况，如果 value 传入的是一个对象，那么返回iteratee（_.matcher）的目的是想要知道当前被迭代元素是否匹配给定的这个对象：

var results = _.map([{name:'water'},{name: 'lzb',age:13}], {name: 'lzb'});
// => results: [false,true]

如果传入的是字面量，如数字，字符串等， 他会返回对应的key值，如下：

var results = _.map([{name:'water'},{name:'lzb'}],'name');
// => results: ['water', 'lzb'];

回调处理

在上面的cb函数中，我们可以看到，当传入的数据格式是函数，则需要通过optimizeCb函数进行统一处理，返回对应的回调函数，下面是underscore中optimizeCb函数的实现：

// 回调处理
// underscore 内部方法
// 根据 this 指向（context 参数）
// 以及 argCount 参数
// 二次操作返回一些回调、迭代方法
var optimizeCb = function(func, context, argCount) {
  // // void 0 会返回纯正的undefined,这样做避免undefined已经被污染带来的判定失效
  if (context === void 0) return func;
  switch (argCount == null ? 3 : argCount) {
    // 回调参数为1时, 即迭代过程中,我们只需要值
    // _.times
    case 1: return function(value) {
      return func.call(context, value);
    };
    case 2: return function(value, other) {
      return func.call(context, value, other);
    };
    // 3个参数(值,索引,被迭代集合对象)
    // _.each、_.map  (value, key, obj)
    case 3: return function(value, index, collection) {
      return func.call(context, value, index, collection);
    };
    // 4个参数(累加器(比如reducer需要的), 值, 索引, 被迭代集合对象)
    // _.reduce、_.reduceRight
    case 4: return function(accumulator, value, index, collection) {
      return func.call(context, accumulator, value, index, collection);
    };
  }

  // 如果都不符合上述的任一条件，直接使用apply调用相关函数
  return function() {
    return func.apply(context, arguments);
  };
}

optimizeCb 的总体思路就是：传入待优化的回调函数 func，以及迭代回调需要的参数个数argCount，根据参数个数分情况进行优化。

在underscore的_.times函数视线中，_times的作用执行一个传入iteratee函数n次，并返回由每次执行结果组成的数组。它的迭代过程iteratee只需要1个参数(当前迭代的索引)
_.times函数在underscore中的实现：

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

_.times的使用

function getIndex(index) {
  return index;
}
var results = _.times(3, getIndex); // => [0,1,2]

optimizeCb函数中当argCount的个数为2的情况并不常见，在_.each,_.map等函数中，argCount的值为3(value, key, obj)，当argCount需要四个参数时，这四个参数的格式为：

• accumulator：累加器
• value：迭代元素
• index：迭代索引
• collection：当前迭代集合

underscore中reduce的实现如下：

/**
 * reduce函数的工厂函数, 用于生成一个reducer, 通过参数决定reduce的方向
 * @param dir 方向 left or right
 * @returns {function}
 */
function createReduce(dir) {
  function iterator(obj, iteratee, memo, keys, index, length) {
    for(; index >= 0 && index < length; index += dir) {
      var currentKey = keys ? keys[index] : index;
      // memo 用来记录最新的 reduce 结果
      // 执行 reduce 回调, 刷新当前值
      memo = iteratee(memo, obj[currentKey], currentKey, obj);
    }
    return memo;
  }
  return function(obj, iteratee, memo, context) {
    // 优化回调
    iteratee = optimizeCb(iteratee, context, 4);
    var keys = !isArrayLike(obj) && _.keys(obj),
        length = (keys || obj).length,
        index = dir > 0 ? 0 : length - 1;
    if (arguments.length < 3) {
      // 如果没有传入memo初始值 则从左第一个为初始值 从右则最后一个为初始值
      memo = obj[keys ? keys[index] : index];
      index += dir;
    }
    // return func
    return iterator(obj, iteratee, memo, keys, index, length);
  }
}

例如在_.reduce、_.reduceRight中，argCount的值为4。看看underscore中_.reduce的使用例子

var sum = _.reduce([1,2,3,4], function(accumulator, value, index, collection){
  return accumulator + value;
}, 0) // => 10