学习 lodash 源码整体架构，打造属于自己的函数式编程类库

笔者之前整理的一篇文章中也有讲过，可以翻看JavaScript 对象所有API解析

MDN Object.create()

Object.create(proto, [propertiesObject]) 方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。 它接收两个参数，不过第二个可选参数是属性描述符（不常用，默认是undefined）。

var anotherObject = {
    name: '若川'
};
var myObject = Object.create(anotherObject, {
    age: {
        value：18,
    },
});
// 获得它的原型
Object.getPrototypeOf(anotherObject) === Object.prototype; // true 说明anotherObject的原型是Object.prototype
Object.getPrototypeOf(myObject); // {name: "若川"} // 说明myObject的原型是{name: "若川"}
myObject.hasOwnProperty('name'); // false; 说明name是原型上的。
myObject.hasOwnProperty('age'); // true 说明age是自身的
myObject.name; // '若川'
myObject.age; // 18;

对于不支持ES5的浏览器，MDN上提供了ployfill方案。

if (typeof Object.create !== "function") {
    Object.create = function (proto, propertiesObject) {
        if (typeof proto !== 'object' && typeof proto !== 'function') {
            throw new TypeError('Object prototype may only be an Object: ' + proto);
        } else if (proto === null) {
            throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
        }

        if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");

        function F() {}
        F.prototype = proto;
        return new F();
    };
}

function mixin(object, source, options) {
 var props = keys(source),
  methodNames = baseFunctions(source, props);

 if (options == null &&
  !(isObject(source) && (methodNames.length || !props.length))) {
  options = source;
  source = object;
  object = this;
  methodNames = baseFunctions(source, keys(source));
 }
 var chain = !(isObject(options) && 'chain' in options) || !!options.chain,
  isFunc = isFunction(object);

 arrayEach(methodNames, function(methodName) {
  var func = source[methodName];
  object[methodName] = func;
  if (isFunc) {
   object.prototype[methodName] = function() {
    var chainAll = this.__chain__;
    if (chain || chainAll) {
     var result = object(this.__wrapped__),
      actions = result.__actions__ = copyArray(this.__actions__);

     actions.push({ 'func': func, 'args': arguments, 'thisArg': object });
     result.__chain__ = chainAll;
     return result;
    }
    return func.apply(object, arrayPush([this.value()], arguments));
   };
  }
 });

 return object;
}

function mixin(object, source, options) {
 // source 对象中可以枚举的属性
 var props = keys(source),
  // source 对象中的方法名称数组
  methodNames = baseFunctions(source, props);

 if (options == null &&
  !(isObject(source) && (methodNames.length || !props.length))) {
  // 如果 options 没传为 undefined  undefined == null 为true
  // 且 如果source 不为 对象或者不是函数
  // 且 source对象的函数函数长度 或者 source 对象的属性长度不为0
  // 把 options 赋值为 source
  options = source;
  // 把 source 赋值为 object
  source = object;
  // 把 object 赋值为 this 也就是 _ (lodash)
  object = this;
  // 获取到所有的方法名称数组
  methodNames = baseFunctions(source, keys(source));
 }
 // 是否支持 链式调用
 // options  不是对象或者不是函数，是null或者其他值
 // 判断options是否是对象或者函数，如果不是或者函数则不会执行 'chain' in options 也就不会报错
 //  且 chain 在 options的对象或者原型链中
 // 知识点 in [MDN in :  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in
 // 如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。

 // 或者 options.chain 转布尔值
 var chain = !(isObject(options) && 'chain' in options) || !!options.chain,
  // object 是函数
  isFunc = isFunction(object);

 // 循环 方法名称数组
 arrayEach(methodNames, function(methodName) {
  // 函数本身
  var func = source[methodName];
  // object 通常是 lodash  也赋值这个函数。
  object[methodName] = func;
  if (isFunc) {
   // 如果object是函数 赋值到  object prototype  上，通常是lodash
   object.prototype[methodName] = function() {
    // 实例上的__chain__ 属性 是否支持链式调用
    // 这里的 this 是 new LodashWrapper 实例 类似如下
    /**
     {
     __actions__: [],
     __chain__: true
     __index__: 0
     __values__: undefined
     __wrapped__: []
     }
     **/

    var chainAll = this.__chain__;
    // options 中的 chain 属性 是否支持链式调用
    // 两者有一个符合链式调用  执行下面的代码
    if (chain || chainAll) {
     // 通常是 lodash
     var result = object(this.__wrapped__),
     // 复制 实例上的 __action__ 到 result.__action__ 和 action 上
     actions = result.__actions__ = copyArray(this.__actions__);

     // action 添加 函数 和 args 和 this 指向，延迟计算调用。
     actions.push({ 'func': func, 'args': arguments, 'thisArg': object });
     //实例上的__chain__ 属性  赋值给 result 的 属性 __chain__
     result.__chain__ = chainAll;
     // 最后返回这个实例
     return result;
    }

    // 都不支持链式调用。直接调用
    // 把当前实例的 value 和 arguments 对象 传递给 func 函数作为参数调用。返回调用结果。
    return func.apply(object, arrayPush([this.value()], arguments));
   };
  }
 });

 // 最后返回对象 object
 return object;
}

