underscore 诞生记（一）—— 基本结构搭建

1. 简介

underscore 是一款成熟可靠的第三方开源库，正如 jQuery 统一了不同浏览器之间的 DOM 操作的差异，让我们可以简单地对 DOM 进行操作，underscore 则提供了一套完善的函数式编程的接口，让我们更方便地在 JavaScript 中实现函数式编程。

jQuery 在加载时，会把自身绑定到唯一的全局变量 $ 上，underscore 与其类似，会把自身绑定到唯一的全局变量 _ 上，这也是为啥它的名字叫 underscore 的原因。

在搭建 underscore 之前，让我们先来了解一下什么是 “立即执行函数（IIFE）”.

2. 立即执行函数（IIFE）

立即执行函数，顾名思义，就是定义好的匿名函数立即执行，写法如下：

(function(name) {
  console.log(name);
})('suporka');

其作用是：通过定义一个匿名函数，创建了一个新的函数作用域，相当于创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏污染全局的命名空间。

// 函数外部拿不到内部的变量，因此不会造成变量污染，内部的变量在内部使用即可
(function() {
  var name = 'suporka';
})();

console.log(name); // name is undefinded

3. 全局变量 _ 的挂载

当我们在浏览器中使用 _.map([1,2,3], function(item){console.log(item)}) 时， _ 是挂载在 Window对象上的，如果我们想在 node 环境中使用呢 ？

(function() {
  // root 为挂载对象，为 self 或 global 或 this 或 {}
  var root =
    (typeof self == 'object' && self.self === self && self) ||
    (typeof global == 'object' && global.global === global && global) ||
    this ||
    {};

  // _ 应该是一个对象，对象内有属性函数
  var _ = {};
  root._ = _;
  _.VERSION = '1.9.1'; // 给我们的 underscore 一个版本号吧
})();

4. 函数式风格 && 面向对象风格的双重实现

首先我们实现一个倒装字符串的方法

(function() {
  // root 为挂载对象，为 self 或 global 或 this 或 {}
  var root =
    (typeof self == 'object' && self.self === self && self) ||
    (typeof global == 'object' && global.global === global && global) ||
    this ||
    {};

  // _ 应该是一个对象，对象内有属性函数
  var _ = {};

  root._ = _;

  _.VERSION = '1.9.1'; // 给我们的 underscore 一个版本号吧

  /**
   * 字符串倒装
   */
  _.reverse = function(string) {
    return string
      .split('')
      .reverse()
      .join('');
  };
})();

_.reverse('suporka'); // akropus

不错，很快实现，但是这种是函数式写法，调用一个函数去实现，如果我们要实现面向对象写法呢？如 _('suporka').reverse()! underscore 是支持这种写法的，仔细观察 _('suporka') , 你会发现，_ 是一个函数啊，和我们前面定义的 var _ = {}; 不一致，那么该怎么实现呢？

实例原型

我们先测试一下：如果 _ 为函数，我们需要保存其传进来的参数 obj . new _() 生成一个实例原型对象

function _(obj) {
  this._wrapped = obj;
}
_.reverse = function(string) {
  return string
    .split('')
    .reverse()
    .join('');
};
_.reverse('suporka'); // "akropus", 函数式调用没问题

new _('suporka');

从图中我们可以看出，实例原型对象的 __proto__ （原型）的 constructor 构造函数指回了原来的 _(obj) 函数，要调用其 reverse() 方法只能 new _('suporka').constructor.reverse()多了一个层级，不符合我们原本的期望。那我们不如在_proto_ 属性下增加一个和 reverse 一样的函数，这样不就可以直接调用了吗？

let us try it !

function _(obj) {
  this._wrapped = obj;
}
_.reverse = function(string) {
  return string
    .split('')
    .reverse()
    .join('');
};
_.reverse('suporka'); // "akropus", 函数式调用没问题

_.prototype.reverse = function() {
  return this._wrapped
    .split('')
    .reverse()
    .join('');
};
new _('suporka').reverse(); // "akropus", 面向对象式调用没问题

5. 改造 _() function

new _('suporka').reverse() 有点累赘，去掉 new, 重写 function _()

var _ = function(obj) {
  // 如果传入的是实例后对象，返回它
  if (obj instanceof _) return obj;
  // 如果还没有实例化，new _(obj)
  if (!(this instanceof _)) return new _(obj);
  this._wrapped = obj;
};

_('suporka').reverse(); // "akropus", 面向对象式调用没问题

6. 写一个迭代函数 map()

/**
 * 数组或对象遍历方法，并返回修改后的对象或数组
 * @param iteratee 回调函数
 * @param context 回调函数中this的指向
 */
_.map = function(obj, iteratee, context) {
  var length = obj.length,
    results = Array(length);
  for (var index = 0; index < length; index++) {
    results[index] = iteratee.call(context, obj[index], index, obj);
  }

  return results;
};

_.prototype.map = function(iteratee, context) {
  var length = this._wrapped.length,
    results = Array(length);
  for (var index = 0; index < length; index++) {
    results[index] = iteratee.call(
      context,
      this._wrapped[index],
      index,
      this._wrapped
    );
  }

  return results;
};

