这几天有大神推荐读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. 多次drawRect,显示重叠,需要设置背景颜色

    自己写的一个控件,中途在setNeedsDisplay,重写drawRect方法,有时会把以前drawRect绘制上去,不知道为什么,后来设置了控件的背景颜色backgroundcolor,这个问题就 ...

  2. G.Interference Signal---河南省第八届程序设计大赛(dp)

    G.Interference Signal 时间限制: 2 Sec  内存限制: 128 MB提交: 47  解决: 18[提交][状态] 题目描述 Dr.Kong’s laboratory moni ...

  3. System.Security.SecurityException The source was not found, but some or all event logs could not be searched.Inaccessible logs Security.

    An exception occurred during the Install phase. System.Security.SecurityException The source was not ...

  4. C# 基础(7)--线程

    进程与线程 一个程序就是一个进程,进程包含线程,多个线程之间可以“并发”执行(确切的说是不停地切换),CPU是跟线程打交道的. 线程是程序的一个执行流,每个线程都有之间专有的寄存器(栈指针.程序计数器 ...

  5. ubuntu 安装JAVA jdk的两种方法:

    ubuntu 安装jdk 的两种方式: 1:通过ppa(源) 方式安装. 2:通过官网下载安装包安装. 这里推荐第1种,因为可以通过 apt-get upgrade 方式方便获得jdk的升级 使用pp ...

  6. Windows 终端服务器授权 激活

      一.激活2003终端授权服务器 首先确认是否安装windows组件 添加删除程序——添加删除windows组件 终端服务器的安装就不介绍了,下面说一下激活授权服务器. 1)点击”开始”->” ...

  7. IE 浏览器 如何关闭令人讨厌的“此网站需要运行以下加载项:XXX。如果您信任该网站和该加载项并允许运行该加载项,请单击这里...

    1.运行gpedit.msc 2.在打开的组策略中打开用户配置——管理模板——Windows组件——Internet Explorer 3.选择“关闭ActiveX选择启用提示”,将其状态改为“已启用 ...

  8. Windows平台下PHP开发环境的配置

    Windows平台下PHP开发环境的配置 一.基本环境 1.Windows XP 32位 2.Apache 2.2.25,下载地址:http://mirror.bit.edu.cn/apache/ht ...

  9. Android 下进行单元测试 Test run failed:Instrumentation run failed due to 'java.lang.ClassNotFoundException'

    废话不说,一直报错.网上介绍的都是缺少如下声明之类. 但注意的是工程配置是导出junit包, 路径为  project上右键 --> properties -> java build pa ...

  10. 使用ajax预加载图片

    使用Ajax 上面所给出的方法似乎不够酷,那现在来看一个使用Ajax实现图片预加载的方法.该方法利用DOM,不仅仅预加载图片,还会预加载CSS.JavaScript等相关的东西.使用Ajax,比直接使 ...