跟underscore一起学如何写函数库

发表于 | 分类于

目的

Underscore 是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。

本文主要用于梳理和研究underscore内部是如何组织和处理函数的。

通过这篇文章，我们可以：

了解underscore在函数组织方面的巧妙构思；

为自己书写函数库提供一定思路；

我们开始！

自己写个函数库

前端的小伙伴一定不会对jQuery陌生，经常使用$.xxxx的形式进行进行调用，underscore也使用_.xxxx，如果自己在ES5语法中写过自定义模块的话，就可以撸出下面一段代码：

1
2
3
4
5
6
7
8
9
10
11
(function(){
    //定义
    var root = this;
    var _ = {};
    _.first = function(arr,n=0){
        if(n==0) return arr[0];
        return arr.slice(0,n);
    }
    root._ = _;
})();
console.log(this);

在Chrome浏览器中打开之后，打印出如下结果：

image-20190305235718888

我们看到在全局对象下有一个_属性，属性下面挂载了自定义函数，我们不妨使用_.first(xxxx)在全局环境下直接调用。

1
2
3
console.log(_.first([1,2,3,4]));
console.log(_.first([1,2,3,4],1));
console.log(_.first([1,2,3,4],3));

输出结果如下：

image-20190306000334727

没问题，我们的函数库制作完成了，我们一般直接这么用，也不会有太大问题。

underscore是怎么做的？

underscore正是基于上述代码的完善，那么underscore是如何接着往下做的呢？容我娓娓道来！

对兼容性的考虑

1
2
3
4
5
6
7
// Establish the root object, `window` (`self`) in the browser, `global`
// on the server, or `this` in some virtual machines. We use `self`
// instead of `window` for `WebWorker` support.
var root = typeof self == 'object' && self.self === self && self ||
              typeof global == 'object' && global.global === global && global ||
              this ||
              {};

上面是underscore1.9.1IIFE函数中的源码，对应于我们上面自己写的var root = this;。

在源码中作者也解释了：创建root对象，并且给root赋值：

浏览器端：window也可以是window.self或者直接self

服务端（node）：global

WebWorker：self

虚拟机：this

underscore充分考虑了兼容性。

支持两种不同风格的函数调用

在underscore中我们可以使用两种方式调用函数：

  1. 函数式的调用：console.log(_.first([1,2,3,4]));
  2. 对象式调用：console.log(_([1,2,3,4])).first();

在underscore中，它们返回的结果都是相同的。

第一种方式没有问题，难点就是第二种方式的调用。

对象式调用的实现

解决这个问题要达到两个目的：

  1. _是一个函数，并且调用返回一个对象；
  2. 这个对象依然能够调用挂载在_对象上声明的方法。

我们来看看underscore对于_的实现：

1
2
3
4
5
var _ = function(obj) {
      if (obj instanceof _) return obj;
      if (!(this instanceof _)) return new _(obj);
      this._wrapped = obj;
};

相關圖片

不怕，我们不妨调用_([1,2,3,4]))看看他是怎么执行的！

第一步：if (obj instanceof _) return obj;传入的对象及其原型链上有_类型的对象，则返回自身。我们这里的[1,2,3,4]显然不是，跳过。

第二步：if (!(this instanceof _)) return new _(obj);，如果当前的this对象及其原型链上没有_类型的对象，那么执行new操作。调用_([1,2,3,4]))时，this为window，那么(this instanceof _)为false，所以我们执行new _([1,2,3,4])。

第三步：执行new _([1,2,3,4])，继续调用_函数，这时

obj为[1,2,3,4]

this为一个新对象，并且这个对象的__proto__指向_.prototype(对于new对象执行有疑问，请猛戳此处)

此时

(obj instanceof _)为false

(this instanceof _)为true

所以此处会执行this._wrapped = obj;，在新对象中，添加_wrapped属性，将[1,2,3,4]挂载进去。

综合上述函数实现的效果就是：

_([1,2,3,4]))<=====>new _([1,2,3,4])

然后执行如下构造函数：

1
2
3
var _ = function(obj){
    this._wrapped = obj
}

