underscore.js 源码分析5 基础函数和each函数的使用
isArrayLike 检测是数组对象还是纯数组
var property = function(key) {
return function(obj) {
return obj == null ? void 0 : obj[key];
};
};
var getLength = property('length');
var isArrayLike = function(collection) {
var length = getLength(collection);
return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};
从下往上看 isArrayLike -> getLength -> property
property是个闭包
简化后：
getLength 返回的是一个函数
var getLength = function(obj){
return obj['length'];
}
当调用
// collection = [1,2,3]
var length = getLength(collection);
var isArrayLike = function(collection) {
// var length = [1,2,3]['length'];
var length = getLength(collection);
return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};
T5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Underscore</title>
<script src="underscore.js"></script>
</head>
<body>
</body>
</html> <script type="text/javascript" src="T5.js"></script>
T5.js
_.each([1, 2, 3], alert);
执行过程：
1. 接着就进入了optimizeCb函数。
// obj = [1,2,3], iteratee = alert(), context = undefined
_.each = _.forEach = function(obj, iteratee, context) {
iteratee = optimizeCb(iteratee, context);
var i, length;
if (isArrayLike(obj)) {
for (i = 0, length = obj.length; i < length; i++) {
iteratee(obj[i], i, obj);
}
} else {
var keys = _.keys(obj);
for (i = 0, length = keys.length; i < length; i++) {
iteratee(obj[keys[i]], keys[i], obj);
}
}
return obj;
};
2. optimizeCb 函数
// Internal function that returns an efficient (for current engines) version
// of the passed-in callback, to be repeatedly applied in other Underscore
// functions.
var optimizeCb = function(func, context, argCount) {
if (context === void 0) return func;
switch (argCount == null ? 3 : argCount) {
case 1: return function(value) {
return func.call(context, value);
};
// The 2-parameter case has been omitted only because no current consumers
// made use of it.
case 3: return function(value, index, collection) {
return func.call(context, value, index, collection);
};
case 4: return function(accumulator, value, index, collection) {
return func.call(context, accumulator, value, index, collection);
};
}
return function() {
return func.apply(context, arguments);
};
};
因为argCount = underfined。switch中的条件都不满足。
等于就直接执行了
return function() {
return func.apply(context, arguments);
};
3. isArrayLike 上面已分析过
var isArrayLike = function(collection) {
var length = getLength(collection);
return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};
返回true
4.
// 接着执行each中的
if (isArrayLike(obj)) {
for (i = 0, length = obj.length; i < length; i++) {
iteratee(obj[i], i, obj);
}
}
Tips:
1. context === void 0 判断context是否为undefined。具体解释
underscore.js 源码分析5 基础函数和each函数的使用的更多相关文章
- Vue.js 源码分析(十三) 基础篇 组件 props属性详解
父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...
- Vue.js 源码分析(四) 基础篇 响应式原理 data属性
官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...
- Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解
Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...
- Vue.js 源码分析(二) 基础篇 全局配置
Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies ;自定义合并策略的选项silent ...
- Vue.js 源码分析(九) 基础篇 生命周期详解
先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDes ...
- Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解
先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...
- Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解
先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
- Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
- Vue.js 源码分析(十) 基础篇 ref属性详解
ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...
随机推荐
- Inno Setup添加中文安装语言文件
如果你不添加中文安装语言文件,你编译生成的安装包的语言是不会有中文. 一,打开软件安装目录下的Languages文件夹下,有如下好多文件,可是就是没有Chianese.isl. 好了,你只需要随便拷贝 ...
- [USACO09MAR]Look Up
嘟嘟嘟 题面说的有点问题,应该是向后看齐. 于是我们维护一个单调递减栈,如果当前a[i]比栈顶元素大,就执行pop操作,然后把pop出来的元素的答案都用 i 更新即可. #include<cst ...
- 新闻cms管理系统(三) ------菜单管理
1.前期准备工作 (1)模板介绍 添加菜单的模板页面 菜单管理首页: 添加菜单页面: (2)公共类引入介绍 公共函数文件的引入(位置: Application/Admin/Controller/Com ...
- 崩溃！UIAlertController 引起的崩溃
UIAlertController 使用方法很简单,下面贴简单的使用方法: UIAlertController *alert = [UIAlertController alertControllerW ...
- 在hyper-v中安装centos后配置网络
/etc/sysconfig/network-scripts vi ifcfg-eth0 改为以下配置 TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no ...
- PAT——1050. 螺旋矩阵
本题要求将给定的N个正整数按非递增的顺序,填入“螺旋矩阵”.所谓“螺旋矩阵”,是指从左上角第1个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为m行n列,满足条件:m*n等于N:m>=n:且m- ...
- HDU 3367 （伪森林，克鲁斯卡尔）
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=3367 Pseudoforest Time Limit: 10000/5000 MS (Java/Oth ...
- C#实体更新指定的字段
接口类: /// <summary> /// 更新指定字段 /// </summary> /// <param name="entity">实体 ...
- Java中23种设计模式（附代码样例）
一.设计模式分类总体来说设计模式分为三大类:创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式.结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组 ...
- 【.net开发者自学java系列】使用Eclipse开发SpringMVC（1）
第一篇随笔,有点紧张.有错别字是正常的.... 好了,自我描述下.我是一个有几年.net开发经验的老菜鸟.是的,老菜鸟.别跟我讨论底层,别跟我讨论协议.TMD啥都不会. 为什么要学JAVA,我也不想, ...