// Add `LazyWrapper` methods to `lodash.prototype`.
// baseForOwn 这里其实就是遍历LazyWrapper.prototype上的方法，执行回调函数
baseForOwn(LazyWrapper.prototype, function(func, methodName) {
 // 检测函数名称是否是迭代器也就是循环
 var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName),
  // 检测函数名称是否head和last
  // 顺便提一下 ()这个是捕获分组 而加上 ?:  则是非捕获分组 也就是说不用于其他操作
  isTaker = /^(?:head|last)$/.test(methodName),
  // lodashFunc 是 根据 isTaker 组合 takeRight take methodName
  lodashFunc = lodash[isTaker ? ('take' + (methodName == 'last' ? 'Right' : '')) : methodName],
  // 根据isTaker 和 是 find 判断结果是否 包装
  retUnwrapped = isTaker || /^find/.test(methodName);

 // 如果不存在这个函数，就不往下执行
 if (!lodashFunc) {
  return;
 }
 // 把 lodash.prototype 方法赋值到lodash.prototype
 lodash.prototype[methodName] = function() {
  // 取实例中的__wrapped__ 值 例子中则是 [1,2,3,4,5]
  var value = this.__wrapped__,
   // 如果是head和last 方法 isTaker 返回 [1], 否则是arguments对象
   args = isTaker ? [1] : arguments,
   // 如果value 是LayeWrapper的实例
   isLazy = value instanceof LazyWrapper,
   // 迭代器 循环
   iteratee = args[0],
   // 使用useLazy isLazy value或者是数组
   useLazy = isLazy || isArray(value);

  var interceptor = function(value) {
   // 函数执行 value args 组合成数组参数
   var result = lodashFunc.apply(lodash, arrayPush([value], args));
   // 如果是 head 和 last (isTaker) 支持链式调用 返回结果的第一个参数 否则 返回result
   return (isTaker && chainAll) ? result[0] : result;
  };

  // useLazy true 并且 函数checkIteratee 且迭代器是函数，且迭代器参数个数不等于1
  if (useLazy && checkIteratee && typeof iteratee == 'function' && iteratee.length != 1) {
   // Avoid lazy use if the iteratee has a "length" value other than `1`.
   // useLazy 赋值为 false
   // isLazy 赋值为 false
   isLazy = useLazy = false;
  }
  // 取实例上的 __chain__
  var chainAll = this.__chain__,
   // 存储的待执行的函数 __actions__ 二次取反是布尔值 也就是等于0或者大于0两种结果
   isHybrid = !!this.__actions__.length,
   // 是否不包装 用结果是否不包装 且 不支持链式调用
   isUnwrapped = retUnwrapped && !chainAll,
   // 是否仅Lazy 用isLazy 和 存储的函数
   onlyLazy = isLazy && !isHybrid;

  // 结果不包装 且 useLazy 为 true
  if (!retUnwrapped && useLazy) {
   // 实例 new LazyWrapper 这里的this 是 new LodashWrapper()
   value = onlyLazy ? value : new LazyWrapper(this);
   // result 执行函数结果
   var result = func.apply(value, args);

   /*
   *
   // _.thru(value, interceptor)
   // 这个方法类似 _.tap， 除了它返回 interceptor 的返回结果。该方法的目的是"传递" 值到一个方法链序列以取代中间结果。
   _([1, 2, 3])
   .tap(function(array) {
    // 改变传入的数组
    array.pop();
   })
   .reverse()
   .value();
   // => [2, 1]
   */

   // thisArg 指向undefined 或者null 非严格模式下是指向window，严格模式是undefined 或者nll
   result.__actions__.push({ 'func': thru, 'args': [interceptor], 'thisArg': undefined });
   // 返回实例 lodashWrapper
   return new LodashWrapper(result, chainAll);
  }
  // 不包装 且 onlyLazy 为 true
  if (isUnwrapped && onlyLazy) {
   // 执行函数
   return func.apply(this, args);
  }
  // 上面都没有执行，执行到这里了
  // 执行 thru 函数，回调函数 是 interceptor
  result = this.thru(interceptor);
  return isUnwrapped ? (isTaker ? result.value()[0] : result.value()) : result;
 };
});

