这几天有大神推荐读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就明白了

  

var arr = [1, 2, 3];
console.log(this);
var newArr =_.map(arr,function(item){
console.log(this);
return item*3;
});
var arr = [1, 2, 3];
console.log(this);
var newArr =_.map(arr,function(item){
console.log(this);
return item*3;
},arr);

underscore源码阅读记录的更多相关文章

  1. underscore源码阅读记录(二)

    引自underscore.js context参数用法 _.each(list, iteratee, [context]); context为上下文,如果传递了context参数,则把iterator ...

  2. EventBus源码解析 源码阅读记录

    EventBus源码阅读记录 repo地址: greenrobot/EventBus EventBus的构造 双重加锁的单例. static volatile EventBus defaultInst ...

  3. Underscore源码阅读极简版入门

    看了网上的一些资料,发现大家都写得太复杂,让新手难以入门.于是写了这个极简版的Underscore源码阅读. 源码: https://github.com/hanzichi/underscore-an ...

  4. underscore源码阅读

    1:函数式编程初探 2:if(obj.length === +obj.length)的判断 3:JS对象属性用中括号表示的优点在于可以用变量表示属性 4:callee,caller---JS高级程序设 ...

  5. flutter_boot android和flutter源码阅读记录

    版本号0.1.54 看源码之前,我先去看下官方文档,对于其源码的设计说明,文中所说的原生都是指android 看完官方文档的说明,我有以下几个疑问 第一个:容器是怎么设计的? 第二个:native和f ...

  6. Vue2.x 响应式部分源码阅读记录

    之前也用了一段时间Vue,对其用法也较为熟练了,但是对各种用法和各种api使用都是只知其然而不知其所以然.最近利用空闲时间尝试的去看看Vue的源码,以便更了解其具体原理实现,跟着学习学习. Proxy ...

  7. ReactiveCocoa 源码阅读记录。

    1:RACSingle 需要订阅信号 RACSignal *signal = [RACSignal createSignal:^RACDisposable * _Nullable(id<RACS ...

  8. Linux内核源码阅读记录一之分析存储在不同段中的函数调用过程

    在写驱动的过程中,对于入口函数与出口函数我们会用一句话来修饰他们:module_init与module_exit,那会什么经过修饰后,内核就能狗调用我们编写的入口函数与出口函数呢?下面就来分析内核调用 ...

  9. JQuery源码阅读记录

    新建html文件,在浏览器中打开文件,在控制台输入consoole.log(window);新建html文件,引入JQuery后在浏览器中打开,在控制台同样输入consoole.log(window) ...

随机推荐

  1. HTML页面跳转的5种方法

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件.1) html的实现 <head> <!-- 以下 ...

  2. Tiled Map地图编辑器键盘快捷键

    Tiled是款不错的地图编辑器,不过快捷键真是隐蔽啊,不看github上得wiki根本不知道,用的过程中查英文文档总是觉得慢,所以翻译成了中文. 通用 右键点击图块(tile):复制图块到图章刷(拖动 ...

  3. 动态加载js文件

    由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图, 于是就想的比较简单, var script = docume ...

  4. Linux 如何安装memcache?

    原有memcache所在机器损坏,需要在新的Linux机器上安装memcache,具体步骤如下: 1.使用Linux机器的root权限登陆 2.安装libevent 下载地址:http://libev ...

  5. 蓄水池算法(Reservoir Sampling)

    蓄水池算法是一种随机算法,可以形象的描述为从一个n维的list中选取k个元素,其中n是一个很大的数或者n是一个未知的数,而且一般n很大使得不会将list存在主存中. 解法: i = 0 while m ...

  6. java抽象语法

    1.基本概念: 0.0.抽象类的定义:抽象类是为子类提供一个规范,其目地是由子类去继承实现(类似国家提出的法律,由我们去执行). 0.1.定义抽象类用abstract来定义. 语法: public a ...

  7. JavaScript-取消事件-e.preventDefault();

    取消事件:(阻止默认行为) 当事件执行过程中,遇到问题,可取消事件.不再触发 如何e.preventDefault(); <!DOCTYPE html> <html> < ...

  8. xml文件格式说明

    转载自:http://www.cr173.com/html/10715_1.html 关于xml的有关操作,在读的过程中,由于是初学者有不明白的地方就查资料,发现自己多innerXml,outerXm ...

  9. 第十三章:降维:主成分分析PCA

  10. AOP 事务

    定义 AOP实际可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术,非业务类横切于业务类), 通过AOP以动态和非入侵方式来增强服务 事务的四大属性:ACID ...