文档章节

underscore.js 源码分析5 基础函数和each函数的使用

SnowFlake
 SnowFlake
发布于 2016/06/20 16:15
字数 428
阅读 0
收藏 0

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。具体解释

本文转载自:http://www.cnblogs.com/mafeifan/p/5498672.html

SnowFlake
粉丝 9
博文 171
码字总数 0
作品 0
郑州
程序员
私信 提问
【愣锤笔记】underscore源码里中高级前端所需要掌握的内容

underscore.js作为一个函数式库,也可以说是个工具库,在日常开发中可以显著的帮我们提示开发效率。当然了,同等的还有lodash等更为流行的库,但是这并不妨碍我们欣赏underscore.js的设计艺术...

愣锤
06/21
0
0
浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异

Underscore.js是一个很精干的库,压缩后只有5.2KB。它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程。 本文仅探讨Underscore.js的两个函数方法 和 的原理、...

代码先生
2014/11/03
1K
4
Backbone源码分析-Backbone架构+流程图

作者:nuysoft/高云/nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接。 Backbone0.9.1源码分析分析系列 jQuery1.6.1源码分析系列 参考资料 http://documentclo...

吞吞吐吐的
2017/09/07
0
0
Python--(爬虫与数据库的连接)

(每一天都是属于你的!) Python对于初学后巩固基础的人还是更多的来接触python爬虫会更好一些,在Python爬虫中包含很多基础部分知识,并且在项目中会提升你的成功感!加油! 我在工作之余时...

jamesjoshuasss
2018/06/08
0
0
JavaScript函数式编程库--Prelude.ls

Prelude.ls是一个JavaScript函数式编程库,这是一个基础库,在一定程度上基于Haskell(一种纯函数式编程语言)的Prelude模块。 Prelude.ls基于LiveScript编写,LiveScript是JavaScript语言的...

匿名
2012/06/18
557
0

没有更多内容

加载失败,请刷新页面

加载更多

哪些情况下适合使用云服务器?

我们一直在说云服务器价格适中,具备弹性扩展机制,适合部署中小规模的网站或应用。那么云服务器到底适用于哪些情况呢?如果您需要经常原始计算能力,那么使用独立服务器就能满足需求,因为他...

云漫网络Ruan
今天
10
0
Java 中的 String 有没有长度限制

转载: https://juejin.im/post/5d53653f5188257315539f9a String是Java中很重要的一个数据类型,除了基本数据类型以外,String是被使用的最广泛的了,但是,关于String,其实还是有很多东西...

低至一折起
今天
22
0
OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
11
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
9
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部