_([1, 2, 3]).map(
  function(item) {
    console.log(item + this.value);
  },
  { value: 1 }
); // 2，3，4
_.map(
  [1, 2, 3],
  function(item) {
    console.log(item + this.value);
  },
  { value: 1 }
); // 2,3,4

嗯嗯，真好，完美实现。到这里你会发现一个问题，每次我新增一个方法，都得在 prototype 上同时写多一次这个相似函数，你会发现两者之间只是 obj 换成了 this._wrapped.有没有办法让它自动生成呢？答案肯定是有！

7. 自动创建原型方法

在这之前，我们需要先实现一个遍历方法 each()，如下：

// 最大数值
var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
// 判断是否为数组
var isArrayLike = function(collection) {
  var length = collection.length;
  return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};

/**
 * 数组或对象遍历方法
 */
_.each = function(obj, callback) {
  var length,
    i = 0;

  if (isArrayLike(obj)) {
    // 数组
    length = obj.length;
    for (; i < length; i++) {
      //   这里隐式的调用了一次 callback.call(obj[i], obj[i], i);
      if (callback.call(obj[i], obj[i], i) === false) {
        break;
      }
    }
  } else {
    // 对象
    for (i in obj) {
      if (callback.call(obj[i], obj[i], i) === false) {
        break;
      }
    }
  }

  return obj;
};

用 each() 来遍历 _ 上挂载的所有方法函数，并给 prototype 创建相应的方法函数。那么，在此之前，我们需要知道 _ 上挂载了哪些方法名，来写个 functions() 实现它

/**
 * 判断是否为 function
 */
_.isFunction = function(obj) {
  return typeof obj == 'function' || false;
};

/**
 * 获取_的所有属性函数名
 */
_.functions = function(obj) {
  var names = [];
  for (var key in obj) {
    if (_.isFunction(obj[key])) names.push(key);
  }
  return names.sort();
};

用 each()实现它：

var ArrayProto = Array.prototype;
var push = ArrayProto.push;
_.each(_.functions(_), function(name) {
  var func = _[name];
  _.prototype[name] = function() {
    var args = [this._wrapped];
    // args = [this._wrapped, arguments[0], arguments[1]...], 相当于用 this._wrapped 代替 obj 实现
    push.apply(args, arguments);
    return func.apply(_, args);
  };
});

7. 当前最终代码

(function() {
  // root 为挂载对象，为 self 或 global 或 this 或 {}
  var root =
    (typeof self == 'object' && self.self === self && self) ||
    (typeof global == 'object' && global.global === global && global) ||
    this ||
    {};

  var _ = function(obj) {
    // 如果传入的是实例后对象，返回它
    if (obj instanceof _) return obj;
    // 如果还没有实例化，new _(obj)
    if (!(this instanceof _)) return new _(obj);
    this._wrapped = obj;
  };

  // 最大数值
  var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
  var ArrayProto = Array.prototype;
  var push = ArrayProto.push;
  // 判断是否为数组
  var isArrayLike = function(collection) {
    var length = collection.length;
    return (
      typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX
    );
  };

  root._ = _;

  _.VERSION = '1.9.1'; // 给我们的 underscore 一个版本号吧

  /**
   * 字符串倒装
   */
  _.reverse = function(string) {
    return string
      .split('')
      .reverse()
      .join('');
  };
  /**
   * 判断是否为 function
   */
  _.isFunction = function(obj) {
    return typeof obj == 'function' || false;
  };

  /**
   * 获取_的所有属性函数名
   */
  _.functions = function(obj) {
    var names = [];
    for (var key in obj) {
      if (_.isFunction(obj[key])) names.push(key);
    }
    return names.sort();
  };
  /**
   * 数组或对象遍历方法，并返回修改后的对象或数组
   * @param iteratee 回调函数
   * @param context 回调函数中this的指向
   */
  _.map = function(obj, iteratee, context) {
    var length = obj.length,
      results = Array(length);
    for (var index = 0; index < length; index++) {
      results[index] = iteratee.call(context, obj[index], index, obj);
    }

    return results;
  };

  /**
   * 数组或对象遍历方法
   */
  _.each = function(obj, callback) {
    var length,
      i = 0;

    if (isArrayLike(obj)) {
      // 数组
      length = obj.length;
      for (; i < length; i++) {
        //   这里隐式的调用了一次 callback.call(obj[i], obj[i], i);
        if (callback.call(obj[i], obj[i], i) === false) {
          break;
        }
      }
    } else {
      // 对象
      for (i in obj) {
        if (callback.call(obj[i], obj[i], i) === false) {
          break;
        }
      }
    }

    return obj;
  };

  _.each(_.functions(_), function(name) {
    var func = _[name];
    _.prototype[name] = function() {
      var args = [this._wrapped];
      // args = [this._wrapped, arguments[0], arguments[1]...], 相当于用 this._wrapped 代替 obj 实现
      push.apply(args, arguments);
      return func.apply(_, args);
    };
  });
})();

未完待续，静待下篇

前端进阶小书（advanced_front_end）

前端每日一题（daily-question）

webpack4 搭建 Vue 应用（createVue）