最后得到的对象为：

image-20190306201849178

image-20190306235445836

我们执行如下代码：

1
2
3
console.log(_([1,2,3,4]));
console.log(_.prototype);
console.log(_([1,2,3,4]).__proto__ == _.prototype);

看一下打印的信息：

image-20190306214133549

这表明通过_（obj）构建出来的对象确实具有两个特征：

  1. 下面挂载了我们传入的对象或数组
  2. 对象的_proto_属性指向_的prototype

到此我们已经完成了第一个问题。

「我正是个天才 表情包」的圖片搜尋結果

接着解决第二个问题：

这个对象依然能够调用挂载在_对象上声明的方法

我们先来执行如下代码：

1
_([1,2,3,4]).first();

此时JavaScript执行器会先去找_([1,2,3,4])返回的对象上是否有first属性，如果没有就会顺着对象的原型链上去找first属性，直到找到并执行它。

我们发现_([1,2,3,4])返回的对象属性和原型链上都没有first！

image-20190307000429320

那我们自己先在_.prototype上面加一个上去试一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function(){
    //定义
    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;
        if (!(this instanceof _)) return new _(obj);
        this._wrapped = obj;
      };

    _.first = function(arr,n=0){
        if(n==0) return arr[0];
        return arr.slice(0,n);
    }
    _.prototype.first = function(arr,n=0){
        if(n==0) return arr[0];
        return arr.slice(0,n);
    }
    root._ = _;
})();

我们在执行打印一下：

1
console.log(_([1,2,3,4]));

效果如下：

image-20190306214554433

原型链上找到了first函数，我们可以调用first函数了。如下：

1
console.log(_([1,2,3,4]).first());

可惜报错了：

image-20190306214848922

于是调试一下：
image-20190306214932983

我们发现arr是undefined，但是我们希望arr是[1,2,3,4]。

「不慌 表情包」的圖片搜尋結果

我们马上改一下_.prototype.first的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(function(){
    
    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;
        if (!(this instanceof _)) return new _(obj);
        this._wrapped = obj;
      };

    _.first = function(arr,n=0){
        if(n==0) return arr[0];
        return arr.slice(0,n);
    }
    _.prototype.first = function(arr,n=0){
        arr = this._wrapped;
        if(n==0) return arr[0];
        return arr.slice(0,n);
    }
    root._ = _;
})();

我们在执行一下代码：

1
console.log(_([1,2,3,4]).first());

效果如下：

image-20190306215555025

我们的效果似乎已经达到了！

「赞 表情包」的圖片搜尋結果

现在我们执行下面的代码：

1
console.log(_([1,2,3,4]).first(2));

调试一下：

image-20190306215729756

凉凉了。

「凉凉 表情包」的圖片搜尋結果

其实我们希望的是：

将[1,2,3,4]和2以arguments的形式传入first函数

我们再来改一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
//_.prototype.first = function(arr,n=0){
    // arr = this._wrapped;
    // if(n==0) return arr[0];
    // return arr.slice(0,n);
//}
_.prototype.first=function(){
    /**
     * 搜集待传入的参数
     */
    var that = this._wrapped;
    var args = [that].concat(Array.from(arguments));
    console.log(args); 
}

我们再执行下面代码：

1
_([1,2,3,4]).first(2);

看一下打印的效果：

image-20190306220704637

参数都已经拿到了。

我们调用函数一下first函数，我们继续改代码：

1
2
3
4
5
6
7
8
9
10
11
_.prototype.first=function(){
     /**
      * 搜集待传入的参数
     */
     var that = this._wrapped;
     var args = [that].concat(Array.from(arguments));
     /**
      * 调用在_属性上的first函数
      */
     return _.first(...args);
}

这样一来_.prototype上面的函数的实际实现都省掉了，相当于做一层代理，调用一下。

一举两得！

执行一下最初我们的代码：

1
2
3
console.log(_.first([1,2,3,4]));
console.log(_.first([1,2,3,4],1));
console.log(_.first([1,2,3,4],3));

image-20190306221231484

现在好像我们所有的问题都解决了。

「赞 表情包」的圖片搜尋結果