function LazyWrapper(value) {
 // 参数 value
 this.__wrapped__ = value;
 // 执行的函数
 this.__actions__ = [];
 this.__dir__ = 1;
 // 过滤
 this.__filtered__ = false;
 // 存储迭代器函数
 this.__iteratees__ = [];
 // 默认最大取值个数
 this.__takeCount__ = MAX_ARRAY_LENGTH;
 // 具体取值多少个，存储函数和类型
 this.__views__ = [];
}
/**
* Extracts the unwrapped value from its lazy wrapper.
*
* @private
* @name value
* @memberOf LazyWrapper
* @returns {*} Returns the unwrapped value.
*/
function lazyValue() {
 // this.__wrapped__ 是 new LodashWrapper 实例 所以执行.value 获取原始值
 var array = this.__wrapped__.value(),
  //
  dir = this.__dir__,
  // 是否是函数
  isArr = isArray(array),
  // 是否从右边开始
  isRight = dir < 0,
  // 数组的长度。如果不是数组，则是0
  arrLength = isArr ? array.length : 0,
  // 获取 take(3) 上述例子中 则是 start: 0，end: 3
  view = getView(0, arrLength, this.__views__),
  start = view.start,
  end = view.end,
  // 长度 3
  length = end - start,
  // 如果是是从右开始
  index = isRight ? end : (start - 1),
  // 存储的迭代器数组
  iteratees = this.__iteratees__,
  // 迭代器数组长度
  iterLength = iteratees.length,
  // 结果resIndex
  resIndex = 0,
  // 最后获取几个值，也就是 3
  takeCount = nativeMin(length, this.__takeCount__);

 // 如果不是数组，或者 不是从右开始 并且 参数数组长度等于take的长度 takeCount等于长度
 // 则直接调用 baseWrapperValue 不需要
 if (!isArr || (!isRight && arrLength == length && takeCount == length)) {
  return baseWrapperValue(array, this.__actions__);
 }
 var result = [];

 // 标签语句 label
 // MDN label 链接
 // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/label
 // 标记语句可以和 break 或 continue 语句一起使用。标记就是在一条语句前面加个可以引用的标识符（identifier）。
 outer:
 while (length-- && resIndex < takeCount) {
  index += dir;

  var iterIndex = -1,
   // 数组第一项
   value = array[index];

  while (++iterIndex < iterLength) {
   // 迭代器数组 {iteratee: function{}, typy: 2}
   var data = iteratees[iterIndex],
    iteratee = data.iteratee,
    type = data.type,
    // 结果 迭代器执行结果
    computed = iteratee(value);

   if (type == LAZY_MAP_FLAG) {
    // 如果 type 是 map 类型，结果 computed 赋值给value
    value = computed;
   } else if (!computed) {
    if (type == LAZY_FILTER_FLAG) {
     // 退出当前这次循环，进行下一次循环
     continue outer;
    } else {
     // 退出整个循环
     break outer;
    }
   }
  }
  // 最终数组
  result[resIndex++] = value;
 }
 // 返回数组 例子中则是 [2, 3, 4]
 return result;
}
// Ensure `LazyWrapper` is an instance of `baseLodash`.
LazyWrapper.prototype = baseCreate(baseLodash.prototype);
LazyWrapper.prototype.constructor = LazyWrapper;

LazyWrapper.prototype.value = lazyValue;