underscore源码阅读记录

时间:2023-03-09 16:47:04
underscore源码阅读记录

  这几天有大神推荐读underscore源码,趁着项目测试的空白时间,看了一下。

  整个underscore包括了常用的工具函数,下面以1.3.3源码为例分析一下。

_.size = function(obj) {
return _.isArray(obj) ? obj.length : _.keys(obj).length;
};

  整个underscore源码基本上都是以上这种方式写的,所以弄懂上面这段源码,整个underscore的源码就大概清楚了六七成了,剩下的源码用些时间,也就迎刃而解。

  因为上面的函数内有_.keys,可能无法一下子弄清楚,下面这个函数源码更容易入门。

  

  _.isNaN = function(obj) {

        return obj !== obj;

    };

  只需弄明白对象_和函数参数obj这两个具体做了什么即可。

var _ = function(obj) {
return new wrapper(obj);
};

  _定义为一个函数,该函数接受一个名为obj的形参,然后返回一个wrapper类的实例。

  在浏览器环境中,_被定位全局对象window的属性。

var root = this;
root['_'] = _; 

  这样,浏览器全局的_与IIFE中的_都指向了同一个对象,在IIFE中对_的操作,也同样反应在全局环境的_中。

  此时,我们就明白了_的一部分原理了。上面提到的_.isNaN,在构造函数对象_上增加了一个isNaN的属性,该属性是一个函数方法。

  下面,接着研究wrapper

  

var _ = function(obj) {
return new wrapper(obj);
};
var wrapper = function(obj) {
this._wrapped = obj;
};
_.prototype = wrapper.prototype;

  函数_返回wrapper类的一个实例,该实例中属性_wrapped是传给函数_的参数,_与wrapper的原型对象指向相同。将underscore相关的方法添加到wrapper原型, 创建的_对象就具备了underscore的方法。

 引自underscore.js context参数用法

  _.each(list, iteratee, [context]);

  context为上下文,如果传递了context参数,则把iterator绑定到context对象上
  如果要修改iterator的调用对象为context,即函数中this为context,就传递这个参数,否则context为undefined
  下面两个示例,运行看看打印出来的this就明白了

  

underscore源码阅读记录
var arr = [1, 2, 3];
console.log(this);
var newArr =_.map(arr,function(item){
console.log(this);
return item*3;
});
underscore源码阅读记录
underscore源码阅读记录
var arr = [1, 2, 3];
console.log(this);
var newArr =_.map(arr,function(item){
console.log(this);
return item*3;
},arr);
underscore源码阅读记录