但是似乎每声明一个函数都得在原型链上也声明一个相同名字的函数。形如下面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
_.a = function(args){
    //a的实现
}
_.prototype.a = function(){
    //调用_.a(args)
}
_.b = function(args){
    //b的实现
}
_.prototype.b = function(){
    //调用_.b(args)
}
_.c = function(args){
    //c的实现
}
_.prototype.c = function(){
    //调用_.c(args)
}
.
.
.
1000个函数之后...

会不会觉得太恐怖了!

「害怕 表情包」的圖片搜尋結果

我们能不能改成如下这样呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
_.a = function(args){
    //a的实现
}
_.b = function(args){
    //b的实现
}
_.c = function(args){
    //c的实现
}
1000个函数之后...
_.mixin = function(){
    //将_属性中声明的函数都挂载在_prototype上面
}
_.mixin(_);

上面这么做好处大大的：

我们可以专注于函数库的实现，不用机械式的复写prototype上的函数。

underscore也正是这么做的！

我们看看mixin函数在underscore中的源码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Add your own custom functions to the Underscore object.
_.mixin = function(obj) {
   _.each(_.functions(obj), function(name) {
   var func = _[name] = obj[name];
      _.prototype[name] = function() {
          var args = [this._wrapped];
          push.apply(args, arguments);
          return chainResult(this, func.apply(_, args));
      };
   });
    return _;
};
  
// Add all of the Underscore functions to the wrapper object.
_.mixin(_);

有了上面的铺垫，这个代码一点都不难看懂，首先调用_.each函数，形式如下：

