xlshen / underscore Goto Github PK

var restArgs = function(func, startIndex) {
    // 如果没有传入startIndex，startIndex默认为func函数形参个数的最后一个，也就说最后一个形参默认为rest对象
    startIndex = startIndex == null ? func.length - 1 : +startIndex;
    return function() {
            // 获取实际参数个数和startIndex大小之差与0的最大值
        var length = Math.max(arguments.length - startIndex, 0),
            // 构建长度为length的rest数组
            rest = Array(length),
            index = 0;

        // 初始化startIndex之后的所有元素为rest数组元素
        for (; index < length; index++) {
            rest[index] = arguments[index + startIndex];
        }
        // call性能加速处理常用0, 1, 2三种情况，剩余情况apply处理
        switch (startIndex) {
            case 0:
                return func.call(this, rest);
            case 1:
                return func.call(this, arguments[0], rest);
            case 2:
                return func.call(this, arguments[0], arguments[1], rest);
        }
        // 如果startIndex超过2，则执行默认的方法：构建args数组，含有所有参数
        var args = Array(startIndex + 1);
        // 构建args数组，结构：[1, 3, 4, [2, 3, 5]]
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index];
        }
        // args最后一个参数为rest对象
        args[startIndex] = rest;
        return func.apply(this, args);
    };
};

  _.restArgs(function(value, rest){
    console.log(value, rest);
  })(1, 2, 3);
  // 1, [2, 3]

  // Add your own custom functions to the Underscore object.
  // 混入函数
  // ① 挂载_下面的函数到_.prototype原型上
  // ② 扩展underscroe库函数，参数为对象，方法在对象的属性上
  _.mixin = function(obj) {
      // 遍历对象下面所有方法挂载到_上面和_.prototype上面
      _.each(_.functions(obj), function(name) {
          // 挂载到_上面【此处为扩展，用户可以自定义自己的对象方法混入到_对象上面】
          var func = _[name] = obj[name];
          // 挂载到_.prototype上面
          _.prototype[name] = function() {
              // 第一个参数为OOP的对象，例如：_([1, 2, 3]).each(function(){})中，this._warpped = [1, 2, 3];
              var args = [this._wrapped];
              // arguments为name需要的其他参数,例如：_([1, 2, 3]).each(function(){}, this)中,arguments为function(){}和this
              push.apply(args, arguments);
              // 执行func函数，支持链式操作
              return chainResult(this, func.apply(_, args));
          };
      });
      return _;
  };
  // Add all of the Underscore functions to the wrapper object.
  // 混入_对象
  _.mixin(_);

  // 自定义对象方法，扩展到_对象
  var _obj = {
    tips: function(obj, msg){
      console.log(obj, msg);
    }
  }
  _.mixin(_obj);
  _.tips([1,2,3], "underscore"); // [1, 2, 3] "underscore"
  _([1,2,3]).tips("underscore"); // [1, 2, 3] "underscore"

  // 非 OOP 链式调用
  _.chain([1, 2, 3])
  .map(function(a) {return a;})
  .reverse()
  .value(); // [3, 2, 1]

  // OOP 链式调用
  _([1, 2, 3])
  .chain()
  .map(function(a){return a;})
  .first()
  .value(); // 1

  _.chain = function(obj) {
    var instance = _(obj);
    instance._chain = true;
    return instance;
  };

  // _.mixin()方法中_.prototype[name] = function() {...}最后返回
  return chainResult(this, func.apply(_, args));
  // chainResult实现函数
  var chainResult = function(instance, obj) {
      return instance._chain ? _(obj).chain() : obj;
  };

  var _ = function(obj) {
      // 如果参数是"_"的实例，直接返回，相当于容错机制
      if (obj instanceof _) return obj;
      // 否则返回实例new _(obj), 继续调用该函数，下一次进来之后直接保存下一步的变量_wrapped
      if (!(this instanceof _)) return new _(obj);
      // 实例对象_wrapped属性中存储了接受的参数
      this._wrapped = obj;
  };

  // 直接调用
  _.each([1, 2, 3], function(value, index){
    console.log(value); // 1, 2, 3
  });
  // OOP方式调用
  _([1, 2, 3]).each(function(value, index){
    console.log(value); // 1, 2, 3
  });

  // Internal function that returns an efficient (for current engines) version
  // of the passed-in callback, to be repeatedly applied in other Underscore
  // functions.
  // 内部优化方法，参数：函数，执行上下文，参数个数
  // 返回根据传入函数在不同执行上下文，不同参数个数的情况下执行的函数
  var optimizeCb = function(func, context, argCount) {
      // 如果没有指定执行上下文，返回该函数
      if (context === void 0) return func;
      switch (argCount) {
          case 1:
              return function(value) {
                  return func.call(context, value);
              };
              // The 2-parameter case has been omitted only because no current consumers made use of it.
              // 针对下面的null的问题，已经在github提交了pull request(https://github.com/jashkenas/underscore/pull/2732)，我认为应该是undefined而非null，具体在下面分析中会提到
          // case void 0:
          case null:
              // 在执行上下文中，没有参数个数，执行下面
              // 在undefined情况下_.each(), _.map()内部用到
          case 3:
              return function(value, index, collection) {
                  return func.call(context, value, index, collection);
              };
              // _.reduce(), _.reduceRight()
          case 4:
              return function(accumulator, value, index, collection) {
                  return func.call(context, accumulator, value, index, collection);
              };
      }
      // 其实不用上面的 switch-case 语句，直接执行下面的 return 函数就行了
      // 理由就是充分利用了call的参数格式化优化
      return function() {
          return func.apply(context, arguments);
      };
  };

  // _.each()方法在内部调用时首先进行的就是optimizeCb()方法的优化，把_.each()方法源码放到下面
  _.each([1, 2, 3], function(value, index){
    console.log(value, index); // 1, 2, 3
  }, this);
  // _.each()方法源码
  _.each = _.forEach = function(obj, iteratee, context) {
      // 执行函数分发优化策略，即前面的optimizeCb函数，赋值给局部变量iteratee进行代理执行
      iteratee = optimizeCb(iteratee, context);
      // 执行闭包iteratee方法
      var i, length;
      if (isArrayLike(obj)) {
          // 如果是类数组对象
          for (i = 0, length = obj.length; i < length; i++) {
              iteratee(obj[i], i, obj);
          }
      } else {
          // 普通对象
          var keys = _.keys(obj);
          for (i = 0, length = keys.length; i < length; i++) {
              iteratee(obj[keys[i]], keys[i], obj);
          }
      }
      // 返回该对象，链式操作使用
      return obj;
  };

  // iteratee(obj[i], i, obj);
  return function(value, index, collection) {
      // context == window，value是每个值，index是索引，collection是传入的数组本身，返回函数执行结果
      return func.call(context, value, index, collection);
  };

  // An internal function for creating assigner functions.
  // 浅拷贝代码核心
  // 内部调用函数：_.extend(), _.extendOwn(), _.defaults()
  // 1. _.extend = createAssigner(_.allKeys);
  // 2. _.extendOwn = _.assign = createAssigner(_.keys);
  // 3. _.defaults = createAssigner(_.allKeys, true);
  // 文章号：[underscore对象浅拷贝核心](https://github.com/xlshen/underscore/issues/5)
  // keysFunc为_.key或者_.allKeys方法，返回对象的属性名组成的数组
  var createAssigner = function(keysFunc, defaults) {
      // 返回函数闭包，通过传入的对象执行以下函数
      return function(obj) {
          // 获取传入执行函数参数个数
          var length = arguments.length;
          // 如果defaults执行true，再对传入对象包装一下，此时如果obj === null || undefined
          // 则obj也转换为对象，则执行下一步时就不会因为obj为null而返回null
          if (defaults) obj = Object(obj);
          // 如果参数只有原始对象一个或者没有的情况，或者obj值为null的话，直接返回该对象
          // 1. _.extend()和_.extendOwn()调用是defaults为undefined，此时length<2或者obj值为null时，返回该对象
          // 2. _.defaults()调用时，defaults为true，此时length<2时，返回该对象【注：此时obj不可能为null，因为即使原始传入的obj为null，经过上一步操作，null也会转换为Object对象】
          if (length < 2 || obj == null) return obj;
          // _.extendOwn(destination, source1, source2, ...) 外层循环从source1开始取值
          // 外层循环参数取源对象source1，source2...，从source1开始，顺序往后执行
          for (var index = 1; index < length; index++) {
                  // 获取源对象
              var source = arguments[index],
                  // 返回源对象中的属性名数组
                  keys = keysFunc(source),
                  // 源对象属性名数组长度
                  l = keys.length;
              // 内层循环源对象属性名数组
              for (var i = 0; i < l; i++) {
                  // 获取属性名
                  var key = keys[i];
                  // 1. _.extendOwn(), _.extend()执行时defaults === false，直接覆盖目标对象相应的属性值
                  // 2. _.defaults()执行时defaults === true且目标对象当前属性为undefined时，赋值该对象该属性值；如果该对象该属性存在，不执行任何操作
                  if (!defaults || obj[key] === void 0) obj[key] = source[key];
              }
          }
          // 返回目标对象
          return obj;
      };
  };

  // Fill in a given object with default properties.
  // 扩展目标对象，但是禁止扩展修改目标对象已经存在的属性键值对
  _.defaults = createAssigner(_.allKeys, true);
  // Extend a given object with all the properties in passed-in object(s).
  // 扩展目标对象，对于源对象及其原型链中所有可枚举属性对目标对象进行扩展修改
  _.extend = createAssigner(_.allKeys);

  // Assigns a given object with all the own properties in the passed-in object(s).
  // (https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
  // 扩展目标对象，对于源对象仅获取自身可枚举属性扩展修改目标对象，但是源对象原型链属性不进行扩展修改
  _.extendOwn = _.assign = createAssigner(_.keys);

  var _proto = {name: "xlshen", userName: "13日星期五"};
  var obj = Object.create(_proto, {
    age: {
      value: 20,
      writable: true,
      enumerable: true,
      configurable: true
    }
  });
  _.extend({age: 18}, obj); // {name: "xlshen", age: 20, userName: "13日星期五"}
  _.extendOwn({name: "xlshen"}, {name: "XXX", age: 20}); // {name: "XXX", age: 20}
  _.defaults({name: "xlshen"}, {name: "XXX", age: 20}); // {name: "xlshen", age: 20}