1
2
3
_.each(arrs, function(item) {
    //遍历arrs数组中的每一个元素
}

我们一想就明白，我们在_对象属性上实现了自己定义的函数，那么现在要把它们挂载到_的prototype属性上面，当然先要遍历它们了。

所以我们可以猜到_.functions(obj)肯定返回的是一个数组，而且这个数组肯定是存储_对象属性上面关于我们实现的各个函数的信息。

我们看一下_.function(obj)的实现：

1
2
3
4
5
6
7
8
9
10
11
_.functions = _.methods = function(obj) {
  var names = [];
  /**
   **  遍历对象中的属性
   **/
  for (var key in obj) {
      //如果属性值是函数，那么存入names数组中
     if (_.isFunction(obj[key])) names.push(key);
  }
  return names.sort();
};

确实是这样的！

「拉菲 表情包」的圖片搜尋結果

我们把上述实现的代码整合起来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
(function(){
    /**
     * 保证兼容性
     */
    var root = typeof self == 'object' && self.self === self && self ||
    typeof global == 'object' && global.global === global && global ||
    this ||
    {};

    /**
     * 在调用_(obj)时，让其执行new _(obj),并将obj挂载在_wrapped属性之下
     */
    var _ = function(obj) {
        if (obj instanceof _) return obj;
        if (!(this instanceof _)) return new _(obj);
        this._wrapped = obj;
      };
    
    //自己实现的first函数
    _.first = function(arr,n=0){
        if(n==0) return arr[0];
        return arr.slice(0,n);
    }

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

    //遍历生成数组存储_对象的函数值属性
    _.functions = _.methods = function(obj) {
        var names = [];
        for (var key in obj) {
          if (_.isFunction(obj[key])) names.push(key);
        }
        return names.sort();
      };
  
    //自己实现的遍历数组的函数
    _.each = function(arrs,callback){
        for(let i=0;i<arrs.length;i++){
            callback(arrs[i]);
        }
    }
    
    var ArrayProto = Array.prototype;
    var push = ArrayProto.push;
 
    //underscore实现的mixin函数
    _.mixin = function(obj) {
        console.log(_.functions(obj)); //我们打印一下_.functions(_)到底存储了什么？
        _.each(_.functions(obj), function(name) {
          var func = _[name] = obj[name];
           _.prototype[name] = function() {
               var args = [this._wrapped];
               push.apply(args, arguments);
               return func.apply(_, args);
           };
        });
         return _;
    };

    //执行minxin函数
    _.mixin(_);
    root._ = _;
})();

我们看一下_.functions(obj)返回的打印信息：

image-20190306224747300

确实是_中自定义函数的属性值。

我们再来分析一下each中callback遍历各个属性的实现逻辑。

1
2
3
4
5
6
var func = _[name] = obj[name];
 _.prototype[name] = function() {
     var args = [this._wrapped];
      push.apply(args, arguments);
     return func.apply(_, args);
};

第一句：func变量存储每个自定义函数

第二句： _.prototype[name]=function();在_.prototype上面也声明相同属性的函数

第三句：args变量存储_wrapped下面挂载的值

第四句：跟var args = [that].concat(Array.from(arguments));作用相似，将两边的参数结合起来

第五句：执行func变量指向的函数，执行apply函数，将上下文对象_和待传入的参数`args``传入即可。

我们再执行以下代码：

1
2
3
console.log(_.first([1,2,3,4]));
console.log(_.first([1,2,3,4],1));
console.log(_.first([1,2,3,4],3));

结果如下：

image-20190306230712917

Perfect！

这个函数在我们的浏览器中使用已经没有问题。

但是在Node中呢？所以下面引出新的问题。

再回归兼容性问题

我们知道在Node中，我们是这样的：

1
2
3
4
5
6
//a.js
let a = 1;
module.exports = a;
//index.js
let b = require('./a.js');
console.log(b) //打印1

那么：

1
2
let _ = require('./underscore.js')
_([1,2,3,4]).first(2);

我们也希望上述的代码能够在Node中执行。

所以root._ = _是不够的。

underscore是怎么做的呢？

如下：

1
2
3
4
5
6
7
8
if (typeof exports != 'undefined' && !exports.nodeType) {
    if (typeof module != 'undefined' && !module.nodeType && module.exports) {
        exports = module.exports = _;
    }
    exports._ = _;
} else {
    root._ = _;
}

我们看到当全局属性exports不存在或者不是DOM节点时，说明它在浏览器中，所以：

root._ = _;

如果exports存在，那么就是在Node环境下，我们再来进行判断：

如果module存在，并且不是DOM节点，并且module.exports也存在的话，那么执行：

exports = module.exports = _;

在统一执行：

exports._ = _;

附录

下面是最后整合的阉割版underscore代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
(function(){
    /**
     * 保证兼容性
     */
    var root = typeof self == 'object' && self.self === self && self ||
    typeof global == 'object' && global.global === global && global ||
    this ||
    {};

    /**
     * 在调用_(obj)时，让其执行new _(obj),并将obj挂载在_wrapped属性之下
     */
    var _ = function(obj) {
        if (obj instanceof _) return obj;
        if (!(this instanceof _)) return new _(obj);
        this._wrapped = obj;
      };
    
    //自己实现的first函数
    _.first = function(arr,n=0){
        if(n==0) return arr[0];
        return arr.slice(0,n);
    }

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

    //遍历生成数组存储_对象的函数值属性
    _.functions = _.methods = function(obj) {
        var names = [];
        for (var key in obj) {
          if (_.isFunction(obj[key])) names.push(key);
        }
        return names.sort();
      };
  
    //自己实现的遍历数组的函数
    _.each = function(arrs,callback){
        for(let i=0;i<arrs.length;i++){
            callback(arrs[i]);
        }
    }

    var ArrayProto = Array.prototype;
    var push = ArrayProto.push;
 
    //underscore实现的mixin函数
    _.mixin = function(obj) {
        _.each(_.functions(obj), function(name) {
        var func = _[name] = obj[name];
           _.prototype[name] = function() {
               var args = [this._wrapped];
               push.apply(args, arguments);
               return func.apply(_, args);
           };
        });
        return _;
    };


    //执行minxin函数
    _.mixin(_);
    if (typeof exports != 'undefined' && !exports.nodeType) {
        if (typeof module != 'undefined' && !module.nodeType && module.exports) {
            exports = module.exports = _;
        }
        exports._ = _;
    } else {
        root._ = _;
    }
})();

欢迎各位大佬拍砖！同时您的点赞是我写作的动力~谢谢。